湖蓝色

网页标准湖蓝,明亮清透的高山湖水色

HEX#5897FB
RGBrgb(88, 151, 251)
HSLhsl(217, 95%, 66%)
HSVhsv(217, 65%, 98%)
CMYKcmyk(65%, 40%, 0%, 2%)
HEXA#5897FBFF
RGBArgba(88, 151, 251, 1)
HSLAhsla(217, 95%, 66%, 1)
OKLCHoklch(82.7%, 0.086, 253)
LCHlch(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 正文
高对比文字
#FFFFFF对比度 2.9:1Fail
适合正文、标题等主要内容,确保所有用户都能清晰阅读
Aa14px 正文
标准文字
#FFFFFF对比度 2.9:1Fail
适合普通正文内容,满足 WCAG AA 标准
Aa14px 正文
大文字/UI组件
#FFFFFF对比度 2.9:1Fail
适合大号文字(≥18px 粗体或 ≥24px)、图标、UI 组件边界
Aa14px 正文
装饰/分割线
#FEC8DD对比度 2:1Fail
适合装饰性元素、分割线、非必要信息文字
明度变化 (Lightness)固定色相与饱和度,明度按比例缩放 30%→100%
#032863复制
#033686复制
#0445AE复制
#0555D6复制
#0B66F9复制
#2E7CFA复制
#5695FB复制
饱和度变化 (Saturation)固定色相与明度,饱和度按比例缩放 40%→100%
#87A1C9复制
#7F9FD2复制
#779DDA复制
#6E9BE2复制
#6699EA复制
#5E97F3复制
#5695FB复制
明度 + 饱和度混合变化明度与饱和度同时按比例缩放 30%→100%
#243042复制
#293E60复制
#2C4F87复制
#2A5EB2复制
#276DDD复制
#3A7FEE复制
#5695FB复制
色相微调 (Hue Shift)固定饱和度与明度,步进微调色相 ±15°
#56BEFB复制
#56B1FB复制
#56A3FB复制
#5695FB复制
#5687FB复制
#567AFB复制
#566CFB复制

💡 适用场景

🏊

游泳装备

竞速泳镜或泳衣的强调色,在水中极高辨识度,契合流线型的动感设计。

🔘

号召按钮

着陆页的行动号召按钮,利用高识别度和愉悦感,显著提升用户点击率。

🎮

电竞外设

键盘背光或鼠标侧键,在暗光中投射出炫酷而又不刺眼的氛围光。

📸

旅拍滤镜

修图软件的预设滤镜,能轻松调出清澈通透的高原湖泊色调,增加夏日感。

📜 起源与历史

湖蓝这一称谓源自对高山冰川湖和喀斯特地貌湖水的直观感受。受水中矿物质散射阳光的影响,湖水在特定季节会呈现晶莹的蓝绿色。19世纪浪漫主义诗人曾歌唱过这种澄澈之美。

作为颜料,湖蓝的出现与19世纪合成无机颜料的兴起密不可分,它比天然颜料更纯净。在20世纪初的现代派绘画中,湖蓝被用来表现水体的透明感和光影的跳跃。

在数字标准的建立过程中,湖蓝以其高饱和度和适中的亮度被选为UI安全色。与天空蓝相比,湖蓝多了一份绿相的穿透力,使其在屏幕显示中格外醒目。

如今,湖蓝是互联网企业的宠儿,它跳脱了传统蓝色的沉闷,被广泛用于启动按钮、超链接和体现品牌活力的视觉系统中,代表科技与生命力的交融。

🧠 色彩心理学

灵动似湖水波光潋滟,赋予视觉灵活的跳跃感,打破一成不变的死寂。
清澈如同一眼见底的浅滩,带来心理上的通透感,毫无隐瞒与负担。
活力较高的色彩纯度转化为旺盛的生命力,让人精神抖擞,充满干劲。
亲和具有极强的普适性,不偏不倚的色调消除了年龄与文化的隔阂。
探寻湖蓝色的召唤像深湖中心的小岛,激发人出发前往未知领域的好奇心。
疗愈联想起度假中的宁静水面,能够抚平城市生活带来的紧张与神经衰弱。