黃色——含義、調色板、互補色和和諧
實用的顏色指南 黃色的:象徵主義和心理學, 色輪 關係(互補關係、相似關係、三元關係), 無障礙 顏色組合和可下載的調色板。之間轉換 十六進位, RGB, 和 HSL、複製 CSS 變量並預覽搭配在一起的顏色。
提示:按 進入 在任何字段內更新所有值。
黃色一目了然
黃色象徵著陽光、溫暖、好奇心和樂觀。它非常適合作為強調色來突出顯示號召性用語、價格標籤和警報。對於長篇閱讀,請選擇柔和的色調以獲得舒適感。
純黃色與白色的對比度較低。為了使 UI 易於訪問,請將黃色放在海軍藍、木炭色或深紫色上。在淺黃色背景上使用黑色或深灰色文本。
黃色調色板
自動生成 色調 (更白), 色調 (更黑),以及 音調 (更多灰色)從當前的黃色。單擊任意樣本以復制十六進制。您還可以下載 PNG 調色板。
色調
色調
音調
色輪和諧
探索 補充 顏色對, 類似的 鄰居,以及 三元的 從這個黃色開始。這些現成的組合可幫助您找到搭配得很好的顏色。
色輪上的相反顏色可以為 CTA 和徽章創建高對比度。
方向盤上的鄰居感覺很和諧——非常適合背景和漸變。
三種均勻間隔的色調為儀表板和圖表提供平衡的對比度。
應用和最佳實踐
品牌推廣
黃色為零售、食品、兒童產品和旅遊品牌增添了友善和活力。與木炭色或深海軍藍搭配,可實現專業的平衡和可讀的排版。
用戶界面和輔助功能
使用黃色作為按鈕和亮點的強調色。對於較長的內容,請選擇淺色作為背景並搭配深色文本,以滿足 WCAG 對比度。
營銷與包裝
黃色在貨架和社交媒體上吸引眼球。互補的藍色或紫色創造出引人注目的英雄部分和產品卡。
特徵
- 立即的 十六進制 ↔ RGB ↔ HSL 轉換和同步。
- 自動調色板:色調、色調、色調以及可下載的 PNG 調色板。
- 色輪和諧:互補、相似、三元建議。
- 快的 CSS 變量 導出設計系統。
如何使用
- 輸入十六進制(例如
#FFD600) 或 RGB/HSL 值並按 進入。 - 單擊任何樣本以復制其十六進制。使用互補或三元組以獲得強烈的對比。
- 下載調色板 PNG 或複制 CSS 變量並粘貼到您的項目中。
- 檢查對比度提示,以保持淺黃色 UI 上的文本可讀。
常問問題
黃色適合搭配什麼顏色?
海軍藍、木炭色、深紫羅蘭色和濃郁的森林綠色是完美搭配。對於明亮的口音,請使用互補的青藍色或紫色。
黃色的相反顏色是什麼?
在 RGB/HSL 輪上,相反的色調接近 藍青色 (與黃色色調大約 180°)。
正文可以使用黃色嗎?
通常在淺色背景上不會。突出顯示或圖標保持黃色;而是在淺黃色卡片上使用深色文字。
