配色調色盤

單色(同色系)配色

單色配色是把一個顏色調整明度或飽和度,從淺到深排列而成的配色。好搭配,又能營造整齊的印象。這裡每個顏色各一組,共12個可以直接複製的範例。

藍色

最適合企業、App和圖表。

綠色

自然的印象,適合環保品牌和健康領域。

紅色

強烈的印象,用在促銷活動或警示上。

紫色

有創意感,適合美妝和身心健康。

橘色

溫暖有活力,適合食品和運動。

粉紅色

適合時尚、活動和女性商品。

灰色

幾乎所有UI的基本色。

藍綠色

清爽現代,適合醫療和金融。

棕色

溫暖,適合咖啡、皮件和木製品。

黃色

明亮的印象,文字請用深色階。

海軍藍

正經又專業,適合簡報資料。

薰衣草紫

柔和,適合室內設計和身心健康。

點一下顏色就能複製 HEX 色碼。按鉛筆圖示可以在編輯器中開啟並修改配色。

兩端的顏色用在文字和背景

單色配色中,最淺的色階用在背景,最深的用在文字。中間的色階就留給按鈕、外框和裝飾。

對比不夠就加中性色

如果每個顏色看起來都差不多,就加入白色或極深的灰色。不會破壞色彩的統一感,又能區分元素。

不只改明度,也要改飽和度

淺色階稍微降低飽和度,深色階稍微提高。這樣漸層就不會灰濁,看起來更自然。

這些配色用到的顏色

磚紅色紫水晶色亞麻白蜜桃色肉桂色雪白色煙白色淺灰色深灰色烏木黑藍綠色拿鐵色米色

常見問題

什麼是單色配色?

把一個顏色延伸出更淺和更深的色階所做成的配色,例如從天空藍到海軍藍。

單色配色要怎麼做?

決定一個基底色,做出混入白色的淺色(tint)和混入黑色的深色(shade)。通常4到6個色階就夠了。

更多風格配色

繼續探索