配色調色盤

色階產生器

選一個顏色,立刻看到它從最淺到最深的所有色階。點一下任一色階就能複製 HEX 色碼。

50 到 950 的色階

同一個色系的 11 個色階,編號方式和 Tailwind 相同。你選的顏色會標在最接近的色階上。

淺色調(加白)

點一下色階就能複製 HEX 色碼。

暗色調(加黑)

濁色調(加灰)

匯出色階

什麼是色階?

色階是同一個顏色延伸出來的一系列深淺,從接近白色到接近黑色。它們都有相同的色相,所以怎麼搭都很協調。

淺色調、暗色調與濁色調

淺色調是顏色加白,變得更亮、更柔和。暗色調是顏色加黑,變得更暗、更深沉。濁色調是顏色加灰,變得更低調、更有質感。

怎麼在設計中使用色階

淺的色階(50 到 200)適合當背景,中間的(400 到 600)適合按鈕和連結,深的(700 到 950)適合文字和邊框。只用一組色階,就能做出整齊一致的介面。

常見問題

色階是怎麼計算的?

我們使用 OKLCH 色彩空間,它貼近人眼感受亮度的方式。所以每個色階之間的變化很平均,不會突然跳太多。

50 到 950 的數字代表什麼?

這是 Tailwind CSS 和許多設計系統使用的刻度:50 最淺,950 最深。你選的顏色會落在最適合的編號上。

可以用在 Tailwind 或 CSS 嗎?

可以。輸入名稱、選擇格式,再複製程式碼就好:可以直接貼上的 CSS 變數,或是 Tailwind 設定檔用的 colors 區塊。

色階和配色有什麼不同?

色階是同一個顏色的深淺變化;配色則是把不同但好搭的顏色組合在一起。很多配色會用一組色階當背景和文字,再加上一兩個強調色。

其他指南與工具