Color code generator
Type any colour and get HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK, LAB and LCH at once, switch between the D65 and D50 (CSS lab) white points, export CSS variables and build a 50–900 tint/shade scale.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Colour
Accepts #rgb, #rrggbb, #rrggbbaa, rgb()/rgba() and hsl()/hsla() in comma or space syntax
Output options
All formats
#3b82f6rgb(59 130 246)hsl(217.22 91.22% 59.8%)hsv(217.22 76.02% 96.47%)cmyk(76.02% 47.15% 0% 3.53%)lab(55.63% 17.55 -64.42)lch(55.63% 66.77 285.24)Tint / shade scale
500 is the base colour; lower steps mix towards white, higher steps towards black
CSS variables
:root {
--brand: #3b82f6;
--brand-rgb: 59 130 246;
--brand-hsl: 217.22 91.22% 59.8%;
--brand-lab: 55.63% 17.55 -64.42;
}What this tool does
- The design hands you a HEX value but the codebase wants rgb() or hsl() — get every notation at once instead of bouncing between tools.
- Export hex plus RGB, HSL and Lab components for design tokens, so you can write rgb(var(--brand-rgb)) and adjust alpha at runtime.
- Need a whole ramp? Generate a 50–900 scale where 500 is the base colour, lower steps are tints and higher steps are shades.
- For wide-gamut or perceptually even gradients with CSS lab()/lch(), switch to the D50 white point and paste values that match what the browser renders.
Example
Input
#3b82f6 (D65 white point)
Output
HEX #3b82f6 · RGB rgb(59 130 246) · HSL hsl(217.22 91.22% 59.8%) · HSV hsv(217.22 76.02% 96.47%) · CMYK cmyk(76.02% 47.15% 0% 3.53%) · LAB lab(55.63% 17.55 -64.42) · LCH lch(55.63% 66.77 285.24)
Switch to D50 and the same colour becomes lab(54.62% 8.76 -65.79), because CSS lab()/lch() are defined against D50.
Frequently asked questions
Why do these Lab numbers differ from another tool?
Almost always the white point. sRGB is defined against D65, while CSS lab()/lch() specify D50, and converting between them requires a Bradford chromatic adaptation, which shifts a and b noticeably (red goes from a = 80.09 to 80.81). This tool lets you switch white points; pick D50 when you paste into CSS.
HEX or HSL — which should I use?
HEX is the sRGB hex notation: compact, universally supported and ideal for fixed values. HSL separates hue, saturation and lightness, which makes "same hue, different lightness" edits and theme variables far easier to reason about — but it describes exactly the same colour space as HEX.
Can I hand these CMYK numbers to a printer?
Treat them as a reference only. They are the theoretical CMYK derived from sRGB by formula, ignoring ink behaviour, total-ink limits and ICC profiles. For real print work, have the design tool separate the file under the profile your printer specifies.
How is the tint/shade scale built?
Step 500 is the base colour. Steps below 500 mix towards white (tint) and steps above mix towards black (shade), interpolating linearly in the sRGB channels, so larger gaps look more dramatic and 900 is nearly black.
Which input formats are accepted?
All four hex lengths (#rgb, #rgba, #rrggbb, #rrggbbaa) plus rgb()/rgba()/hsl()/hsla() in either comma syntax or the modern space-and-slash syntax such as rgb(59 130 246 / 50%). Colour names (rebeccapurple) and notations like oklch() are not supported.
Keywords：color converterhex to rgbrgb to hsllchlab colorcmykcolor scale颜色代码颜色转换色阶生成设计令牌配色