專業策劃的調色板，適用於網頁設計、品牌塑造和資料視覺化。點擊複製 HEX 代碼或匯出完整調色板。
Pick 1-2 brand colors, then build a complementary palette around them. Use a bold primary with neutral supporting colors.
60% dominant color (backgrounds), 30% secondary color (cards, sections), 10% accent color (buttons, links).
Ensure text-to-background contrast ratios meet WCAG AA (4.5:1 for normal text). Test with colorblindness simulators.
3-5 colors is optimal for most projects. Too many colors create visual noise. Use shades and tints of the same hue for variety.
從您的品牌價值和目標受眾開始。以色彩心理學為指導：藍色傳達信任和專業性，綠色代表成長和自然，紅色表示緊迫感或激情，紫色暗示奢華或創意。將主要調色板限制在 3-5 種顏色。確保足夠的對比度（4.5:1 比例）以滿足無障礙要求。
60-30-10 法則是一種平衡使用色彩的設計原則：60% 主色（背景、大面積區域），30% 輔助色（卡片、側邊欄、UI 元素），10% 點綴色（按鈕、高亮、行動召喚）。這在保持和諧的同時建立視覺層次。中性色（白色、灰色、黑色）通常在現代 UI 設計中構成 60% 的基礎。
WCAG 2.1 要求普通文字的最低對比度比為 4.5:1，大文字為 3:1。使用 WebAIM Contrast Checker 或瀏覽器 DevTools 等工具進行驗證。不要僅依賴顏色傳達信息（同時使用圖示/文字），用色盲模擬器測試，並確保互動元素具有可見的焦點狀態。
對於 Web 開發：CSS 用十六進制代碼（#RRGGBB），動態操作用 RGB/HSL 值，主題用 CSS 自訂屬性。對於設計工具：大多數接受十六進制代碼；Figma 和 Sketch 支援顏色庫。對於 Tailwind CSS：在 tailwind.config.js 的 theme.extend.colors 下定義顏色。對於品牌：包含 Pantone（印刷）、CMYK（印刷）和 RGB（螢幕）值。