Color converter
Runs entirely in your browser. Your files and data never leave your device.
| HEX | #336699 | |
|---|---|---|
| RGB | rgb(51, 102, 153) | |
| HSL | hsl(210, 50%, 40%) | |
| HSV | hsv(210, 67%, 60%) | |
| CMYK | cmyk(67%, 33%, 0%, 40%) |
About this tool
A color converter takes one color value and shows it in every other common format at once. Type or paste a HEX code, an rgb()/rgba() value, or an hsl()/hsla() value, and the tool parses it automatically, then lists the equivalent HEX, RGB, HSL, HSV, and CMYK strings. A large swatch shows the color, with a checkerboard behind it when the color has transparency, and a native browser color picker stays in sync with whatever you type.
What formats does it understand?
The input box accepts HEX in 3, 4, 6, or 8-digit form (so both #f0f and #ff00ff work, and the 4 and 8-digit forms carry an alpha channel), plus rgb()/rgba() and hsl()/hsla() in both comma-separated and modern space-separated syntax like rgb(255 0 0 / 0.5). Whatever you paste in, the tool converts it to all five formats: HEX, RGB, HSL, HSV, and CMYK. HSV and CMYK are always shown as opaque values, since neither format has a standard way to express transparency, while HEX, RGB, and HSL keep the alpha channel and switch to their a-suffixed function names (rgba(), hsla()) whenever the color isn’t fully opaque.
Alongside the conversion, the tool also generates a ten-step shade ramp from very light to very dark, built by keeping the color’s hue and saturation and sweeping the lightness down in even steps. That’s useful for pulling a quick tint-and-shade palette out of a single brand color without opening a design tool.
Is my data uploaded anywhere?
No. Parsing and conversion happen entirely in your browser using plain JavaScript math, no server round trip involved. The color you type or pick never leaves your machine, so it’s fine to convert brand colors from an internal design system or a client’s style guide without pasting them into a third-party site.
Use it to turn a designer’s HEX code into the RGB or HSL values a CSS file needs, check what a color looks like with partial opacity, or get CMYK percentages for print work from a color you picked on screen. See MDN’s <color> data type reference for the full list of CSS color notations, or the CSS Color Module Level 4 spec for how the space-separated syntax is defined.