这些配色方案要怎么用？

点击色块（或旁边的复制按钮）即可复制以逗号分隔的 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 及以上，只显示数值则表示两者都未达到。
可以查看方案中其他颜色的组合吗？: 可以。把方案中任意两个色值粘贴到对比度检测工具，即可查看除这里展示的最亮最暗组合之外的任意文字/背景组合。
会上传或记录什么内容吗？: 不会。此页面与取色工具完全在浏览器中运行，不会向任何地方发送数据。