顏色指南
關於螢幕色彩的簡短實用指南：顏色格式、對比度、配色、深色模式和 CSS。每個數字都經過計算，每個範例都能直接複製。
- OKLCH 完整解說：終於和人眼感受一致的顏色格式OKLCH 用三個數值描述顏色：看起來多亮、多鮮豔、屬於哪個色相。和 HSL 不同，同一個亮度值在任何色相下看起來都一樣亮，因此配色、hover 狀態和無障礙對比都變得可以預測。2026年9月28日閱讀時間約 1 分鐘
- APCA 與 WCAG 2：該相信哪一種對比檢查WCAG 2 對比度是法規要求的標準。APCA 是較新的模型，更能預測文字是否易讀，特別是在深色主題和高飽和色上。兩者都檢查，文字就能既合規又真正好讀。2026年9月28日閱讀時間約 1 分鐘
- 色域完整解說：sRGB、Display P3 與超出色域的顏色色域是螢幕或色彩空間能呈現的顏色範圍。網頁一開始建立在 sRGB 上，但現在多數手機和不少筆電都能顯示 Display P3，紅、綠、橘色明顯更鮮豔。2026年9月28日閱讀時間約 1 分鐘
- 顏色格式完整解說：HEX、RGB、HSL、OKLCH 等格式同一個顏色有十幾種寫法。這裡說明每種格式的意思、什麼時候該用，以及同一個顏色在各種格式下的樣子。2026年9月28日閱讀時間約 1 分鐘
- HEX 色碼完整解說：#RRGGBB 是怎麼運作的像 #1e90ff 這樣的 HEX 色碼由三組十六進位數字組成：分別代表紅、綠、藍光的強度，每組從 00（沒有）到 ff（全滿，255）。加上第四組就能設定不透明度：80 約等於 50%，ff 代表完全不透明。2026年9月28日閱讀時間約 2 分鐘
- 如何為網站或 App 挑選配色從一個品牌色出發，產生 50 到 950 的色階，再加上略帶色調的灰色和四種語意色，接著逐一檢查每組文字與背景的對比度和色盲辨識度。挑選色階要看 OKLCH 亮度，不要憑感覺：在白色背景上，只要亮度降到 0.55 左右，文字就能通過 WCAG AA，不論色相為何。2026年9月28日閱讀時間約 1 分鐘
- 深色模式配色：如何挑選背景、文字與強調色用 #121212 這類深灰色當背景，不要用純黑；用 #e5e5e5 這類米白色當文字，不要用純白；品牌色則改用更亮、飽和度更低的版本。文字除了用 WCAG 2 檢查，也要用 APCA 檢查，因為 WCAG 2 會高估深色背景上的對比度。2026年9月28日閱讀時間約 1 分鐘
- 配色法則：互補色、類似色、三角配色與更多配色法則就是在色環上按固定角度挑選色相：互補色相差 180°，類似色相差 30°，三角配色相差 120°。在 OKLCH 而不是 HSL 裡旋轉色相，顏色的亮度就能保持一致，不會有某個色相意外跳出來。2026年9月28日閱讀時間約 1 分鐘
- CSS color-mix() 與相對色彩語法：淺色、hover 與透明度color-mix() 會在你指定的色彩空間裡混合兩個顏色，相對色彩語法則讓你修改現有顏色的單一通道，例如 oklch(from var(--brand) calc(l - 0.1) c h)。兩者都在瀏覽器中執行、可搭配 CSS 變數，也能取代大部分 Sass 色彩函式。做淺色和 hover 時在 oklab 裡混色，做透明效果時用 srgb。2026年9月28日閱讀時間約 2 分鐘
- 色盲友善配色：如何檢查並修正你的顏色色盲友善配色能讓每一組顏色在紅色盲、綠色盲、藍色盲和灰階下都分得出來。最可靠的做法不是挑某個特別的色相，而是拉開亮度：OKLCH 亮度相差約 0.2 的顏色，在我們做過的每一種模擬中都能保持可辨識。再搭配圖示或文字標籤，因為只靠顏色，總會有人看不出來。2026年9月28日閱讀時間約 1 分鐘
- Tailwind CSS 顏色：v4 OKLCH 調色盤、自訂顏色與色階Tailwind CSS v4 內建 26 組色階，每組 11 階，從 50 到 950，共 286 個顏色，全部以 OKLCH 定義成 --color-blue-500 這類 CSS 變數。自訂顏色只要寫 @theme { --color-brand-500: oklch(...) }。同樣的階數不代表同樣的亮度：blue-600 是在白底達到 4.5:1 最淺的藍色，yellow 卻要到 700 才行。2026年9月28日閱讀時間約 2 分鐘