用AI（Deepseek）做了配色网站-功能介绍【欢迎体验】
前言
前面分享了一篇文章：关于用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”产出的相对完整作品，整体开发下来，不算特别难，当然也有很多不足，请各路大神莫拷打我哈哈哈！
配色网站肯定还有很多地方需要去完善，这里我也期待大家使用后给我反馈，我会根据有效调整，在此先表达谢意！
配色网站获取方式：
关注文章底部的信息卡片，回复：配色网站