選色器:HEX、RGB、HSL、RE 以及我跳過對比檢查

我們的品牌橙色是 #E99537.我喜歡它。它'很溫暖,它'與其他人不同的橙色'它坐在我們的藍色旁邊,無需戰鬥。

我用它作為白色的連結顏色幾個月了。

然後我實際上運行了數字。 #E99537 上 #FFFFFF 給出對比度 2.38:1. WCAG 2.1 SC 1.4。3 普通文字需要 4.5:1。它沒有'甚至沒有清除 3:1 的條 大的 文字。按照我聲稱關心的標準,該網站上的每個橙色連結都是不可讀的--而且在我看來,在我的顯示器上、在我的辦公室裡、用我的眼睛,它看起來都非常好。

That'關於顏色的事情是:你對顏色的感知不是測量。 #E99537 關於我們的海軍 #0F172A 分數 7.50:1,舒適地AAA。相同的顏色,完全不同的判決,再多瞇著眼睛也不會告訴我。你必須計算它。

的 選色器 在 toolz。dev 上,可在 HEX、RGB 和 HSL 之間進行轉換,並在瀏覽器中向您顯示對比度,無需上傳。本指南是我希望 I'在我發布這些連結之前閱讀的內容。

TL;DR: 使用 十六進位 對於靜態值, HSL 每當您需要時 推導 顏色(懸停狀態、調色板、深色模式),因為亮度是您可以減去的數字,並且 RGBA/HSLA 當你需要阿爾法時。正文的對比度為 4.5:1,大文字的對比度為 3:1 - 檢查它,don't eyeball it。 選色器 是否有轉換和比率。然後停下來 梯度產生器.

HEX、RGB、HSL:什麼'是實際差異嗎?

它們都描述相同的 sRGB 顏色。不同之處在於每個問題都容易回答哪些問題。

十六進位

十六進制的三個位元組。 #4466EE 是紅色的 44 (68),綠色 66 (102),藍色 EE (238).速記 #RGB 僅當每對加倍時才有效 - #FF0000 崩潰到 #F00,但是 #4466EE 無法縮短。 8 位數字形式新增了 alpha: #4466EE80 大約有 50% 不透明。

It'是 CSS 中的預設值,因為它'緊湊且明確。它對人類閱讀來說也是完全不透明的,這就是為什麼我從未研究過十六進位代碼並知道如何更改以使其不那麼飽和。

RGB

相同的三個通道,十進制,0 VEAS255。現代 CSS Color 4 語法去掉了逗號: rgb(68 102 238 / 80%). RGB 是您想要的 JavaScript、canvas 和 WebGL,因為它'是下游所有內容實際消耗的格式,您可以在其上進行算術運算。

HSL - 贏得一席之地的那家

色調(輪子周圍 0°360° )、飽和度(0°100%)、亮度(0°100%)。 #4466EE 是 hsl(228, 83%, 60%).

這裡'這是為什麼重要的。按鈕'懸停狀態應該是"顏色相同,顏色稍深。"在 HEX 中,' 是一個無法回答的問題。在 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 */

四種狀態,一種色調,無設計工具。這就是 HSL 出現在我的工具包中的 90% 的原因。

問題是 HSL 的亮度是真實的 不是 感性的。 hsl(60 100% 50%) (黃色)和 hsl(240 100% 50%) (藍色)兩者都聲稱有 50% 的亮度,其中一個會燒傷您的視網膜,而另一個幾乎是黑色的。 That' OKLCH 解決的問題。

好的,簡單地說

CSS 顏色等級 4 帶來 oklch(L C H),L在哪裡 感知的 亮度。兩種顏色具有相同的 L 看起來確實同樣明亮。它'是產生色調坡道的正確工具,其中每一步都感覺均勻分佈,並且它'這是 I'd 今天用於新設計系統的用途。 It'也是原因 linear-gradient(in oklch, blue, yellow) 否'中間會變成灰色 - 請參閱 CSS 梯度產生器指南.

CMYK

僅列印。 CSS 沒有 CMYK。如果品牌指南掌握了您的 CMYK 值,則必須有人將它們轉換為 sRGB,並且轉換是近似值,因為色域確實不同 - 印表機可以點擊的青色是您的顯示器可以點擊的青色't,反之亦然。得到 兩者 品牌指南中定義的價值觀,而不是將一種價值觀轉化為另一種價值觀並希望。

我如何在它們之間轉換?

HEX → RGB 只是鹼基轉換。 #4466EE → 分成 44, 66, EE → 68、102、238。

RGB → HSL 涉及尋找最大/最小通道,從平均值中導出亮度,然後從那裡導出飽和度和色調。它'有十五行程式碼,我從記憶體中精確地將這十五行寫為零次。對於一次性, 選色器 立即執行。對於代碼:

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 藍色。綠色攜帶大致 百分之七十 感知的亮度。那'這就是為什麼在相同的 HSL 亮度下亮綠色和亮藍色看起來一點也不相似,而它'這是感知色彩空間存在的全部原因。

我實際上必須達到什麼對比?

一些實數,全部計算而不是猜測:

有兩件事從那張桌子上掉了出來。

#767676 是最淺的灰色,在白色上經過 AA。 不是 #888,不 #999. 每一引;靜音輔助文字;我在野外看到的顏色是一兩個陰影。值得記住。

相同的品牌顏色可能會過去或失敗,這取決於您放置的位置。 我們的橙色無法用作白色的鏈接,但非常適合作為海軍藍的強調。那是't 顏色缺陷;它'這是對顏色允許使用的位置的限制。一旦我這樣建構它,設計決策就會變得更容易,而不是更難。

如何建立一個可以對抗自己的調色板?#39;t Fight Itself?

選擇一種色調。不同的亮度。 That'是整個方法,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%);
}

注意黑暗端的飽和度略有下降。在亮度下降時保持飽和度恆定會產生看起來越來越刺眼和霓虹燈的台階 - 底部的小幅去飽和度使坡道感覺是設計的而不是生成的。

然後命名事物 角色(不是透過外觀),因此品牌重塑是一行更改,而不是跨四十個檔案尋找和替換:

: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 散光患者的塗片檢查。使用非常深的灰藍色 (#0F172A, #111827)反而。它還為您提供了尋找高架表面的地方,而純黑色則不然't。

老實說,和諧計劃

我不斷回到規則: 一首主要,一首口音,灰色坡道。 除此之外的一切都必須證明其存在的合理性。

還有什麼能讓人們興奮不已?

僅靠顏色是不夠的

大約十二分之一的男性和二十分之一的女性有某種形式的色覺缺陷。如果紅色意味著錯誤和綠色意味著成功是你的 僅僅 訊號,用戶中有意義的一部分會看到兩個相同的灰色徽章。新增圖標,新增單字。 WCAG SC 1.4。1 對此是明確的,並且會花費你一個 <span>.

一秒鐘測試:截圖您的 UI,使其去飽和,看看它是否仍然有效。如果它不做't,顏色正在做承重工作,它應該't 獨自做。

對焦環也需要對比度

焦點指標是 UI 組成部分,屬於 3:1 規則反對的範圍 相鄰的 顏色 - 這意味著焦點環必須與其周圍的元素及其後面的頁面形成對比。藍色按鈕上微妙的藍色輪廓是一種常見且完全看不見的故障。

首先用灰色設計

以灰階建構整個佈局。它迫使層次結構來自大小、重量和間距--這就是層次結構 應該 來自。最後添加顏色作為強調。以這種方式建立的介面幾乎是偶然訪問的,並且它們可以在黑暗模式下生存而無需重寫。

使用顏色選擇器

1. 打開 選色器.
2. 拖曳頻譜,或將已知值貼上到 HEX、RGB 或 HSL 欄位中 - 其他欄位會逐步更新。
3. 注意 HSL。那'是你的工作格式。
4. 透過握住 H 和 S 並踩踏 L 來產生坡道。
5. 根據 4.5:1 行檢查每個文字/背景對 之前 它會進入樣式表,而不是在客戶向您發送有關它的電子郵件之後。

一切都在您的選項卡中運行。沒有上傳任何內容 - 您可以在大約十秒鐘內在 DevTools Network 面板中確認這一點。

常見問題

什麼' HEX 和 RGB 之間的差異?

從語義上講,什麼都沒有--它們對相同的三個 sRGB 通道進行編碼。 HEX 以 16 為基數編寫它們 (#4466EE),小數點後的 RGB (()rgb(68 102 238)). HEX 更緊湊,是 CSS 約定; RGB 在 JavaScript 中更容易計算。根據上下文而不是原則進行選擇。

CSS 中應該使用哪種顏色格式?

靜態值的十六進位 you'只是轉錄。 HSL 隨時您需要 推導 顏色 - 懸停狀態、停用狀態、色調斜坡、暗模式變體 - 因為亮度是您可以調整的數字。當您需要 alpha 時,HSLA 或 RGBA。 OKLCH 如果您'正在建立一個新的設計系統,並且想要感知上均勻的步驟。

我如何知道我的顏色是否容易理解?

計算對比。 WCAG 2.1 AA 對於普通文字需要 4.5:1,對於大文字(18pt 或 14pt 粗體)和 UI 元件需要 3:1。不要用眼睛來判斷 - #E99537 白色看起來不錯,得分為 2.38:1。也要檢查是否沒有僅透過顏色傳達訊息。

我可以用什麼最淺的灰色來表示白色文字?

#767676,著陸速度為 4.54:1 - 勉強超過 4.5:1 AA 線。 #999999 只需 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.

什麼'是號召性用語按鈕的最佳顏色?

有't one。 &quot 的證據;橙色轉換最好&引用;很薄,而且主要是民間傳說。重要的是 CTA 與周圍的一切形成鮮明對比,並且網站上任何地方相同的顏色都意味著相同的東西。如果您的頁面大部分是藍色的,則橙色 CTA 可以工作 - 由於對比度,而不是橙色。

我可以在網路上使用 CMYK 顏色嗎?

否 - CSS 沒有 CMYK 表示法,且色域 don't 映射乾淨,因此任何轉換都是近似值。如果您需要列印和螢幕上的品牌一致性,請從一開始就定義品牌指南中的兩個值,而不是將一個值轉換為另一個值。

如何將十六進位顏色轉換為 RGB？

將六位數的十六進位分成三對,並將每對讀作 0 到 255 之間的以 16 為底的數字。 #4466EE 成為 rgb(68, 102, 238):44 是 68,66 是 102,EE 是 238。三位簡寫,例如 #46E 首先將每個數字加倍來擴展。顏色選擇器會立即在兩個方向上進行此轉換。

什麼是十六進位顏色代碼?

六角形顏色代碼是 sRGB 顏色的六位數字、以 16 為基數的表示形式,在前導數後分別使用兩位數字表示紅色、綠色和藍色通道 #. #FFFFFF 是白色的和 #000000 是黑色的。可選的第七和第八位數字添加 alpha(不透明度)通道,如下所示 #4466EE80.

包裹起來

色彩工作有兩半,我們大多數人只做第一半。選擇調色板是有趣的、主觀的一半。驗證它 - 亮度、對比度、色盲易讀性、暗模式行為 - 是一半'只是算術,它'決定人們是否真的可以閱讀你所建構的內容的一半。

算術並不難。它'這只是你必須做的事情 做幾個月來,我在自己的網站上沒有使用我自己選擇的顏色。

的 選色器 在 HEX、RGB 和 HSL 之間進行轉換,並在瀏覽器中免費且完全為您提供對比度。與配對 梯度產生器 對於首尾相連的混合酒,請查看貨架的其餘部分 開發人員生產力工具指南.