Skip to content
Allin
Sign up · Sign in

Color converter

Convert a colour to HEX, RGB, HSL, HSV, CMYK, LAB and OKLCH, with contrast.

Related tools

All Colours & CSS tools →
Favicon generatorCreate a letter favicon with custom colors and download it as PNG.Image converterConvert your images to PNG, JPG, WebP, AVIF, BMP, GIF, TIFF or ICO, in one batch and without uploading anything.Color Contrast CheckerWCAG contrast ratio between text and background, with AA/AAA pass-fail and a live preview.Color InverterInvert a colour (255 − RGB) or take its complement, in HEX/RGB/HSL/CMYK with the contrast between them.Color Scheme GeneratorDerive complementary, analogous, triadic, tetradic, split and monochromatic schemes from a base colour.Image Color PickerLoad an image, click to sample any pixel and extract a dominant palette, with HEX and RGB for each swatch.

This free color converter turns any color between HEX, RGB and HSL instantly in your browser. Enter a value in one format and read it in all the others, ready to paste into CSS, a design tool or your code. It's perfect for matching brand colors, building palettes and tweaking shades without guesswork.

How to use it

  1. Enter a color as HEX, RGB or HSL.
  2. Read the equivalent values in every other format.
  3. Copy the format you need into your project.

Frequently asked questions

How do I convert HEX to RGB?

A HEX color like #4287f5 is three pairs — red (42), green (87), blue (f5) — each read as a hex number from 0–255. This tool does the conversion for you instantly.

What is HSL?

HSL stands for Hue, Saturation and Lightness. It's often easier than RGB for tweaking a color — raise lightness for a tint, lower saturation to mute it, shift hue to change the color.

What's the difference between HEX and RGB?

They describe the same color — HEX is a compact base-16 notation (#ff0000) while RGB lists the channels as decimals (rgb(255,0,0)). Both are fully supported in CSS.

Can I use these values in CSS?

Yes. HEX, rgb() and hsl() are all valid CSS color values — copy whichever fits your stylesheet or design system.

What is Color converter?

Convert a colour to HEX, RGB, HSL, HSV, CMYK, LAB and OKLCH, with contrast.

When would I actually use this?

Moving a colour between a design tool and a stylesheet, building a palette around one brand colour, and checking text will be readable on it.

What is the most common mistake?

Judging contrast by eye. Two colours that look distinct on a bright monitor can fail the accessibility ratio outright, and the ratio is the thing an audit will measure.

How is Color converter different from Color Contrast Checker?

They sit next to each other but answer different questions: Color Contrast Checker is the one to open when you need it to wCAG contrast ratio between text and background, with AA/AAA pass-fail and a live preview. Pick whichever matches what you're starting from — both are free.

Is there a tool for the next step?

Color Inverter is the closest one after this: Invert a colour (255 − RGB) or take its complement, in HEX/RGB/HSL/CMYK with the contrast between them.

What else is worth having open alongside it?

Color Scheme Generator and Image Color Picker — they come up in the same task often enough to be worth a second tab.

Further reading

All guides →
How-toHEX vs RGB: How to Read and Convert ColoursHEX and RGB are two notations for the same colours. Here's how to read each, convert between them, and add transparency.ExplainerContrast Ratio: How WCAG Actually Computes ItThe WCAG ratio is (L1 + 0.05) ÷ (L2 + 0.05), and L is relative luminance, not brightness. Green carries 71.52% of it and blue 7.22%, which is why pure blue on white passes at 8.59:1 while mid grey fails at 3.95:1. Here is the whole computation, run end to end.ExplainerGradients, Banding, and Why the Middle Looks MuddyInterpolating in sRGB averages gamma-encoded numbers, so the midpoint of red to green is #808000 when the half-light answer is #bcbc00 — 57.2% too little light. Banding is a separate arithmetic problem: 8 bits give 256 steps, and a dark gradient may have only 28 of them. Here is both, computed.ExplainerColour Schemes Are Geometry on a Wheel — and the Wheel Is WrongComplementary, triadic, analogous and split-complementary are just rotations: add 180°, 120°, 30° or 150° to a hue. The arithmetic is trivial. The problem is that the HSL hue circle is not perceptually uniform — yellow and blue at the same HSL lightness differ in luminance by 12.85 times — so a generated palette has to be contrast-checked afterwards.GuideWhat a Minifier Can Remove, and What It Must NotMinification has to preserve meaning, and the interesting part is the whitespace that carries meaning: the descendant combinator, the spaces inside calc(), the gap between two inline elements. Measured here on real files, including how much brotli was going to save you anyway.GuideBeautify or Minify: What Each Is For, and What It Does to the WeightFour real stylesheets run through the minifier, measured raw and after gzip. Stripping every space saved 48, 103, 104 and 147 compressed bytes; stripping comments saved 57, 1 358, 2 420 and 1 042. Plus the five inputs this minifier breaks.