Convert colors between every common format — HEX, RGB, RGBA, HSL, HSV, HWB, CMYK, CIELAB, LCH, OKLab, OKLCH and XYZ — with the exact conversion pipeline CSS Color Level 4 defines. Each converter shows its working, previews the color live, and warns honestly about gamut and CMYK approximation.
Your favourites
Recently used
Start from what you are trying to do
- Get a brand colour into every format you needOne colour expressed as HEX, RGB, HSL, CMYK and modern CSS, ready for any brief.4 steps, starting with Online Color Picker
HEX, RGB, HSL and HSV Converters
- HEX to RGB ConverterConvert a hex color code to RGB instantly.
- RGB to HEX ConverterConvert RGB channel values to a hex color code.
- HEX to RGBA ConverterTurn a hex color plus an opacity into rgba() — pick the color, slide the alpha, and get rgba(30, 144, 255, 0.6), the modern slash syntax and the 8-digit hex form (#1e90ff99) all at once.
- RGBA to HEX ConverterConvert rgba() colors to hex — including the alpha channel.
- HEX to HSL ConverterConvert hex color codes to HSL — hue on the 360° wheel, saturation and lightness as percentages.
- HSL to HEX ConverterConvert hsl() colors to hex codes.
- RGB to HSL ConverterConvert RGB values to HSL and see the arithmetic: lightness is the average of the largest and smallest channel, saturation comes from their spread, and hue from which channel leads.
- HSL to RGB ConverterConvert hsl() colors back to RGB channels.
- HEX to HSV ConverterConvert hex colors to HSV (also called HSB) — the hue/saturation/value model used by the color pickers in Photoshop, GIMP and Figma.
- HSV to HEX ConverterTurn HSV/HSB picker values into a usable hex code.
- RGB to HSV ConverterConvert RGB channels to HSV: value is the largest channel, saturation the spread relative to it, hue the angle from which channel dominates.
CMYK Converters
- HEX to CMYK ConverterConvert a hex color to CMYK ink percentages using the standard formula: black is the missing brightness, then cyan, magenta and yellow cover what remains.
- CMYK to HEX ConverterConvert CMYK ink percentages to a hex code for screens.
- RGB to CMYK ConverterConvert RGB screen colors to CMYK ink percentages, with the working shown: K = 1 − max(R,G,B)/255, then C, M and Y from the remaining ink.
- CMYK to RGB ConverterConvert CMYK values back to RGB for on-screen use.
LAB, OKLCH and Modern CSS Converters
- HEX to LAB ConverterConvert hex colors to CIELAB — the classic perceptual space where L* is lightness and a*/b* are the green–red and blue–yellow axes.
- LAB to HEX ConverterConvert CIELAB values to hex.
- RGB to LAB ConverterConvert RGB channels to CIELAB coordinates for perceptual work — color difference, gamut math, print pipelines.
- LAB to RGB ConverterConvert CIELAB back to RGB channels.
- OKLCH to HEX ConverterConvert oklch() colors to plain hex for older tooling and fallbacks.
- RGB to OKLCH ConverterConvert RGB colors to OKLCH — the modern perceptual space behind new CSS color work, where equal lightness numbers actually look equally light.
- OKLCH to RGB ConverterConvert oklch() values to RGB channels.
- OKLab Color ConverterConvert any color to and from OKLab — the rectangular form of OKLCH, with L for lightness and a/b axes instead of chroma and hue.
- LCH Color ConverterConvert colors to and from CIELCH — CIELAB expressed as lightness, chroma and hue, the polar form that makes Lab intuitive to edit.
- XYZ Color ConverterConvert between CIE XYZ (D65) and ordinary colors.
- CSS Color Format ConverterConvert a whole list of CSS colors to one target notation in a single pass.
Frequently asked questions
Which color formats can I convert between here?
HEX (3, 4, 6 and 8 digit), RGB and RGBA, HSL and HSLA, HSV/HSB, HWB, CMYK, CIELAB, LCH, OKLab, OKLCH, CIE XYZ and all 148 CSS named colors. The Complete Color Converter accepts any of them as input and shows the rest at once.
Is converting between color formats lossless?
Between sRGB notations — hex, rgb(), hsl(), hwb() — yes, exactly: they encode the same 24 bits and round-trip perfectly. Converting into Lab or OKLCH is also exact. Loss only appears with formats that hold less information, such as 3-digit shorthand hex, or when a wide-gamut color has to be fitted into sRGB.
Why does my CMYK value not match what my printer produces?
Because true CMYK conversion is device-specific: the press, inks, paper and ICC profile decide the real recipe. These converters use the standard device-independent formula, which is a legitimate starting point and is labelled as approximate on every page that shows it — but it is not a substitute for a proofed, profile-managed conversion.
What is the difference between HSL and HSV?
They share the hue axis but define the other two differently. HSV saturation is measured against the brightest channel and its V axis peaks at the pure color; HSL saturation is measured against distance from gray and its L axis puts the pure color at 50%. HSV matches design-tool pickers; HSL is the one CSS accepts.
Why do some converters warn that a color is out of gamut?
Lab, LCH, OKLab and OKLCH can describe colors that no standard screen can display. Rather than silently clipping — which shifts hue and lightness — those converters flag the color and point to the Color Gamut Mapper, which reduces only chroma and keeps the hue and lightness you asked for.
Can I convert a whole list of colors at once?
Yes — the CSS Color Format Converter takes up to 200 colors per run in any mixed notation, converts them all to one target format, and can keep each original as a trailing comment so code review stays readable.
Which format should I use in my stylesheet?
Hex or rgb() for maximum compatibility, hsl() when people hand-edit the file, and oklch() for design tokens and derived variants because it stays editable on perceptual axes. A common pattern is to author in oklch() and ship a hex fallback line before it.
Every notation, one pipeline
Color notations multiply because contexts differ — hex for stylesheets, HSL for humans, HSV for picker dialogs, CMYK for print conversations, Lab for measurement, OKLCH for modern CSS and design tokens, XYZ underneath them all. The converters in this hub translate between all of them through one spec-exact pipeline (CSS Color Level 4’s own matrices and curves), so any two tools here agree with each other and with your browser. Each converter shows its arithmetic for your input — these pages teach the conversions while performing them.
The three families
The HEX/RGB/HSL/HSV family covers sRGB’s everyday notations — lossless respellings of the same 24 bits, with the classic derivations (base-16 pairs, max/min analysis, hue sectors) worked live. The CMYK family crosses into print’s subtractive world with the standard nominal formulas and unusually honest labeling — screen-to-ink is profile-dependent, and every page says so. The Lab/OKLCH family enters measurement and perception: D50-referenced CIELAB and LCH matching instruments and CSS lab(), OKLab/OKLCH matching modern CSS and design practice, XYZ as the verifiable root, plus batch conversion for whole stylesheets.
Conversions with a conscience
Two failure modes plague casual converters, and this family is built against both. Silent gamut damage: Lab and OKLCH describe colors sRGB cannot show, and these tools flag them and route to proper chroma-preserving mapping instead of clipping channels quietly. Silent pipeline shortcuts: skipping linearization or white-point adaptation produces values that disagree with browsers by visible margins — the pipeline here is the reference one, and the spec’s published values (red’s lab and oklch coordinates, D65’s white point) are standing test cases.
Picking a converter
Know both formats? Use the dedicated pair page — its working, examples and FAQs are specific to that translation. Unsure what you have? The Complete Color Converter parses any notation and shows all twelve. Whole list to migrate? The CSS Color Format Converter batches up to 200 lines with originals preserved as comments. Print question? Start at the CMYK pages’ honesty notes before trusting any number.
