配色調色盤

手機App配色

在App裡,顏色告訴使用者哪裡可以點、哪個狀態正在啟用、操作是成功還是失敗。這12組配色依App類型,由背景、表層、主色和文字組成。HEX色碼可以直接用在Figma、Flutter、SwiftUI和React Native。

金融科技藍與綠

藍色代表信賴,綠色代表餘額和正常交易。

外送橘

用橘色凸顯下單按鈕和優惠活動。

健康與身心

平靜的配色,適合掛號、習慣養成和紀錄App。

深色模式配紫色

不是純黑而是極深灰的背景,搭配明亮的紫色強調。

社群粉紅與紫色

適合社群、交友App和創作者工具。

極簡效率

超好讀,適合待辦清單和工作工具。

教育黃

明亮易懂的配色,適合語言和學習App。

活力健身

深色背景配萊姆綠和紅色,適合訓練和運動數據。

冥想薰衣草

溫柔平靜,適合睡眠、冥想和日記App。

旅遊土耳其藍與沙米色

讓人想到海灘和陽光,適合訂房App和旅遊指南。

清新食物綠

適合超市、食譜和營養管理App。

高端購物

中性優雅,讓商品照片成為主角。

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

先決定狀態色

每個App都需要表示錯誤、成功、警告和資訊的顏色。選擇和配色協調的顏色,也別把錯誤色拿去用在品牌按鈕等其他地方。不要只靠顏色,加上圖示或文字讓意思更清楚。

也要設計深色模式

大多數手機都支援深色模式,很多使用者也會開啟。單純把顏色反轉是不夠的。用極深的灰色取代純黑,並稍微降低強調色的飽和度,避免在深色背景上刺眼。

確認對比度和點擊範圍

WCAG要求文字和背景的對比度至少4.5:1。按鈕在啟用、按下、停用時要有不同的外觀。也在戶外或螢幕調暗的狀態下試用App,這才是很多人實際使用的環境。

這些配色用到的顏色

煙白色白色亞麻白橘色煤黑色米白色松針綠烏木黑雪白色白金色普魯士藍象牙白琥珀色螢光黃香檳色蒂芬妮藍

常見問題

App要用幾個顏色?

一般是1個主色、視需要加1個輔助色、背景和文字用的中性色,以及錯誤、成功、警告、資訊4種狀態色。

App的主要按鈕用什麼顏色好?

只要和背景有足夠對比,推薦使用品牌主色。每個畫面只用在最重要的操作上。

更多設計配色

繼續探索