建立動態且可設定的色彩配置的基本概述
在這篇文章中,我想分享管理多種色彩配置的方法。 。立即試用。
如果您喜歡看影片,請參考這篇文章的 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;
}
![彩色調的螢幕擷取畫面](https://web.developers.google.cn/static/articles/building/a-color-scheme/image/screenshot-the-light-col-72f65fca6bd79.png?authuser=2&hl=zh-tw)
深色主題
大多數品牌一開始都不採用深色主題,是自家主要的 通常是較輕、主題相對地,使用者通常會選擇深色主題 例如夜晚的情境這些因素讓我決定兩個 使用深色主題時,請注意下列事項:
- 使用者採用這個主題時通常都會處於黑暗狀態,因此請先在 光線。
- 色彩飽和應會降低為避免在畫面上震動,以免造成 過於強烈
品牌
淺色主題使用 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;
}
![深色全部的螢幕擷取畫面](https://web.developers.google.cn/static/articles/building/a-color-scheme/image/screenshot-the-dark-colo-2883f3f94a6ae.png?authuser=2&hl=zh-tw)
調暗主題
這種色彩配置的重點在於如何自動化調度管理亮度和飽和度。有 必須有足夠的飽和度、顯示色調,但也應該顯示 這個方法幾乎不會傳回對比分數 模型往往會變暗或低對比
品牌
* {
--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;
}
![調暗顏色的螢幕擷取畫面](https://web.developers.google.cn/static/articles/building/a-color-scheme/image/screenshot-the-dim-color-acb7bb759c10b.png?authuser=2&hl=zh-tw)
無障礙顏色
請注意,深色文字顏色最低的亮度為 65% 深色表面的高亮度為 25%相當於 40% 的亮度 在淺色主題中,有 55% 的呼吸室 套用淺色主題維持文字和表面顏色之間的亮度差異 將近 40% 到 50% 有助於維持高色彩對比度,同時提升 萬一發現分數不佳,可以調整一點小技巧。
我稱之為「碰撞到八方通行」,也就是碰觸 直到工具顯示我通過為止。
本挑戰建立的每個主題都通過對比分數。調暗色彩配置的對比度最低,但仍符合最低需求。為協助團隊其他成員使用優良的對比色,建議您建立類別名稱,將表面顏色搭配無障礙文字顏色搭配。
.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);
}
![調暗介面和文字配對的螢幕截圖](https://web.developers.google.cn/static/articles/building/a-color-scheme/image/screenshot-the-dim-surfa-930653f4c9223.png?authuser=2&hl=zh-tw)
陰影
主題會使用名為 .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
的狀態色彩和對比模式:
試用版。