Paste any color code or pick one visually, and this free online color converter instantly shows it in HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK, OKLCH, and LAB — no signup required.
How Color Conversion Works
Every color format on this page is derived from the same underlying RGB value — the converter just expresses those same red, green, and blue numbers in a different system.
HEX to RGB. A HEX code like #0F0D72 is three pairs of base-16 digits, one pair per channel. 0F converts to 15, 0D converts to 13, and 72 converts to 114 in base-10 — giving rgb(15, 13, 114). This is a direct radix conversion with no loss of precision in either direction.
RGB to HSL and HSV. HSL (hue, saturation, lightness) and HSV/HSB (hue, saturation, brightness/value) both describe the same red-green-blue point using a cylindrical model instead of a cube. Hue is calculated from which channel is highest and by how much the channels differ; saturation and lightness/value are derived from the spread between the highest and lowest channel values. HSL is generally more intuitive for adjusting a color’s lightness in CSS without shifting its hue, while HSV is more common in design and image-editing software.
RGB to CMYK. CMYK (cyan, magenta, yellow, key/black) is a subtractive model built for ink on paper, rather than light on a screen. The converter first calculates how much black (K) a color needs, then works out the remaining cyan, magenta, and yellow proportions from what’s left. Because RGB and CMYK cover different ranges of visible color (gamuts), this conversion is an approximation — a specific RGB value may shift slightly once printed, which is why professional print work re-checks CMYK output against a physical proof.
RGB to OKLCH and LAB. Both OKLCH and LAB are perceptually uniform color spaces, meaning equal numeric steps look like more equal visual steps to the human eye than equal steps in RGB or HSL do. Getting there takes two hops: RGB is first linearized (removing the gamma correction browsers apply for display) and converted to the CIE XYZ color space, and from there to LAB or to Björn Ottosson’s OKLab model, with OKLCH simply expressing OKLab’s a/b coordinates as a chroma and hue angle instead. This is also why OKLCH gradients in CSS look smoother than HSL gradients — the intermediate steps stay perceptually even instead of dipping in perceived brightness partway through.
When to Use Each Format
- Freelancers matching a client’s brand color — paste the client’s HEX from their logo file, then copy the HSL version straight into a CSS custom property for consistent theming across a site.
- Agencies handing off print-ready brand assets — convert a web HEX/RGB brand color to CMYK before sending specs to a print vendor, since RGB values don’t translate 1:1 to ink.
- Developers building modern CSS gradients or color-mix() effects — OKLCH keeps hue perceptually consistent across a gradient in a way HSL can’t, which matters for anything gradient-heavy (buttons, hero backgrounds, chart palettes).
- Anyone auditing a design system — pull LAB values to numerically compare how close two brand colors actually are, rather than eyeballing HEX codes side by side.
FAQ
What’s the difference between RGB and HEX?
RGB and HEX describe the exact same color using two different notations. RGB uses three base-10 numbers from 0–255 for red, green, and blue (rgb(15, 13, 114)), while HEX packs those same three values into a six-digit base-16 string (#0F0D72). Browsers and CSS accept both interchangeably — the choice is purely about which is easier to read or paste in a given context.
When should I use CMYK instead of RGB?
Use CMYK when a color is headed to a physical printer, and RGB (or HEX/HSL) for anything shown on a screen. RGB is an additive model built for light-emitting displays, while CMYK is a subtractive model built for ink absorbing light off paper — the two use different gamuts, so a bright RGB blue may look duller once printed in CMYK. Always confirm CMYK values against a physical or calibrated proof before finalizing a print run.
What is HSL used for in CSS, and how is it different from RGB?
HSL is used in CSS when a design needs to programmatically lighten, darken, or desaturate a color without changing its hue — for example, generating hover or disabled button states from one base color. RGB doesn’t support that kind of adjustment cleanly, since lightening a color in RGB means recalculating all three channels together rather than tweaking a single value.
Is OKLCH better than HEX for modern CSS?
OKLCH isn’t strictly “better,” but it solves a specific problem HEX and HSL can’t: perceptually even gradients and color scales. Because OKLCH is built on a perceptually uniform color model, a gradient between two OKLCH colors transitions smoothly in perceived brightness and saturation, while the equivalent HSL or RGB gradient can visibly dip in vibrancy partway through. HEX remains the simplest choice for flat, single-value colors with no interpolation involved.
How do I convert a color for print instead of web?
Convert the RGB or HEX value to CMYK using this tool, then treat that CMYK output as a starting point rather than a final answer — send it to your printer or check it against a color-calibrated proof, since exact print reproduction depends on the specific ink, paper stock, and printer profile in use, none of which a browser-based converter can account for.