#B6C0E2 颜色代码洞察

您自信设计所需的所有颜色转换、和谐配色和无障碍性检查。

RGB:rgb(182, 192, 226)
HSL:hsl(226, 43%, 80%)
HEX
#B6C0E2
RGB
182, 192, 226
HSL
226°, 43%, 80%
HSV
226°, 19%, 89%
CMYK
19%, 15%, 0%, 11%

颜色转换

在一个地方生成多种颜色模型的值。

#B6C0E2

≈ 钢蓝色

参考色卡

较低的 ΔE 意味着更接近的视觉匹配

色调与阴影

探索将 #B6C0E2 与白色或黑色混合时的表现。这些色板非常适合悬停状态、阴影和背景。

悬停以复制任何十六进制值,并在您的界面中重复使用。

阴影

0–100%
0%#B6C0E2
10%#99A7D6
20%#7C8ECB
30%#5F75BF
40%#465EAF
50%#3A4F92
60%#2F3F75
70%#232F58
80%#171F3A
90%#0C101D
100%#000000

色调

0–100%
0%#B6C0E2
10%#BDC7E5
20%#C5CDE8
30%#CCD3EB
40%#D3D9EE
50%#DBE0F0
60%#E2E6F3
70%#E9ECF6
80%#F0F2F9
90%#F8F9FC
100%#FFFFFF

常见用例

  • UI 组件状态(悬停、活动、禁用)
  • 使用阴影和高光创建深度
  • 构建一致的颜色系统

设计系统

设计系统提示

这些变体构成了内聚调色板的基础。导出它们以保持营销、产品和工程部门的一致性。

导出调色板

和谐配色

使用由 #B6C0E2 生成的和谐配色,即时构建平衡的调色板。

点击任意色板以打开其详细信息页面并继续探索。

如何使用

选择一种主导颜色,然后让辅助色调作为排版、表面和行动号召按钮的强调色。

重要性

平衡的和谐配色能够传达意图——平静、活力、高端——而不会使您的布局过于复杂。

互补色

对立色调,可产生冲击力和大胆的对比。

最适合

高影响力行动号召、徽标和主视觉区域

邻近色

相邻色调,适用于自然、流畅的渐变。

最适合

自然灵感、平静的仪表板

三元色

三个均匀间隔的色调,实现活泼的平衡。

最适合

活泼的品牌设计和编辑布局

四元色

两对互补色,提供丰富的多样性。

最适合

插图和营销实验

单色系

同一色相家族中较浅和较深的同系色。

最适合

极简主义界面和高级 UI 状态

无障碍性对比度

检查 #B6C0E2 与常见文本颜色的可读性,确保每位访问者都能获得清晰的体验。

使用 AA 作为正文的基准,AAA 用于高级无障碍性。

黑色文本 上的示例文本
文本颜色#000000
背景#B6C0E2
对比度11.63:1
WCAG 等级AAA
白色文本 上的示例文本
文本颜色#FFFFFF
背景#B6C0E2
对比度1.81:1
WCAG 等级Fail
推荐文本预览
文本颜色#000000
背景#B6C0E2
对比度11.63:1
WCAG 等级AAA

技术格式

解锁专业色彩空间,如 XYZ、LAB、CMYK 变体和可导出配置文件。

免费注册

实用格式

获取打印模拟、LED 映射和开发人员就绪的字节顺序。

免费注册

颜色分析

深入研究光谱数据、主导色报告和高级分析。

免费注册

色盲模拟器

预览 #B6C0E2 在常见色觉缺陷下的显示效果。

免费注册

创意方面

探索季节关联、情感暗示和自然界中的出现。

免费注册

设计指导

平衡

将 #B6C0E2 视为高光色。将其与中性色和一种辅助色搭配,以避免视觉超载。

对比度

使用真实内容测试组合。更高的对比度可以提高浏览速度、可读性和转化率。

和谐

使用较浅的色调用于表面,基础色用于主色,较深的阴影用于悬停或按下状态。

需要其他颜色?

返回颜色选择器,上传图片、生成调色板并探索新的颜色关系。

打开颜色选择器