湖蓝色
网页标准湖蓝,明亮清透的高山湖水色
HEX
#5897FBRGB
rgb(88, 151, 251)HSL
hsl(217, 95%, 66%)HSV
hsv(217, 65%, 98%)CMYK
cmyk(65%, 40%, 0%, 2%)HEXA
#5897FBFFRGBA
rgba(88, 151, 251, 1)HSLA
hsla(217, 95%, 66%, 1)OKLCH
oklch(82.7%, 0.086, 253)LCH
lch(80.1%, 36.3, 256)🎨 配色方案
相似色2-3个相邻色相(≤60°)
复制
#56E7FB复制
#5897FB复制
#6956FB三色系3个间隔120°的色相
复制
#5897FB复制
#FB5695复制
#95FB56分裂互补色主色 + 互补色两侧的颜色
复制
#5897FB复制
#FB6956复制
#E7FB56互补色2个间隔180°的色相
复制
#5897FB复制
#FBBC56矩形双互补色4个形成矩形的色相
复制
#5897FB复制
#FB56E7复制
#FBBC56复制
#56FB69单色系单一色相,变化饱和度和亮度
复制
#033481复制
#065BE5复制
#5897FB复制
#B9D3FD复制
#FFFFFF♿ WCAG 对比度配色
深入了解 →Aa14px 正文
高对比文字
适合正文、标题等主要内容,确保所有用户都能清晰阅读
Aa14px 正文
标准文字
适合普通正文内容,满足 WCAG AA 标准
Aa14px 正文
大文字/UI组件
适合大号文字(≥18px 粗体或 ≥24px)、图标、UI 组件边界
Aa14px 正文
装饰/分割线
适合装饰性元素、分割线、非必要信息文字
明度变化 (Lightness)固定色相与饱和度,明度按比例缩放 30%→100%
饱和度变化 (Saturation)固定色相与明度,饱和度按比例缩放 40%→100%
明度 + 饱和度混合变化明度与饱和度同时按比例缩放 30%→100%
色相微调 (Hue Shift)固定饱和度与明度,步进微调色相 ±15°
💡 适用场景
游泳装备
竞速泳镜或泳衣的强调色,在水中极高辨识度,契合流线型的动感设计。
号召按钮
着陆页的行动号召按钮,利用高识别度和愉悦感,显著提升用户点击率。
电竞外设
键盘背光或鼠标侧键,在暗光中投射出炫酷而又不刺眼的氛围光。
旅拍滤镜
修图软件的预设滤镜,能轻松调出清澈通透的高原湖泊色调,增加夏日感。
📜 起源与历史
湖蓝这一称谓源自对高山冰川湖和喀斯特地貌湖水的直观感受。受水中矿物质散射阳光的影响,湖水在特定季节会呈现晶莹的蓝绿色。19世纪浪漫主义诗人曾歌唱过这种澄澈之美。
作为颜料,湖蓝的出现与19世纪合成无机颜料的兴起密不可分,它比天然颜料更纯净。在20世纪初的现代派绘画中,湖蓝被用来表现水体的透明感和光影的跳跃。
在数字标准的建立过程中,湖蓝以其高饱和度和适中的亮度被选为UI安全色。与天空蓝相比,湖蓝多了一份绿相的穿透力,使其在屏幕显示中格外醒目。
如今,湖蓝是互联网企业的宠儿,它跳脱了传统蓝色的沉闷,被广泛用于启动按钮、超链接和体现品牌活力的视觉系统中,代表科技与生命力的交融。
🧠 色彩心理学
灵动似湖水波光潋滟,赋予视觉灵活的跳跃感,打破一成不变的死寂。
清澈如同一眼见底的浅滩,带来心理上的通透感,毫无隐瞒与负担。
活力较高的色彩纯度转化为旺盛的生命力,让人精神抖擞,充满干劲。
亲和具有极强的普适性,不偏不倚的色调消除了年龄与文化的隔阂。
探寻湖蓝色的召唤像深湖中心的小岛,激发人出发前往未知领域的好奇心。
疗愈联想起度假中的宁静水面,能够抚平城市生活带来的紧张与神经衰弱。