全能色彩格式双向转换工具
支持 HEX、RGB、HSL、HSV 四大色彩模式的实时双向解析与转换，一键提取标准 CSS 变量
色彩调节与预览工作区
HEX
RGB
HSL
HSV
提示：支持在任意输入框中修改数值，引擎将自动双向计算并同步其他格式的颜色值。支持 Alpha 透明度通道解析。
LIVE PREVIEW
#7B61FF
#7B61FF
色彩代码输出区
HEX 代码
#7b61ff
RGB 代码
rgb(123, 97, 255)
HSL 代码
hsl(250, 100%, 69%)
HSV 代码
hsv(250, 62%, 100%)
CSS Variables Output
:root {
/* Standard Base Colors */
--color-hex: #7b61ff;
--color-rgb: 123, 97, 255;
--color-hsl: 250, 100%, 69%;
}
.my-element {
background-color: var(--color-hex);
color: rgba(var(--color-rgb), 1.0);
}
🎯
典型应用场景
UI 设计与开发落地
设计师提供的 HEX 颜色常常需要在前端转换为 RGB 或 HSL，以实现渐变或动态不透明度。
CSS 变量体系提取
将硬编码的色彩转换并剥离为 :root 下的标准 CSS 变量，构建更稳健的前端组件库。
动态主题切换 (Theming)
在实现暗黑模式或主题切换时，基于 HSL 模型动态调整明度 (L) 和饱和度 (S) 是一种优雅的做法。
Canvas 图像处理
在 Canvas API 的像素级操作中，常常需要分离和提取色彩的 R, G, B, A 独立通道参数。
数据可视化引擎
ECharts、D3.js 等图表库渲染时，标准化的 HEX 或 RGB 格式可以提升渲染兼容性。
无障碍对比度 (A11y)
对色彩进行标准化转换后，更利于通过算法计算背景与前景色的视觉对比度是否符合 WCAG 标准。