這些配色方案要怎麼用？

點擊色塊（或旁邊的複製按鈕）即可複製以逗號分隔的 5 個色碼，可直接用於 CSS 變數、設計工具或下方的取色工具。

徽章（例如 AAA 12.6:1）是什麼意思？

這是該方案中最亮色與最暗色之間的 WCAG 對比度，也是該方案能組成的最佳文字/背景組合。AAA 表示 7:1 以上，AA 表示 4.5:1 以上，只顯示數值則表示兩者皆未達到。

可以。把方案中任意兩個色碼貼到對比度檢測工具，即可查看除這裡展示的最亮最暗組合之外的任意文字/背景組合。

不會。此頁面與取色工具完全在瀏覽器中執行，不會傳送到任何地方。

一組即拿即用的 5 色配色方案，可直接複製十六進位色碼。每個方案都會計算最亮色與最暗色之間的對比度，讓你一眼看出是否適合承載可讀文字。

Sunset BeachAA 5.7:1

#003f5c, #58508d, #bc5090, #ff6361, #ffa600

Forest FloorAA 6.0:1

#264653, #2a9d8f, #e9c46a, #f4a261, #e76f51

Ocean BreezeAAA 14.7:1

#03045e, #0077b6, #00b4d8, #90e0ef, #caf0f8

Autumn LeavesAA 5.1:1

#582f0e, #7f4f24, #936639, #a68a64, #b6ad90

Minimal MonoAAA 14.6:1

#212529, #495057, #adb5bd, #dee2e6, #f8f9fa

Earth TonesAA 6.3:1

#344e41, #3a5a40, #588157, #a3b18a, #dad7cd

Candy Pop3.4:1

#ff006e, #fb5607, #ffbe0b, #8338ec, #3a86ff

Nordic FrostAAA 13.2:1

#0d1b2a, #1b263b, #415a77, #778da9, #e0e1dd

Desert SandAA 6.6:1

#603813, #8d5524, #c68642, #e0ac69, #edc9af

Coral ReefAAA 7.7:1

#390099, #9e0059, #ff0054, #ff5400, #ffbd00

Sage GardenAAA 12.2:1

#283618, #606c38, #bc6c25, #dda15e, #fefae0

CyberpunkAA 6.2:1

#3a0ca3, #7209b7, #f72585, #4cc9f0, #4361ee

Pastel Dream1.7:1

#ffadad, #ffd6a5, #fdffb6, #caffbf, #9bf6ff

Deep Space3.5:1

#03071e, #370617, #6a040f, #9d0208, #d00000

Berry SmoothieAAA 7.8:1

#3c096c, #5a189a, #9d4edd, #c77dff, #e0aaff

Midnight GoldAAA 14.1:1

#03071e, #370617, #6a040f, #dda15e, #ffd60a

這些配色方案要怎麼用？: 點擊色塊（或旁邊的複製按鈕）即可複製以逗號分隔的 5 個色碼，可直接用於 CSS 變數、設計工具或下方的取色工具。
徽章（例如 AAA 12.6:1）是什麼意思？: 這是該方案中最亮色與最暗色之間的 WCAG 對比度，也是該方案能組成的最佳文字/背景組合。AAA 表示 7:1 以上，AA 表示 4.5:1 以上，只顯示數值則表示兩者皆未達到。
可以查看方案中其他顏色的組合嗎？: 可以。把方案中任意兩個色碼貼到對比度檢測工具，即可查看除這裡展示的最亮最暗組合之外的任意文字/背景組合。
會上傳或記錄什麼內容嗎？: 不會。此頁面與取色工具完全在瀏覽器中執行，不會傳送到任何地方。