#B3B3B3 颜色代码洞察

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

RGB:rgb(179, 179, 179)
HSL:hsl(0, 0%, 70%)
HEX
#B3B3B3
RGB
179, 179, 179
HSL
0°, 0%, 70%
HSV
0°, 0%, 70%
CMYK
0%, 0%, 0%, 30%

颜色转换

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

#B3B3B3

≈ 钢蓝色

参考色卡

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

色调与阴影

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

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

阴影

0–100%
0%#B3B3B3
10%#A1A1A1
20%#8F8F8F
30%#7D7D7D
40%#6B6B6B
50%#595959
60%#474747
70%#363636
80%#242424
90%#121212
100%#000000

色调

0–100%
0%#B3B3B3
10%#BABABA
20%#C2C2C2
30%#C9C9C9
40%#D1D1D1
50%#D9D9D9
60%#E0E0E0
70%#E8E8E8
80%#F0F0F0
90%#F7F7F7
100%#FFFFFF

常见用例

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

设计系统

设计系统提示

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

导出调色板

和谐配色

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

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

如何使用

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

重要性

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

互补色

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

最适合

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

邻近色

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

最适合

自然灵感、平静的仪表板

三元色

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

最适合

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

四元色

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

最适合

插图和营销实验

单色系

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

最适合

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

无障碍性对比度

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

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

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

技术格式

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

免费注册

实用格式

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

免费注册

颜色分析

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

免费注册

色盲模拟器

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

免费注册

创意方面

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

免费注册

设计指导

平衡

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

对比度

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

和谐

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

需要其他颜色?

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

打开颜色选择器