天蓝色
CSS官方天空浅蓝，明亮通透如无云晴空
HEX
#87CEEBRGB
rgb(135, 206, 235)HSL
hsl(197, 71%, 73%)HSV
hsv(197, 43%, 92%)CMYK
cmyk(43%, 12%, 0%, 8%)HEXA
#87CEEBFFRGBA
rgba(135, 206, 235, 1)HSLA
hsla(197, 71%, 73%, 1)OKLCH
oklch(90.7%, 0.045, 221)LCH
lch(89.7%, 24, 224)🎨 配色方案
相似色2-3个相邻色相（≤60°）
复制
#89EBD6复制
#87CEEB复制
#899EEB三色系3个间隔120°的色相
复制
#87CEEB复制
#EB89CF复制
#CFEB89分裂互补色主色 + 互补色两侧的颜色
复制
#87CEEB复制
#EB899E复制
#EBD689互补色2个间隔180°的色相
复制
#87CEEB复制
#EBA589矩形双互补色4个形成矩形的色相
复制
#87CEEB复制
#D689EB复制
#EBA589复制
#9EEB89单色系单一色相，变化饱和度和亮度
复制
#186E90复制
#32ACDC复制
#87CEEB复制
#E0F3FA复制
#FFFFFF♿ WCAG 对比度配色
深入了解 →Aa14px 正文
高对比文字
适合正文、标题等主要内容，确保所有用户都能清晰阅读
Aa14px 正文
标准文字
适合普通正文内容，满足 WCAG AA 标准
Aa14px 正文
大文字/UI组件
适合大号文字（≥18px 粗体或 ≥24px）、图标、UI 组件边界
Aa14px 正文
装饰/分割线
适合装饰性元素、分割线、非必要信息文字
明度变化 (Lightness)固定色相与饱和度，明度按比例缩放 30%→100%
饱和度变化 (Saturation)固定色相与明度，饱和度按比例缩放 40%→100%
明度 + 饱和度混合变化明度与饱和度同时按比例缩放 30%→100%
色相微调 (Hue Shift)固定饱和度与明度，步进微调色相 ±15°
💡 适用场景
母婴产品
婴儿服饰或儿童房墙面，给予视觉温和的刺激，构筑安心温暖的成长小天地。
度假广告
旅行社或航空公司网站的主打色，联想起蓝天与海滩，激发即刻出行的冲动。
消息提示
应用内的消息气泡或通知点，利用其高可见度又不显紧迫的特性，温和提示。
航司品牌
作为廉价航空或休闲旅行品牌的标识色，传递平价、便捷与轻松愉快的飞行体验。
📜 起源与历史
天蓝色直接取材于理想化晴空的记忆，自18世纪浪漫主义兴起便备受推崇，艺术家藉此表达对大自然纯粹之美的颂扬。在洛可可时期，天蓝是宫廷装饰与服饰中常见的轻快色调。
现代主义设计运动摒弃繁复装饰，天蓝色因其干净、纯粹的特质成为国际主义风格的宠儿。它在建筑和工业设计中被大量应用，代表了对未来乌托邦的美好憧憬。
20世纪中叶，随着大众传媒和彩色电视的普及，天蓝色走入千家万户的客厅。它常被用于儿童用品与休闲服饰，建立起天真无邪与假期欢乐的牢固心理连接。
作为CSS的基础色之一，天蓝色在数字界面中扮演着信息传递者的角色。它比深蓝更无压迫感，特别适用于通知气泡、高亮链接及年轻化社交产品的氛围营造。
🧠 色彩心理学
乐观一眼望去便是好天气的象征，能瞬间点燃希望，驱散心头的阴霾与忧郁。
自由与无垠天空和飞鸟的联想绑定，唤醒挣脱束缚、翱翔天际的原始渴望。
纯真毫无心机的色调，仿佛孩童眼中未被污染的世界，充满简单的信任。
透明视觉上的通透感带来心理上的坦诚，鼓励开放和诚恳的人际交流。
活力不刺眼的明亮感注入源源能量，让人精神为之一振，焕发童趣。
接纳包容的色调，如同天空拥抱万物，传递出无条件的接纳和安全感。