Color tools
Ten browser-based color utilities — convert HEX to RGB and HSL, mix and blend colors, generate complementary, analogous, and triadic schemes, create tint and shade palettes, look up CSS named colors, extract CSS variables, and pick colors from images. No signup, no cloud, nothing leaves your device.
-
HEX 转 RGB 转换器
将十六进位色码转为 RGB 值,取得 r、g、b 分量与 CSS rgb() 字符串。
打开工具 →
-
HEX 转 HSL 转换器
将 Hex 颜色转为 HSL(色相、饱和度、亮度),便于主题化与 CSS 变量。
打开工具 →
-
颜色混合器
以任意比例混合两种颜色,实时显示混合后的 Hex、RGB 与 HSL 值。
打开工具 →
-
互补色查找
查找任一 Hex 颜色的互补色(色轮上对应 180° 的颜色)。
打开工具 →
-
类似色生成器
生成类似色色彩配置(色轮上 ±30°、±60°)构成和谐的色盘。
打开工具 →
-
三等分色生成器
生成三等分色色彩配置——色轮上每 120° 等距分布的三种颜色。
打开工具 →
-
色调与阴影生成器
为任一基础色生成完整的浅色(tints)与深色(shades)渐层。
打开工具 →
-
颜色名称查找
查找任一 Hex 值最接近的 CSS 命名颜色,或依颜色名称取得 Hex 码。
打开工具 →
-
CSS 变量截取器
粘贴 CSS 代码,一键截取所有自定义属性(--variables)与其值。
打开工具 →
-
图片像素取色
上传图片并点击任一像素,实时读取其 Hex、RGB 与 HSL 色彩值。
打开工具 →
Why browser-only color tools?
Color decisions are at the heart of every design system. These tools let you experiment freely without pasting values into a remote service or signing up for yet another SaaS product. Every conversion, blend, and palette is calculated locally in JavaScript — instant feedback with zero latency, no data sent anywhere.
Choosing the right tool
Need to translate design tokens? Use HEX to RGB or HEX to HSL to get CSS-ready values. Building a palette? Try Complementary, Analogous, or Triadic generators for harmonious schemes. Need more depth? Tints & Shades generates a full lightness range. For matching a real-world color, use Color from Image Pixel to sample any photo.