颜色代码生成器和拾取器

生成颜色代码、变体、谐调,并检查对比度。

颜色转换

HEX

#9c5758

Au Chico

HEX
#9c5758
HSL
359, 28, 48
RGB
156, 87, 88
XYZ
19, 15, 11
CMYK
0, 44, 44, 39
LUV
45,57,11,
LAB
45, 29, 12
HWB
359, 34, 39

变化

本部分的目的是以 10%的增量准确地生成所选颜色的色调(添加纯白)和色相(添加纯黑)。

专业提示 在悬停状态和阴影中使用色调,在高光和背景中使用色调。

色调

在基色中加入黑色,形成更深的变化。

色调

在基色中加入白色,形成浅色变化。

常见用例

  • UI 组件状态(悬停、激活、禁用)
  • 利用阴影和高光营造深度
  • 建立一致的色彩系统

设计系统提示

这些变化构成了连贯调色板的基础。导出它们,以保持整个项目的一致性。

颜色组合

每种和谐色都有自己的基调。利用和声,集思广益,找出搭配得当的色彩组合。

如何使用

点击任何颜色,复制其十六进制值。这些组合经过数学验证,能创造出和谐的视觉效果。

为何重要

和谐的色彩能创造平衡,并在设计中唤起特定的情感。

补充

一种颜色和它在色轮上的对立面,色相+180 度。高对比度。

#9c5758
最适合: 高影响力设计、CTA、徽标

分割互补

一种颜色和与其补色相邻的两种颜色,与主色相反的色相+/-30 度。与直补色一样大胆,但用途更广。

最适合: 生动而均衡的布局

三位一体

三种颜色沿着色轮均匀分布,每种颜色的色相相差 120 度。最好以一种颜色为主,其他颜色为辅。

最适合: 俏皮、充满活力的设计

类比

三种亮度和饱和度相同的颜色,色调在色轮上相邻,相差 30 度。平滑过渡。

最适合: 灵感源自大自然的平静界面

单色

三种色调相同的颜色,亮度值为 +/-50%。细腻而精致。

最适合: 简约、精致的设计

四分体

两组互补色,色相相差 60 度。

最适合: 丰富多样的配色方案

色彩理论原理

平衡

使用一种主色调,辅以辅助色,少用点缀色。

对比

确保足够的对比度,以保证可读性和易读性。

和谐

色彩应相互配合,营造统一的视觉体验。

色彩对比度检查器

测试颜色组合,确保它们符合 WCAG 文字可读性无障碍标准。

文字颜色
背景颜色
对比
Fail
小文本
✖︎
大文本
✖︎
WCAG 标准
AA:普通文本的最低对比度为 4.5:1,大文本为 3:1。大多数网站都需要。
AAA:增强型对比度,正常文本为 7:1,大文本为 4.5:1。建议使用,以获得最佳的可读性。

每个人都是天才。但是,如果你用爬树的能力来评价一条鱼,那么它一辈子都会认为自己是愚蠢的。

- Albert Einstein

技术格式

实用格式

色彩分析

失明模拟器

创意方面