Mia & Max照片・色彩・日常創作

MIA & MAX / COLOR WORKBENCH

從一張照片，找到能用的配色。

在這裡開啟照片、點選喜歡的顏色，再整理成色票並比較文字對比。照片只在目前裝置處理，不會上傳。沒有照片也能先用原創練習圖，或直接貼上 HEX 色碼。

免費・免註冊由 Mia & Max 製作更新：

1. 從照片找到顏色

選擇 JPEG、PNG 或 WebP，單檔上限 12 MB、6,000 萬像素。HEIC 請先轉成 JPEG；透明區域會合成白底。也可以用本站設計的色塊桌景練習，它不是實拍照片。

照片取色需要 JavaScript，啟用後可使用下列控制項；下方教學與範例仍可直接閱讀。

開啟本機照片或練習圖

讀取的是你主動選擇的單一檔案，不會讀取其他相簿。檔案不會傳送至伺服器，也不會寫入瀏覽器儲存空間。

選取顏色與代表色

X 從左向右、Y 從上向下，各為 0–100%。點選圖面或填入座標後讀取。鍵盤移至圖片時，方向鍵移動 1%，Shift 加方向鍵移動 10%。

目前像素 HEX：尚未取樣

「加入目前色碼」接在下方已套用的色票後，最多 12 色。代表色會先預覽，不會立即替換你的色票。

    先選擇照片或載入練習圖。重新整理會清除照片與編輯內容；請複製或下載要保留的色票。

    長邊超過 1,200 像素會先縮圖，取色讀取縮圖的單一 sRGB 像素，沒有鄰域平均。瀏覽器解碼、色彩轉換與縮圖可能使色碼不同於原圖；這不是印刷校色工具。跟著練習圖取出第一組色票。

    2. 整理與套用色碼

    支援 2 到 12 色。初始七色是我們為操作教學設計的示例，並非從你的照片擷取。

    互動工具需要 JavaScript。若控制項未啟用，請檢查瀏覽器設定或重新載入；下方的範例、計算方式與使用說明仍可閱讀。

    輸入色票、比較顏色與匯出

    用空白、逗號或換行分隔，例如 #369, #F4EDDD。接受 3 位或 6 位 HEX，也可省略 #；不接受透明度色碼。編輯後請按「套用色票」。

    • 1 · #E04F5F
    • 2 · #E99743
    • 3 · #EED16A
    • 4 · #69966B
    • 5 · #6D9FB9
    • 6 · #283044
    • 7 · #F4EDDD

    3. 比較文字與背景

    從目前色票選擇兩個顏色。下方範例會採用這組配色，較低的對比率可能使範例文字難以辨認；判定結果會另外保持可讀。

    今天，留下好看的顏色。

    這是一段一般大小的文字。喜歡一組色彩，也可以再確認它是否適合閱讀。

    預覽上行為 24px，下段為 16px；實際作品仍需依使用的字型、字重與背景檢查。

    文字 #283044 ／ 背景 #F4EDDD

    兩色亮度對比率 11.27:1

    一般文字
    達到 AA 4.5:1 門檻
    大字
    達到 AA 3:1 門檻

    顯示到小數第 2 位，其後捨去；判定使用未捨去的計算值，避免把略低於門檻的數值算成通過。

    4. 保留這組色票

    複製與下載會使用上方「目前套用的色票」。SVG 包含每個色塊與 HEX 標籤，可用瀏覽器開啟，或匯入支援 SVG 的設計工具。

    色碼只用於此頁的即時計算；重新整理後會回到示例，請自行複製或下載要保留的配色。

    從一張照片到一組能使用的色票

    1. 先決定用途。做彩虹作品可以保留許多相近色；做文字卡片則需要能分出文字與底色的組合。先說清楚要做什麼，才不會只挑最鮮豔的顏色。
    2. 找出三種角色。在上方照片中，分別選取一個主要色、一個點綴色，以及一深一淺的候選底色。按「加入目前色碼」逐一加入；也可從其他工具貼入 HEX。
    3. 一次只換一個條件。先固定淺色背景，逐一試文字色；再交換深淺，看哪個方向適合你的版面。交換兩色不會改變對比率，但視覺感受可能不同。
    4. 放回作品確認。通過數值門檻後，仍要看真正的字級、行距與背景。照片中不同位置的亮度會變，單一色票不能代表整張照片。

    跟著七色示例試一次

    這組示例把暖色、植物般的綠色與灰藍色排在一起，最後放入深藍與米白，方便練習「主色、點綴色、文字、背景」的分工。這是手動設定的配色練習，沒有宣稱來自任何實拍場景。

    選第 6 色 #283044 做文字、第 7 色 #F4EDDD 做背景，對比率約 11.27:1，可達到一般文字的 AA 對比門檻。

    只把文字改成第 5 色 #6D9FB9，米白背景保持不變，對比率便降到約 2.46:1，連大字的 3:1 門檻也未達到。這個藍色仍可作裝飾色，但在這個背景上，正文可改用深藍。

    這個練習可以確認特定的文字與背景搭配是否有足夠的明暗差。兩個喜歡的顏色，不一定適合直接拿來排字；確定用途後，更容易保留配色特色並找到可讀的組合。

    一般文字與大字怎麼區分？

    依 WCAG 2.2 的文字對比準則，一般文字的 AA 門檻是 4.5:1，大字則為 3:1。英文常見大字基準為 18pt，或粗體 14pt；以 CSS 換算約為 24px，或粗體 18.67px。中文等 CJK 字型需考量相當的字形大小，不宜只靠字級數字判斷。

    如果你不確定字是否算大字，先用 4.5:1 來挑選配色更容易操作。本工具同時列出兩個結果，你可以先看一般文字，再考慮較大的標題。

    這裡檢查的是兩個不透明純色的文字對比，不是整個網站的無障礙認證，也不代表細字、特殊字型或所有人的觀看條件都適合。

    標準來源：W3C：Understanding SC 1.4.3 Contrast (Minimum)。

    工具如何計算？

    先把 HEX 拆成 sRGB 的紅、綠、藍三個通道，各除以 255，取得 0 到 1 的值。每個通道 c 若不大於 0.04045，轉為 c / 12.92；否則轉為 ((c + 0.055) / 1.055) 的 2.4 次方。

    相對亮度 L = 0.2126 × R + 0.7152 × G + 0.0722 × B

    將較亮色的 L 加上 0.05，除以較暗色的 L 加上 0.05，就是對比率。相同顏色為 1:1，純黑與純白為 21:1。

    工具以完整計算值比較門檻；畫面只捨去到小數第 2 位。例如 4.499:1 會顯示 4.49:1，並標示一般文字未達門檻。

    公式來源：W3C WCAG 2.2：相對亮度定義與對比率定義。

    代表色是怎麼找出來的？

    工具從縮圖均勻抽樣最多 16,000 個像素，把 RGB 三通道各以 32 為一級分組，計算每組的平均色。接著依出現數量排序，略過與已選色 RGB 距離小於 40 的近似色，最多保留 7 色。

    因此，大面積背景通常排前面；小面積但重要的花朵或杯子可能被略過。這不是物件辨識，也不會替你找齊彩虹七色。找到的數量可能少於 7，純色圖片可能只有 1 色。

    代表色適合當起點。如果你想保留某個主體，請直接在它的中央取樣。透明圖會先合成白底，縮圖邊緣則可能混到鄰色；可用練習圖的大色塊先比較這兩種方式。接著挑選可讀的文字與背景搭配。

    使用範圍與限制

    • 接受 3 位或 6 位 sRGB HEX。8 位含透明度色碼、RGB 函式、CSS 色名與 Display P3 皆不在本工具的輸入範圍。
    • 只有主動選擇照片後才會讀取；不會存取其他檔案。若文字壓在照片或漸層上，需檢查實際承載文字的每個背景區域，單一取樣點不代表整張圖片。
    • 不分析色盲辨識、按鈕邊框、焦點框、字距或印刷結果。圖表與狀態也應搭配文字、形狀或符號，避免只靠顏色表達。
    • 色票可重複；同色相互比較會得到 1:1。重複色碼可用來保留你原本的編排位置。

    資料與接下來的練習

    這個工具直接在瀏覽器計算，不會上傳或自動儲存你的照片與色碼。圖片讀取後會釋放暫時檔案網址；「清除照片」會清掉預覽與檔案參照，已套用的色票保留。重新整理或離開後不保留編輯內容；想再使用時，請複製色碼或下載 SVG。

    不用帳號就能完成整個流程。若你同時使用 Niji Diary 遊戲，本工具不會存取或更動遊戲的作品與收藏。

    想練習如何從畫面裡找到顏色，可閱讀拾色指南；想把七個顏色做成作品，可查看拾色日記操作說明。逐一查按鈕可讀工具完整操作手冊。如果計算或操作出現問題，請透過聯絡頁告訴我們使用的色碼與瀏覽器。