水蓝色
清澈海水般的蓝绿交融,晶莹透亮清爽宜人
HEX
#66FFE6RGB
rgb(102, 255, 230)HSL
hsl(170, 100%, 70%)HSV
hsv(170, 60%, 100%)CMYK
cmyk(60%, 0%, 10%, 0%)HEXA
#66FFE6FFRGBA
rgba(102, 255, 230, 1)HSLA
hsla(170, 100%, 70%, 1)OKLCH
oklch(94.2%, 0.084, 185)LCH
lch(94.5%, 36.6, 193)🎨 配色方案
相似色2-3个相邻色相(≤60°)
复制
#66FF99复制
#66FFE6复制
#66CCFF三色系3个间隔120°的色相
复制
#66FFE6复制
#E566FF复制
#FFE666分裂互补色主色 + 互补色两侧的颜色
复制
#66FFE6复制
#FF66CC复制
#FF9966互补色2个间隔180°的色相
复制
#66FFE6复制
#FF6680矩形双互补色4个形成矩形的色相
复制
#66FFE6复制
#9966FF复制
#FF6680复制
#CCFF66单色系单一色相,变化饱和度和亮度
复制
#009980复制
#00FFD5复制
#66FFE6复制
#CCFFF6复制
#FFFFFF♿ WCAG 对比度配色
深入了解 →Aa14px 正文
高对比文字
适合正文、标题等主要内容,确保所有用户都能清晰阅读
Aa14px 正文
标准文字
适合普通正文内容,满足 WCAG AA 标准
Aa14px 正文
大文字/UI组件
适合大号文字(≥18px 粗体或 ≥24px)、图标、UI 组件边界
Aa14px 正文
装饰/分割线
适合装饰性元素、分割线、非必要信息文字
明度变化 (Lightness)固定色相与饱和度,明度按比例缩放 30%→100%
饱和度变化 (Saturation)固定色相与明度,饱和度按比例缩放 40%→100%
明度 + 饱和度混合变化明度与饱和度同时按比例缩放 30%→100%
色相微调 (Hue Shift)固定饱和度与明度,步进微调色相 ±15°
💡 适用场景
水上乐园
水滑梯和造浪池的装饰色,最大化营造清凉水感,吸引游客打卡分享。
冰饮包装
气泡水和冰棒的夏季限定包装,视觉降温效果显著,刺激购买欲。
太阳镜框
运动太阳镜的镜框流行色,在夏季运动场景中充满动感与个性表达。
儿童产品
儿童玩具和文具的常用色,明亮快乐的色调恰好匹配孩子天真烂漫的天性。
📜 起源与历史
水蓝色是数字时代高饱和度屏幕色的代表,在电子显示技术成熟后才得以精确呈现。它模拟了阳光穿透清澈浅海时折射出的那种令人心醉的蓝绿光芒。
在20世纪80年代的孟菲斯设计运动中,类似水蓝色的高亮色彩被大量用于后现代主义家具和海报,打破了现代主义黑白灰的沉闷。
进入互联网时代,水蓝色成为社交媒体和科技公司UI设计的热门色,Skype和推特等平台都曾将其作为品牌主色或强调色。
近年来,水蓝色因其清爽的视觉感受,在炎热的夏季成为各类消费品牌的季节限定色,从饮料包装到快时尚服饰都能见到它的身影。
🧠 色彩心理学
清爽像喝了一口冰镇苏打水,从视觉到心理都感受到一阵透心凉的舒爽。
晶莹如同玻璃般透明纯净的质感,没有一丝杂质,令人联想起水晶和冰块的剔透。
快乐明快的色调能够快速提升情绪,带来一种孩子般无忧无虑的简单快乐。
自由海水般无拘无束的联想,打破日常生活的沉闷,激发说走就走的冲动。
友好极具亲和力的色彩,像一位笑容灿烂的朋友,让人不自觉想要靠近和交流。
梦幻高亮的蓝绿带有不真实的梦幻感,仿佛进入热带鱼游曳的水下童话世界。