颜色选择器:HEX、RGB、HSL —并且我跳过了对比度检查

我们的品牌橙色是 #E99537。喜欢。it's温暖,它's不像其他人一样的橙色's,而且它不战而坐我们的蓝色旁边。

几个月来我一直用它作为白色的链接颜色。

然后我实际上运行了数字。 #E99537 上 #FFFFFF 给出对比度 2.38:1。 WCAG 2.1 SC 1.4。3 4.5:1要求正常文本。它不't甚至清除3:1条为 大 text。that站点上的每个橙色链接,按照我声称关心的标准,无法读取 - 它对我来说看起来非常好,在我的显示器上,在我的办公室里,用我的眼睛。

That's关于颜色的事情:你对它的感知不是测量。 #E99537 在我们的海军上 #0F172A 分数 7.50:1、舒服的AAA。同样的颜色,完全不同的判决,再多的眯眼看它也不会告诉我,你得计算一下。

的 颜色选择器 on toolz。dev在HEX,RGB,HSL之间转换并向您展示对比度,在浏览器中,没有上传本指南是我希望I'd在我发货之前阅读的那些链接。

TL;博士: 用 十六进制 为静态值, HSL 只要你需要 导出 色(悬停状态、调色板、深色模式),因为亮度是您可以从 和 中减去的数字 RGBA/HSLA alpha的时候。身体文本的对比度是4.5:1,大文本的对比度是3:1 - 检查一下,don't眼球它。 颜色选择器 做转换和比率。然后停下来 梯度发生器。

HEX、RGB、HSL:实际差异是什么'?

它们都描述了相同的 sRGB 颜色。不同的是每个问题都哪些问题易于回答。

十六进制

十六进制中的三个字节。 #4466EE 是红色 44 (六十八),绿色 66 (102),蓝色 EE (二三八)。速记 #RGB 每对加倍时才有效 - #FF0000 崩溃到 #F00、但是 #4466EE 8位数的形式加alpha不能缩短: #4466EE80 大约有 50% 不透明。

It's在CSS中的默认值,因为它's紧凑而明确,它对人类阅读也是完全不透明的,这就是为什么我从来没有看过一个十六进制代码,知道要改变什么才能使其不那么饱和。

RGB

Same 三通道,十进制,0 255。现代 CSS Color 4 语法 掉落逗号: rgb(68 102 238 / 80%)。RGB是你想要的JavaScript,画布和WebGL,因为它's格式下游的所有东西实际上消耗,你可以做算术上它。

HSL - 赢得其地位的人

色调(车轮周围 0°360° )、饱和度(0°100%)、轻盈度(0°100%)。 #4466EE 於 hsl(228, 83%, 60%)。

Here's为什么这很重要一个按钮's悬停状态应该是"相同的颜色,稍微深一些"在HEX that's一个无法回答的问题在HSL it's减法:

.btn {
  background: hsl(228 83% 60%);   /* #4466EE */
}
.btn:hover  { background: hsl(228 83% 52%); }  /* darker  */
.btn:active { background: hsl(228 83% 44%); }  /* darker still */
.btn:disabled { background: hsl(228 22% 70%); } /* desaturated, lifted */

4种状态,一种色调,没有设计工具,这就是HSL为什么在我的工具包里的90%。

捕获 - it's 是一个真正的捕获 - 是 HSL 轻度 不是 感性的。 hsl(60 100% 50%) (黄色)和 hsl(240 100% 50%) (蓝色)都声称50%的轻度, 其中一个会烧伤你的视网膜而另一个是近乎黑色的。那's OKLCH解决的问题。

好的,简而言之

CSS 颜色级别 4 带来 oklch(L C H)L所在的地方 感知 lightness。two颜色与相同的l真诚地看起来同样明亮。it's正确的工具生成调性斜坡,其中每个步骤感觉均匀间隔,它's什么I'd今天用于一个新的设计系统。it's也为什么 linear-gradient(in oklch, blue, yellow) does't 中间变灰色 - 看到 CSS 梯度生成器指南。

CMYK

Print only。CSS没有CMYK,如果一个品牌指南把CMYK值交给你,就必须有人将它们转换为sRGB,并且转换是近似的,因为色域确实不同 - 有一个cyans打印机可以击中你的显示器可以't,反之亦然 两者 品牌指南中定义的价值观,而不是将其中一个转化为另一个并充满希望。

我如何在它们之间转换?

HEX → RGB 只是基本转换。 #4466EE → 分裂成 44、 66、 EE → 68、102、238。

RGB → HSL 涉及找到最大/最小通道,从它们的平均值导出亮度,然后从那里导出饱和度和色调。它's 十五行代码,我从内存中写下这十五行恰好为零次,对于一次性, 颜色选择器 立即执行。对于代码:

const hexToRgb = (hex) => {
  const n = parseInt(hex.replace('#', ''), 16);
  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
};

const rgbToHex = (r, g, b) =>
  '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join('');

真正重要的就是相对亮度和对比度,直接从 WCAG 定义:

const luminance = (hex) => {
  const { r, g, b } = hexToRgb(hex);
  const [R, G, B] = [r, g, b]
    .map(v => v / 255)
    .map(v => (v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4));
  return 0.2126 * R + 0.7152 * G + 0.0722 * B;
};

const contrast = (a, b) => {
  const [x, y] = [luminance(a), luminance(b)].sort((m, n) => n - m);
  return (x + 0.05) / (y + 0.05);
};

contrast('#E99537', '#FFFFFF'); // 2.38  ← the one that got me
contrast('#E99537', '#0F172A'); // 7.50

请注意那些绿色系数:0.2126 红色、0.7152 绿色、0.0722 蓝色。绿色大致带有 百分之七十 的感知亮度。那's为什么在相同的HSL亮度下亮绿色和亮蓝色看起来一点也不相似,它's感知色彩空间存在的全部原因。

我实际上必须达到什么对比度?

一些实数,全部是计算的而不是猜测的:

有两件事从那张桌子上掉下来。

#767676 是白色上通过 AA 的最浅灰色。 不是 #888不是 #999。每"静音的次要文字"我在野外看到的颜色都经过它一两个阴影。值得记住。

相同的品牌颜色可能会通过和失败,具体取决于您放置的位置。 我们的橙色无法用作白色的链接,也无法用作海军蓝的口音。那是'颜色上的一个缺陷;它's对颜色允许居住的地方的限制。一旦我这样构建它,设计决策就会变得更容易,而不是更难。

如何构建一个不't 自己战斗的调色板?

Pick一个色调。轻盈度各不相同。那's整个方法, 而HSL使它机械:

:root {
  /* One hue: 228. Nine steps of lightness. */
  --blue-50:  hsl(228 83% 96%);
  --blue-100: hsl(228 83% 91%);
  --blue-200: hsl(228 83% 84%);
  --blue-300: hsl(228 83% 76%);
  --blue-400: hsl(228 83% 68%);
  --blue-500: hsl(228 83% 60%);  /* #4466EE — the brand colour */
  --blue-600: hsl(228 83% 50%);
  --blue-700: hsl(228 78% 41%);
  --blue-800: hsl(228 72% 33%);
  --blue-900: hsl(228 66% 25%);
}

Notice 饱和度在黑暗端略有下降 保持饱和度恒定,而亮度下降会产生看起来越来越刺耳和霓虹灯的台阶 - 底部的小幅去饱和度使坡道感觉被设计而不是生成。

然后通过命名事物 角色的, 而不是通过外观, 所以品牌重塑是一行更改, 而不是在四十个文件中查找和替换:

:root {
  --color-primary: var(--blue-500);
  --color-primary-hover: var(--blue-600);
  --color-text: #0F172A;
  --color-text-muted: #6B7280;   /* 4.83:1 on white — checked */
  --color-surface: #F8FAFC;
  --color-border: #E5E7EB;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: var(--blue-400);  /* lift it — dark bg needs a lighter primary */
    --color-text: #F8FAFC;
    --color-text-muted: #9CA3AF;
    --color-surface: #1E293B;
    --color-border: #374151;
  }
}

暗模式不是反转

不要翻转调色板。两件事立即破裂:

1. 饱和颜色在深色背景上变得更大声。 鲜艳的蓝色,读作 "专业的 "白色读作 "振动 "近黑色。提升轻度,稍微降低饱和度。
2. 纯黑色背景会导致光晕- 明亮的文字 #000 smears 散光的人使用非常深的灰蓝色(#0F172A、 #111827)代替。它还给你一个地方去高架表面,纯黑色没有't。

老实说,和谐计划

我不断回到的规则: 一个主音,一个口音,一个灰色坡道。 除此之外的一切都必须证明它的存在是合理的。

还有什么会让人们兴奋不已?

仅靠颜色是不够的

12个男性和200个女性中,大约有1个有某种形式的色觉缺陷,如果红色-手段-错误和绿色-手段-成功是你的 仅限 signal,你的一片有意义的用户看到两个相同的灰色徽章。添加一个图标,添加一个单词。 WCAG SC 1.4。1 对此很明确,这会让你付出代价 <span>。

1秒测试:截图你的UI,去饱和,看看它是否还有效 如果不't,color在做它应该的承重工作't在做一个人。

焦点环也需要对比

焦点指标是 UI 组成部分,属于 3:1 规则 相邻 colors - 这意味着焦点环必须与其周围的元素和背后的页面形成对比蓝色按钮上的微妙蓝色轮廓是一种常见且完全不可见的故障。

先用灰色设计

Greyscale中构建整个布局,它迫使层次结构来自于大小、重量和间距- 这就是层次结构所在 应该 from。last添加颜色,作为强调。这样构建的接口几乎是偶然访问的,它们在黑暗模式下生存下来,无需重写。

使用颜色选择器

1. 打开 颜色选择器。
2. 拖动频谱,或将已知值粘贴到 HEX、RGB 或 HSL 字段中 - 其他字段会逐步更新。
3. 注意 HSL。那'是你的工作格式。
4. 通过保持 H 和 S 并踩 L 生成坡道。
5. 4.5:1行检查每个文本/背景对 之前 它会进入样式表,而不是在客户向您发送有关该样式的电子邮件之后。

Everything都运行在你的选项卡中。没有上传任何内容- 你可以在大约十秒钟内在DevTools网络面板中确认这一点。

常见问题

HEX和RGB的区别是什么's?

Nothing,语义上- 它们编码相同的三个sRGB通道,HEX以16为基数写入它们(#4466EE),小数 RGB (rgb(68 102 238))。HEX 更紧凑,是 CSS 约定;RGB 在 JavaScript 中更容易计算。按上下文选择,而不是按原则选择。

CSS中应该使用哪种颜色格式?

HEX对于静态值你're只是转录。HSL任何时候你需要 导出 a color - 悬停状态,禁用状态,色调斜坡,暗模式变体 - 因为亮度是一个数字,你可以调整。HSLA或RGBA当你需要阿尔法。OKLCH如果你're构建一个新的设计系统,并且想要感知上的均匀步骤。

我如何知道我的颜色是否可以访问?

算对比度,WCAG 2.1 AA正常文本需要4.5:1,大文本(18pt,或14pt粗体)和UI组件需要3:1,不要用眼光判断- #E99537 白色看起来不错,得分为 2.38:1。还检查是否没有信息仅通过颜色传达。

我可以用什么最浅的灰色来写白色文字?

#7676764.54:1降落 - 勉强超过4.5:1的AA线。 #999999 is 只有2.85:1而失败, 如果你想要AAA, #595959 击中正好 7.00:1。

HSL 亮度为什么与感知亮度不匹配?

HSL因为是RGB的简单数学变换,而不是人类视觉的模型,眼睛对绿色的敏感程度远高于对蓝色的敏感程度- WCAG亮度公式在0.7152时对绿色进行加权,在0.0722时对蓝色进行加权- 所以 hsl(60 100% 50%) (黄色)和 hsl(240 100% 50%) (蓝色)看起来一点也不像,尽管两者都声称50%的轻度。OKLCH是专门为了解决这个问题而存在的。

如何构建深色模式调色板?

Don't反转浅色。构建第二个调色板:深灰蓝色背景而不是纯黑色(纯黑色会导致散光读者的减半),更轻和稍微不饱和的版本的口音,以及文本那个's灰白色而不是 #FFFFFF。将它们与 CSS 自定义属性交换 prefers-color-scheme: dark。

What's 唿叫动作按钮的最佳颜色?

You't one。"橙色转换best"的证据很薄,大多是民间传说,重要的是CTA与周围的一切形成对比,相同的颜色意味着网站上的任何地方都是一样的东西,如果你的页面大多是蓝色的,一个橙色的CTA有效- 因为对比,而不是橙色。

我可以在网络上使用 CMYK 颜色吗?

No - CSS没有CMYK符号,并且gamuts don't映射干净,所以任何转换都是近似值,如果需要跨打印和屏幕的品牌一致性,从一开始就在品牌指南中定义这两个值,而不是将一个转换为另一个。

如何将十六进制颜色转换为 RGB？

将六位十六进制分成三对,并将每对读作 0 到 255 的 16 进制数。 #4466EE 变成 rgb(68, 102, 238):44是68,66是102,EE是238,一个三位数的速记如 #46E 通过将每个数字加倍来首先扩展。颜色选择器可以立即进行此转换,双向。

什么是十六进制颜色代码?

六角形颜色代码是 sRGB 颜色的 6 位 16 进制表示,前导后红色、绿色和蓝色通道各使用两位数字 #。 #FFFFFF 是白色和 #000000 是黑色的。一个可选的第七和第八位数字添加一个alpha(不透明度)通道,如 #4466EE80。

包裹起来

Color work 有两半,我们大多数人只做第一半选择调色板是有趣的,主观的一半验证它 - 亮度,对比度,色盲易读性,暗模式行为 - 是那一半's只是算术,它's决定人们是否真的可以阅读你构建的内容的一半。

算术并不难,它's只是你必须做的事情 做几个月来,我一直在自己的网站上选择自己选择的颜色。

的 颜色选择器 HEX、RGB、HSL之间进行转换,并给你对比度,免费且完全在浏览器中。将其与。 梯度发生器 对于将对比度首尾相连的混合物,请参阅架子上的其余部分 开发人员生产力工具指南。