Color Converter Hub

1. 1

   Enter a colour

   Type or paste any colour value — a hex code, rgb(), hsl(), oklch(), a CSS colour name, or pick one with the colour picker.

2. 2

   Read every format

   All twelve formats appear at once, alongside the nearest CSS colour name and the contrast the colour achieves.

3. 3

   Copy or export

   Copy a single value, copy them all, or export the colour as CSS variables, SCSS, Tailwind, JSON tokens, Swift or Android XML.

Twelve formats describe the same colour in different ways, and each exists because it answers a question the others answer badly. Here is what each one is for.

Using color converters enables you to convert colors between different formats, ensure color consistency across platforms, translate colors for different applications, and work with colors in various contexts.

Benefits of Color Conversion

• Format Compatibility: Convert colors for different platforms and applications
• Color Consistency: Maintain accurate color representation across mediums
• Design Workflow: Streamline color usage in design projects
• Multiple Formats: Support for RGB, HEX, HSL, CMYK, OKLCH, LAB and more
• Real-time Conversion: See color changes instantly

Our color converter collection includes tools for converting between all major color formats used in web design, graphic design, and print.

• RGB to HEXConvert RGB color values to hexadecimal format
• HEX to RGBConvert hexadecimal color codes to RGB values
• RGB to HSLConvert RGB color values to HSL format
• HSL to RGBConvert HSL color values to RGB format
• RGB to CMYKConvert RGB color values to CMYK format
• Color PickerInteractive color picker with real-time conversion

If you have only ever used HEX and HSL, OKLCH is the one format on this page worth learning. It solves a problem every design system runs into and most people work around by hand.

• Lightening keeps the hue — raise the lightness of an HSL blue and it drifts toward purple; raise the lightness of an OKLCH blue and it stays blue. That is the whole point of a perceptually uniform space.
• Equal steps look equal — a palette built by stepping OKLCH lightness in even increments reads as an even ramp. The same increments in HSL produce a ramp that is crowded at one end.
• One number for saturation — chroma is a single value that means the same thing at every hue, so "the same intensity in a different colour" is a one-number change rather than a guess.
• It reaches colours sRGB cannot — OKLCH can describe colours beyond a standard screen. This tool tells you when that has happened and gives the closest colour the screen can actually show.

Paste any HEX code above and read the OKLCH line to see where your existing colours sit. To move a whole palette across at once, use the whole-file mode below.

Converting one colour is the easy half. Moving an existing project from HEX to OKLCH, or pulling every colour out of a design file to check it, means touching hundreds of values — which is where every other colour converter stops.

• It rewrites, it does not regenerate — the file you get back is the file you gave, with only the colour values changed. Comments, spacing, minification, line endings and everything the scanner did not recognise come through byte for byte.
• It reads seven file types — CSS, SCSS, SASS, LESS, JSON, SVG and plain text. In SVG and JSON every colour lives inside quotes, and those are found too.
• Colour names are opt-in — tan, plum, salmon and red are ordinary English words. Matching them is a switch you turn on, because leaving it on for a text file would rewrite prose.
• It knows what is not a colour — #ff00001 has too many digits, tangerine is not tan, and --tan-100 is a variable name. None of them are touched.

The free plan converts 200 colours at a time, which covers a design system's core palette. Pro removes the limit, queues up to 25 files and returns them as one archive.

A colour is only usable if the text on it can be read. The contrast panel measures your colour against white, against black and against any second colour, and checks each result against the WCAG thresholds.

• 4.5:1 is the AA requirement for normal body text, and the bar most audits are measured against.
• 3:1 is enough for large text — 18.66px bold or 24px regular and above — and for interface components and graphics.
• 7:1 is AAA for normal text, which is a genuine readability upgrade rather than a formality, particularly for long-form reading.
• Contrast depends only on lightness, so changing the hue of a failing colour will not rescue it. That is why the suggested fix moves lightness and holds the hue you chose.

When a pair fails, the tool searches both lighter and darker for the smallest change that passes, and shows you the result rather than leaving you to guess.

Around one man in twelve and one woman in two hundred has some form of colour-vision deficiency. The simulation strip shows your colour as it appears with each of the common kinds, so you can check that two colours in a palette stay tellable apart rather than collapsing into each other.

• Protanopia and deuteranopia — the red–green types, and by far the most common. Reds darken and greens and reds converge, which is why a red/green pass-fail indicator is the classic accessibility failure.
• Tritanopia — rare, affecting the blue–yellow axis. Blues and greens converge and yellows can appear pink.
• No colour vision — rarer still, and a useful worst case: if a design works in the greyscale row, it works for everyone.

The simulation models complete absence of one cone type. Partial deficiency is more common and sits somewhere between the simulated view and typical vision — so treat a pair that only just survives the simulation as a pair worth changing.

Our free color converter tools help you convert between different color formats quickly and easily. Conversions are exact round trips, so HEX, RGB, HSL and CMYK all describe the same colour.

Available Color Converters:

• RGB to HEX: Convert RGB color values to hexadecimal format
• HEX to RGB: Convert hexadecimal color codes to RGB values
• RGB to HSL: Convert RGB color values to HSL format
• HSL to RGB: Convert HSL color values to RGB format
• RGB to CMYK: Convert RGB color values to CMYK format
• Color Picker: Interactive color picker with real-time conversion

Simply select the converter you need from the options above and start converting instantly.

Use color converters when converting colors between formats, ensuring color consistency, translating colors for different applications, or working with colors in various contexts.

Ideal Use Cases

• Web Development: Convert colors for CSS and HTML
• Graphic Design: Translate colors between design software
• Print Design: Convert RGB to CMYK for printing
• Color Matching: Ensure consistent colors across platforms
• Design Systems: Maintain color consistency in design systems
• Modernising a palette: Move an existing stylesheet from HEX to OKLCH in one pass

Understanding these facts helps you make informed color conversion decisions.

Key Statistics

• RGB is additive color model for digital displays
• CMYK is subtractive color model for print
• HEX is a shorthand representation of RGB
• HSL provides more intuitive color manipulation
• Conversion between RGB, HEX, HSL, HWB and HSV is exact and reversible
• CSS defines 148 colour keywords, counting both the gray and grey spellings
• A standard sRGB screen shows about 16.7 million colours; LAB and OKLAB describe far more than that

Follow these guidelines to achieve optimal color conversion results.

Quality Considerations

• Verify converted colors match your design specifications
• Test colors on target medium (screen or print)
• Consider color gamut differences between formats
• Use appropriate format for your use case
• Double-check conversions for critical colors
• Build palettes in OKLCH so lightness steps look even, then convert to HEX if you need older support

When Not to Convert

• Don't convert if target format already supports your color
• Avoid converting for colors outside format gamut without verification
• If color accuracy is critical, test on actual medium
• Don't convert for formats not supported by target platform
• Don't convert a colour name inside prose — leave keyword matching off for plain text

CMYK values use the standard device-independent formula and are not colour-managed, so a press with an ICC profile will differ — treat them as a starting point. Colours outside sRGB are shown as the closest sRGB equivalent and labelled. cmyk() and hsv() are conveniences this tool provides and are not part of CSS, so a browser will not accept them in a stylesheet. Colour-vision simulation models complete dichromacy, not partial deficiency. Everything runs on your device and needs a current browser.

Every conversion runs on your device — nothing you type is uploaded. A single colour resolves into all twelve formats in well under a millisecond, and a stylesheet of 200,000 colours is rewritten in about a third of a second.

• RGB to HEX
• HEX to RGB
• RGB to HSL
• HSL to RGB
• RGB to CMYK
• Color picker
• Palette from an image
• Image colour analyzer
• Colour grading
• Time & date tools
• Text splitter
• JSON formatter
• Image converter
• Base64 encoder