前言

前面分享了一篇文章：关于用AI做了一个配色网站，并讲了如何“结合AI开发+想法”实现作品。

以下是文章链接：

一天时间，我用AI(DeepSeek)做了一个配色网站

当时为第一版本，网站的很多功能和细节还有很多完善的地方，因此没有细致地讲。

现在经过后期的完善，现在可以拿出来跟大家分享一下：网站的具体功能和使用。 

网站链接获取方式放在文章末尾，欢迎大家体验！ 

一、功能介绍

主要分为两部分：“配色方案展示”和“配色工具使用”

1、配色方案

1.1、配色方案主题

目前做了以上的颜色方案主题，改动（增删）主要根据需求而定。

1.2、配色主题细节

每个颜色主题，我都是做了双色（Dual）方案、三色（Triple）方案和四色（Quadruple）方案，满足用户的不同需求。

1.3、配色方案使用

用户的需求：获取方案的颜色编码。

关键动作：悬浮在方案色块：展示“点击复制”的提示语；

点击方案色块-自动复制了颜色编码（比如当前是#FFB7D5）

同时下方会展示当前颜色的基础信息：

编码的各类（hex/rgb/hsl）取值和对比度比率(前景色和背景色)

前景色：当前选中的颜色

背景色：默认为白色（#FFFFFF）

知识扩展：对比度比率

简单理解

前景色和背景色之间的某种颜色关系（比值），根据某个色彩标准来判断这个值（对比度比率）是否达标

三色方案和四色方案同样的方法进行使用

2、配色工具

2.1、对比度检测器

知识补充：

一、定义与核心作用

• 本质：通过量化不同颜色在亮度（或明度）上的差异，评估人眼对颜色区分的难易程度。
• 关键场景：
  • 网页设计、UI 界面、印刷品等领域，确保文字与背景颜色的可读性（如黑字白底对比度高，易读性强）。
  • 无障碍设计中，需满足视力障碍用户的视觉需求（如 WCAG 标准对对比度有明确规范）。

二、计算逻辑与公式

对比度比率的计算基于颜色的亮度值（Luminance），公式如下：\(\text{对比度比率} = \frac{L1 + 0.05}{L2 + 0.05}\) 其中：

 

• L1 为较亮颜色的亮度值，L2 为较暗颜色的亮度值。
• 亮度值计算： 需先将颜色从 RGB 值转换为线性空间的亮度值（不同颜色模式有具体转换规则，如 sRGB 颜色的亮度公式涉及各通道加权计算）。

三、常见颜色组合的对比度示例

颜色组合（前景 / 背景）	对比度比率	可读性评价
纯黑（#000000）/ 纯白（#FFFFFF）	21:1	极高，符合最高无障碍标准
深灰（#333333）/ 浅灰（#F5F5F5）	5:1	中等，适用于常规文本
红色（#FF0000）/ 绿色（#00FF00）	较低（需具体计算）	颜色差异主要在色调，亮度对比可能不足，易读性差

 使用介绍

 前景色和背景色的颜色填写，支持HEX、HSL和RGB格式

选择了颜色，实时更新对比度状态

2.2、色彩格式转换

这个功能比较简单，通过调色板取值后便会自动计算出该颜色的各种编码。

2.3、智能配色推荐

主要通过下拉框选项选择自己想要使用的功能

• 互补色（双色）

• 类似色（三色）

• 三色组

• 四色组

• 单色调（单色的深浅变化）

另外下拉框的右侧有一个按钮，用来随机取色。

2.4、图片色彩提取

用户选择图片，根据色彩算法分析图片的颜色，然后给出提取色彩的方案。

提取色彩方案

推荐类似方案

除了提取的色彩方案，还有推荐方案！

一张图片最多可以获取到六组色彩方案！

二、开发心得

这个配色网站算是我的第一个“想法+AI”产出的相对完整作品，整体开发下来，不算特别难，当然也有很多不足，请各路大神莫拷打我哈哈哈！

配色网站肯定还有很多地方需要去完善，这里我也期待大家使用后给我反馈，我会根据有效调整，在此先表达谢意！

配色网站获取方式：

关注文章底部的信息卡片，回复：配色网站