网页配色工具

网页配色工具

项目简介

网页配色工具是一款面向设计师与前端开发者的纯前端色彩应用。它把「选色、配色、校验」三件事放进一个页面：从原生取色器或 HEX 输入框选一个主色，实时查看 HEX / RGB / HSL / HSV 四种格式；点一下按钮即可生成单色、互补、近似、三角、分裂互补五种经典配色方案；最后还能按 WCAG 无障碍标准检测前后景文字的对比度，确保界面可读性达标。

整个应用由单个 HTML 文件承载，零依赖、零后端，打开即用。

核心功能

• 颜色转换：以 HSL 为内部模型，HEX、RGB、HSL、HSV 四种格式实时互转，点击任意格式即可一键复制。

• HSL 滑杆：色相、饱和度、明度三条滑杆直观调节，配合原生取色器与 HEX 输入框形成多种选色入口。

• 调色板生成：内置单色、互补、近似、三角、分裂互补五种经典配色方案，另有随机方案用于灵感发散；点击色板色块可立即应用为主色。

• 对比度检测：按 WCAG 2.x 相对亮度公式计算前后景对比度，自动给出 AA / AAA 无障碍评级。

• 交互反馈：复制、应用色块均有轻量 toast 提示，非法 HEX 输入即时拦截并给出示例。

技术架构

应用采用「输入层 → 转换核心层 → 应用层」的简洁三层结构，全部运行在浏览器端，无后端依赖。

• 输入层：原生颜色选择器、HEX 文本框、HSL 三条滑杆，以及点击色板应用色块，统一把新颜色写入内部 HSL 状态。

• 转换核心层：颜色转换模块实现 HSL↔RGB、RGB↔HEX、RGB↔HSV 的纯函数互转；配色方案模块基于当前色相做固定偏移生成五种经典方案；对比度检测模块按 WCAG 公式计算亮度与对比度。

• 应用层：主色预览块、四种格式取值框、五色色板、对比度检测面板的集中重绘，由统一 render() 驱动，保证各模块状态一致。

核心逻辑说明

颜色模型：内部统一以 HSL 三元组（色相 0–360、饱和度 0–100、明度 0–100）作为唯一真值源。任何入口的变化都先换算回 HSL，再由 render() 推导出 RGB 并进一步展示为 HEX、HSL、HSV 文本，避免多个真值源导致显示不一致。

配色方案：五种经典方案均在当前色相 h 上做固定角度偏移——互补 h+180、近似 ±15/±30、三角 h+120/240、分裂互补 h±150，并辅以饱和度与明度的微调保证视觉和谐；随机方案则用 Math.random() 生成五组 HSL 色块。

对比度计算：先将 RGB 各通道按 WCAG 相对亮度公式做伽马校正，再按 0.2126R + 0.7152G + 0.0722B 加权得到亮度，两色亮度之比即对比度；以 7:1（AAA）、4.5:1（AA）、3:1（大字号）为分级阈值输出评级。

技术栈

使用方式

直接用浏览器打开 index.html 即可使用；也可通过任意静态文件服务器托管后访问。

亮点与价值

• 零依赖、开箱即用：单个 HTML 文件承载全部能力，部署只需一个静态服务器。

• 多入口选色：取色器、HEX 输入、HSL 滑杆、色板点选四种方式互补，适配不同操作习惯。

• 设计友好：五种经典配色方案覆盖日常配色需求，对比度检测把关无障碍可读性。

• 数据本地化：全部计算在浏览器本地完成，无任何数据上传。
• 项目地址：开发者作品展览馆