色彩 · 從照片取色

從照片擷取配色，用在你的社群貼文

Ciyo 編輯團隊2026年9月19日

以從同一個場景擷取的顏色為靈感的原創抽象編輯插圖。

一張好的產品照片本身就包含一套配色：背景、產品和幾個點綴色。把這些顏色帶進你的貼文範本，整個動態牆看起來就經過規劃。風險在於挑到放在一起很好看、做成文字卻很難閱讀的顏色。

本指南在 2026 年 9 月 19 日於 Ciyo 中用 GPT-6 Astra 從一家虛構咖啡館的拿鐵照片擷取配色，再檢查哪些組合容易閱讀。Astra 提供的對比數值，我們也自己重新計算過。

選一張能代表品牌的照片

使用你真的會發布的照片，裡面要有你希望大家記住的產品、光線和場景。我們用的是一張直式限時動態照片，拍的是咖啡館窗邊的一杯蜂蜜薰衣草拿鐵。

一串色碼在每種顏色都有用途之前，還稱不上配色。我們請 Astra 提供五種顏色、每種顏色在照片中的位置，以及一個角色：背景、文字、點綴或按鈕。我們也問了哪一組在手機上最容易閱讀。

示範中使用的配色提示詞（中文翻譯）

從選取的照片中擷取五色配色，用於 Juniper Lane Café 的社群貼文。每種顏色請提供色碼、它在照片中出現的位置，以及一個用途：背景、文字、點綴或按鈕。接著說明哪一組「文字配背景」在手機上最容易閱讀，並標出任何對比太低的組合。不要生成任何東西。

Astra 回傳了用於背景的暖奶油色 #F2E3CD、用於文字的濃縮咖啡棕 #3F3329、作為點綴的灰薰衣草紫 #A995AA 和蜂蜜金 #C99C52，以及用於按鈕的低彩度橄欖綠 #686342。它也說明，這些色碼是從預覽目測估計的近似值，而不是逐像素取樣的數值。

這項說明很重要。如果你需要精確的數值，請在圖片編輯器中用滴管工具取樣並比較。

Astra 指出，奶油色上的濃縮咖啡棕是最安全的組合，約為 9.7:1；橄欖綠按鈕上的奶油色約為 4.8:1，高於一般文字常用的 4.5:1 目標。它把奶油色配薰衣草紫或金色，以及濃縮咖啡棕配橄欖綠，標為對比太低。

我們用 WCAG 對比公式重新計算每一組，得到的結果在四捨五入誤差內相同。薰衣草紫和金色是點綴色，不是文字顏色。

建立一個角色固定的範本：奶油色背景、濃縮咖啡棕標題、橄欖綠按鈕，薰衣草紫或金色只用於小型裝飾形狀。把文字放在純色區域上，而不是直接放在照片上，因為照片中的光影會改變對比。

把這五個色碼存進你的品牌筆記，讓下一則貼文使用相同的數值。

設計工具也能從照片取樣配色。2026 年 9 月 19 日，@MONABLIZUIUX 發布了一段簡短教學，示範如何在 Adobe Illustrator 中從照片建立配色。手動取色能提供精確的像素數值；Astra 則補上角色分配和對比建議。兩者並用是很好的交叉檢查。

一段 Adobe Illustrator 的影片教學，不是 AI 工具，也與 Ciyo 無關。

不精確。在我們的操作中，Astra 表示這些是從預覽目測估計的近似值。如果需要精確數值，請用滴管工具在照片上取樣。

一般尺寸文字常用的目標是 4.5:1。我們配色中奶油色上的濃縮咖啡棕測得 9.69:1。

配色請求是和 GPT-6 Astra 的對話。在我們的操作中，對話回合沒有改變餘額。

在 Ciyo 中選取一張照片，請 GPT-6 Astra 提供五種各有用途的顏色並檢查對比。