本頁面由 Cloud Translation API 翻譯而成。

建立色彩配置

建立動態且可設定的色彩配置的基本概述

Adam Argyle

在這篇文章中，我想分享管理多種色彩配置的方法。。立即試用。

示範

如果您喜歡看影片，請參考這篇文章的 YouTube 版本：

總覽

我們會利用自訂屬性和 calc() 建構無障礙顏色系統，根據使用者偏好設定調整網頁，同時保有編寫程式碼也能享有極簡的使用體驗我們先從基本品牌顏色著手，建構出子類：2 個文字顏色、4 種表面顏色和相符的陰影。

本指南一開始會先定義每個色彩配置的所有色彩正面。直到最後，他們才改變網頁。

品牌

品牌顏色通常已確立品牌名稱十六進位或 rgb。這項 GUI 挑戰基本品牌顏色為 #0af。首先，針對此色彩系統，十六進位值需要轉換成 hsl。

* {
  --brand: #0af;
  --brand: hsl(200 100% 50%);
}

為了實現調暗或調亮品牌顏色的概念 20% 時，必須將 3 個聲道的色彩值擷取至所屬自訂領域如下所示：

* {
  --brand-hue: 200;
  --brand-saturation: 100%;
  --brand-lightness: 50%;
}

CSS 可針對這些顏色屬性執行數學運算，例如使用 calc(var(--brand-lightness) - 20%) 將亮度值降低 20%。這些內容是打造而且 CSS 可藉由調整高度飽和度和亮度。

淺色主題

每個顏色子類都會標示為相符的配置，在本例中附加了 -light。

淺色主題最終結果預覽

品牌

從品牌顏色開始，經過包裝 --brand-hue、--brand-saturation 和 hsl () 函式括號內的 --brand-lightness 自訂屬性，：

* {
  --brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
}

文字顏色

接下來，色彩配置的基本要到文字顏色。在淺色主題中，文字都應該是非常暗的請注意下列顏色的亮度偏低 50% 以下

* {
  --text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
  --text2-light: hsl(var(--brand-hue) 30% 30%);
}

--text1-light，因為在亮度 10% 時非常昏暗，因此較大 100% ，這樣品牌顏色仍能過濾出深色海軍。

--text2-light，顏色不如第 1 種顏色，但可以說是就會變得較不飽和。

表面顏色

表面顏色是指背景、邊框和其他裝飾表面，旁邊或裡面的文字在淺色主題中，這些是淺色主題，而不是顏色較深的文字顏色如何使用 Hsl 建立淺色色相我們會用在第三個亮度值中使用較高的百分比值我們也將降低飽和度，所以淺灰色不會過度色調。

* {
  --surface1-light: hsl(var(--brand-hue) 25% 90%);
  --surface2-light: hsl(var(--brand-hue) 20% 99%);
  --surface3-light: hsl(var(--brand-hue) 20% 92%);
  --surface4-light: hsl(var(--brand-hue) 20% 85%);
}

4 種表面顏色，因為裝飾性顏色往往需要較多的變化版本，用於互動時刻 (例如 :focus 或 :hover)，或是建立外觀在這些情境下懸停在 --surface3-light 上的 --surface2-light，因此懸停結果會產生增加的對比度 (亮度 99% 至 92%，變暗)。

陰影

色彩配置的陰影不如預期，而是增添臨場感，幫助相片從不寫實的黑色陰影中脫穎而出待辦陰影顏色會使用色調自訂屬性飽和了，但依然非常暗。基本上就是還有點藍色的陰影

* {
  --surface-shadow-light: var(--brand-hue) 10% 20%;
  --shadow-strength-light: .02;
}

--surface-shadow-light 未納入 hsl 函式中。這是因為系統會合併 --shadow-strength 值以產生部分不透明度，並滿足 CSS 需求以便執行計算跳至雷射陰影一節。

彩色調

再也不必到處苦苦搜尋，就能找到燈光顏色的產生方式並集中在 CSS 中

* {
  --brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
  --text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
  --text2-light: hsl(var(--brand-hue) 30% 30%);
  --surface1-light: hsl(var(--brand-hue) 25% 90%);
  --surface2-light: hsl(var(--brand-hue) 20% 99%);
  --surface3-light: hsl(var(--brand-hue) 20% 92%);
  --surface4-light: hsl(var(--brand-hue) 20% 85%);
  --surface-shadow-light: var(--brand-hue) 10% calc(var(--brand-lightness) / 5);
  --shadow-strength-light: .02;
}

敬上

深色主題

大多數品牌一開始都不採用深色主題，是自家主要的通常是較輕、主題相對地，使用者通常會選擇深色主題例如夜晚的情境這些因素讓我決定兩個使用深色主題時，請注意下列事項：

使用者採用這個主題時通常都會處於黑暗狀態，因此請先在光線。
色彩飽和應會降低為避免在畫面上震動，以免造成過於強烈

深色主題最終結果預覽

品牌

淺色主題使用 3 個品牌 hsl 色彩管道值，但未更動。深色主題則無飽和度會減半，亮度也下降相對 50%

* {
  --brand-dark: hsl(
    var(--brand-hue)
    calc(var(--brand-saturation) / 2)
    calc(var(--brand-lightness) / 1.5)
  );
}

文字顏色

在深色主題中，文字顏色應設為淺色。下列顏色的顏色很高，請把該值放在靠近白色的地方。

* {
  --text1-dark: hsl(var(--brand-hue) 15% 85%);
  --text2-dark: hsl(var(--brand-hue) 5% 65%);
}

表面顏色

在深色主題中，表面顏色應為深色。下列顏色有第一個表面的亮度和飽和度較低，第一個表面為暗度 10%。

* {
  --surface1-dark: hsl(var(--brand-hue) 10% 10%);
  --surface2-dark: hsl(var(--brand-hue) 10% 15%);
  --surface3-dark: hsl(var(--brand-hue) 5%  20%);
  --surface4-dark: hsl(var(--brand-hue) 5% 25%);
}

陰影

在深色主題中，陰影非常難以察覺。這很合理，因為這會太難調暗已經非常黑暗的東西。此時 --shadow-strength-dark 這個功能超方便，讓我們能將以消除陰影。

* {
  --surface-shadow-dark: var(--brand-hue) 50% 3%;
  --shadow-strength-dark: .8;
}

此外，也要看看該陰影的飽和度。你聽得到什麼顏色嗎希望你能在查看介面時看見一些重要變更？請嘗試移除您偏好哪種工具？！

深色模式

* {
  --brand-dark: hsl(var(--brand-hue) calc(var(--brand-saturation) / 2) calc(var(--brand-lightness) / 1.5));
  --text1-dark: hsl(var(--brand-hue) 15% 85%);
  --text2-dark: hsl(var(--brand-hue) 5% 65%);
  --surface1-dark: hsl(var(--brand-hue) 10% 10%);
  --surface2-dark: hsl(var(--brand-hue) 10% 15%);
  --surface3-dark: hsl(var(--brand-hue) 5%  20%);
  --surface4-dark: hsl(var(--brand-hue) 5% 25%);
  --surface-shadow-dark: var(--brand-hue) 50% 3%;
  --shadow-strength-dark: .8;
}

敬上

調暗主題

這種色彩配置的重點在於如何自動化調度管理亮度和飽和度。有必須有足夠的飽和度、顯示色調，但也應該顯示這個方法幾乎不會傳回對比分數模型往往會變暗或低對比

調暗主題的最終結果預覽

品牌

* {
  --brand-dim: hsl(
    var(--brand-hue)
    calc(var(--brand-saturation) / 1.25)
    calc(var(--brand-lightness) / 1.25)
  );
}

文字顏色

* {
  --text1-dim: hsl(var(--brand-hue) 15% 75%);
  --text2-dim: hsl(var(--brand-hue) 10% 61%);
}

表面顏色

* {
  --surface1-dim: hsl(var(--brand-hue) 10% 20%);
  --surface2-dim: hsl(var(--brand-hue) 10% 25%);
  --surface3-dim: hsl(var(--brand-hue) 5%  30%);
  --surface4-dim: hsl(var(--brand-hue) 5% 35%);
}

陰影

* {
  --surface-shadow-dim: var(--brand-hue) 30% 13%;
  --shadow-strength-dim: .2;
}

調暗顏色

* {
  --brand-dim: hsl(var(--brand-hue) calc(var(--brand-saturation) / 1.25) calc(var(--brand-lightness) / 1.25));
  --text1-dim: hsl(var(--brand-hue) 15% 75%);
  --text2-dim: hsl(var(--brand-hue) 10% 61%);
  --surface1-dim: hsl(var(--brand-hue) 10% 20%);
  --surface2-dim: hsl(var(--brand-hue) 10% 25%);
  --surface3-dim: hsl(var(--brand-hue) 5%  30%);
  --surface4-dim: hsl(var(--brand-hue) 5% 35%);
  --surface-shadow-dim: var(--brand-hue) 30% 13%;
  --shadow-strength-dim: .2;
}

敬上

無障礙顏色

請注意，深色文字顏色最低的亮度為 65% 深色表面的高亮度為 25%相當於 40% 的亮度在淺色主題中，有 55% 的呼吸室套用淺色主題維持文字和表面顏色之間的亮度差異將近 40% 到 50% 有助於維持高色彩對比度，同時提升萬一發現分數不佳，可以調整一點小技巧。

我稱之為「碰撞到八方通行」，也就是碰觸直到工具顯示我通過為止。

按下 Shift + 向下鍵可降低亮度並增加對比度，直到郵件略過為止

本挑戰建立的每個主題都通過對比分數。調暗色彩配置的對比度最低，但仍符合最低需求。為協助團隊其他成員使用優良的對比色，建議您建立類別名稱，將表面顏色搭配無障礙文字顏色搭配。

.surface1 {
  background-color: var(--surface1);
  color: var(--text2);
}

.surface2 {
  background-color: var(--surface2);
  color: var(--text2);
}

.surface3 {
  background-color: var(--surface3);
  color: var(--text1);
}

.surface4 {
  background-color: var(--surface4);
  color: var(--text1);
}

敬上

調暗介面和文字配對的螢幕截圖 — 昏暗的表面以及與 VisBug 配對的文字配對的螢幕截圖

陰影

主題會使用名為 .rad-shadow 的公用程式類別。已產生這個陰影這項 Smooth Shadow 工具。我擷取系統產生的程式碼片段，並加上自己自訂的顏色，計算透明度原因在於生成陰影每個色彩配置內都沒有問題

並排的各陰影

為達成這個目標，我為每個需要調整的色彩配置建立 2 個變數，陰影顏色和陰影強度。顏色適用於飽和度和黑暗度而強度可以輕鬆放大陰影顏色配置的強度。最終結果如下所示。

:root {
  --surface-shadow-light: var(--brand-hue) 10% 20%;
  --shadow-strength-light: .02;
}

.rad-shadow {
  box-shadow:
    0 2.8px 2.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
    0 6.7px 5.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01)),
    0 12.5px 10px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
    0 22.3px 17.9px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
    0 41.8px 33.4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
    0 100px 80px hsl(var(--surface-shadow) / var(--shadow-strength))
  ;
}

如果我進一步運用色彩配置的陰影，我想讓陰影會調整設計符記常數，因為光度方向應該相同降幅。

使用色彩配置

預先定義色彩後，該將顏色轉換成各配置通用屬性。簡單來說，CSS 表示此色彩配置專案中的作者，極少需要存取特定色彩配置的值。我希望讓使用者能輕鬆遵守主題。

為達到這個目的，您應該只在我們將在稍後加以定義的一般自訂屬性如此一來使用設計變數的人，您完全不必擔心其色彩配置只需要使用表面和文字顏色即可。而不是 color: var(--text1-light)使用 color: var(--text1)。所有調整和樞紐分析在 CSS 中，顏色的比例較高

在下列程式碼區塊中深入探討淺色主題的連接樣式即採用淺色主題專屬顏色的一般自訂屬性。全部套用使用 var(--brand) 會使用淺色品牌顏色。

淺色主題 (自動)

:root {
  color-scheme: light;
  --brand: var(--brand-light);
  --text1: var(--text1-light);
  --text2: var(--text2-light);
  --surface1: var(--surface1-light);
  --surface2: var(--surface2-light);
  --surface3: var(--surface3-light);
  --surface4: var(--surface4-light);
  --surface-shadow: var(--surface-shadow-light);
  --shadow-strength: var(--shadow-strength-light);
}

網站目前使用淺色主題。這真的是非常有趣的成功時刻！繼續運用其他 Google 預先定義的顏色色彩配置情境。

深色主題 (自動)

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --brand: var(--brand-dark);
    --text1: var(--text1-dark);
    --text2: var(--text2-dark);
    --surface1: var(--surface1-dark);
    --surface2: var(--surface2-dark);
    --surface3: var(--surface3-dark);
    --surface4: var(--surface4-dark);
    --surface-shadow: var(--surface-shadow-dark);
    --shadow-strength: var(--shadow-strength-dark);
  }
}

淺色主題

[color-scheme="light"] {
  color-scheme: light;

  --brand: var(--brand-light);
  --text1: var(--text1-light);
  --text2: var(--text2-light);
  --surface1: var(--surface1-light);
  --surface2: var(--surface2-light);
  --surface3: var(--surface3-light);
  --surface4: var(--surface4-light);
  --surface-shadow: var(--surface-shadow-light);
  --shadow-strength: var(--shadow-strength-light);
}

深色主題

[color-scheme="dark"] {
  color-scheme: dark;

  --brand: var(--brand-dark);
  --text1: var(--text1-dark);
  --text2: var(--text2-dark);
  --surface1: var(--surface1-dark);
  --surface2: var(--surface2-dark);
  --surface3: var(--surface3-dark);
  --surface4: var(--surface4-dark);
  --surface-shadow: var(--surface-shadow-dark);
  --shadow-strength: var(--shadow-strength-dark);
}

調暗主題

[color-scheme="dim"] {
  color-scheme: dark;

  --brand: var(--brand-dim);
  --text1: var(--text1-dim);
  --text2: var(--text2-dim);
  --surface1: var(--surface1-dim);
  --surface2: var(--surface2-dim);
  --surface3: var(--surface3-dim);
  --surface4: var(--surface4-dim);
  --surface-shadow: var(--surface-shadow-dim);
  --shadow-strength: var(--shadow-strength-dim);
}

目前，作者可免費使用所提供的色彩配置泛型：因此您完全不需要擔心主題的問題。

結論

現在你知道該怎麼做了，你會怎麼做？！🙂

讓我們來體驗多元的方法，瞭解透過網路建立內容的所有方式。建立 Codepen 或主持自己的示範，並透過 Twitter 推文給我，我會將它新增到下方的社群重混作品部分。

來源

社群重混作品 - @chris-kruining 新增了色調滑桿、 no-preference、more 和 less 的狀態色彩和對比模式：試用版。