Color Palette Generator
Generate a complete 10-shade color palette from any base color in Tailwind CSS style.
50#f0f6fergb(240, 246, 254)hsl(217, 91%, 97%)
100#dde9fdrgb(221, 233, 253)hsl(217, 91%, 93%)
200#b6d1fcrgb(182, 209, 252)hsl(217, 91%, 85%)
300#7bacf9rgb(123, 172, 249)hsl(217, 91%, 73%)
400#3c83f6rgb(60, 131, 246)hsl(217, 91%, 60%)
500#3c83f6rgb(60, 131, 246)hsl(217, 91%, 60%)
600#0b60eargb(11, 96, 234)hsl(217, 91%, 48%)
700#094cb9rgb(9, 76, 185)hsl(217, 91%, 38%)
800#063888rgb(6, 56, 136)hsl(217, 91%, 28%)
900#042458rgb(4, 36, 88)hsl(217, 91%, 18%)
關於本工具
顏色調色板提取器從任意基礎顏色生成符合Tailwind CSS、Material Design等框架50-900色階規範的10步設計系統色階。
生成色階中的每個色塊顯示其hex、RGB和HSL值。每個色塊的文字顏色根據亮度自動調整為白色或深色，確保全範圍可讀性。
使用方法
- 使用顏色選擇器選擇基礎顏色或輸入hex值。
- 10步色階（50-900）立即生成，覆蓋全亮度範圍。
- 將hex、RGB或HSL值應用於設計系統或CSS變數。
使用情境
設計系統團隊生成完整色階作為Tailwind配置擴充或CSS自定義屬性。前端開發者使用50色度作為淺色背景，900作為深色文字，構建無障礙UI。
常見問題
- 這個色階與其他工具的「深淺」有何不同？ — 此工具生成固定的10步色階（50, 100, 200, … 900），錨定在特定亮度值，符合常見設計系統慣例。
- 更改飽和度會影響色階嗎？ — 基礎顏色的飽和度在所有步驟中保持不變，只有亮度會變化。
- 可以直接在Tailwind CSS中使用嗎？ — 可以。複製每個色階級別的hex值，將其以色階編號為鍵添加到tailwind.config.js的theme.extend.colors下。