Color Converter & Palette Generator

Runs in your browserDesign Tools#Color

Convert colors between HEX, RGB, HSL, HSV, CMYK and OKLCH, and build shade scales and harmonies.

Colour

Paste any CSS colour: hex (with or without #), rgb(), hsl(), oklch() or a colour name.

Contrast with white text 4.47:1, with black text 4.70:1.

HEX

RGB

HSL

HSV / HSB

CMYK

OKLCH

Tints and shades

Click a swatch to copy it. Your colour is marked; 50 is the lightest and 950 the darkest.

Colour harmonies

Hues turned around the HSL colour wheel, keeping saturation and lightness. Click a swatch to copy it.

Complementary

Analogous

Triadic

Split-complementary

How to use, limits & privacy

About Color Converter & Palette Generator

Convert a colour between HEX, RGB, HSL, HSV, CMYK and OKLCH, and build a palette from it. Paste a colour in almost any CSS format, or edit any of the six fields, and the others update as you type. You also get the nearest Tailwind CSS colour, contrast with white and black text, a tint and shade scale from 50 to 950, and colour harmonies. Everything runs in your browser.

How to Use

Enter a colour

Type or paste it into the Colour field: a hex code with or without #, rgb(), hsl(), oklch() or a name such as teal. You can also click the colour box to pick one.

Copy the format you need

Click the copy button beside HEX, RGB, HSL, HSV / HSB, CMYK or OKLCH. You can also type into any of these fields to convert from that format.

Build a palette

Under Tints and shades and Colour harmonies, click any swatch to copy its hex code, or click Copy as CSS variables to copy the whole 50–950 scale.

Privacy & Processing

Mode: local
Files Leave Browser: Local tool processing; review details below
Max Input Size: Device memory limits
Account Required: No
Data Stored Locally: Nothing is saved. The colour resets when you reload the page.
Network Processing: Assets or models may require an initial download

Colours are converted in your browser. Nothing is sent to a server.

Rules & Limitations

Reads hex (3, 4, 6 or 8 digits), rgb(), hsl(), hwb(), oklch(), oklab(), hsv(), cmyk(), the 148 CSS colour names and bare numbers such as 99, 102, 241.
CMYK is a simple screen-to-print formula. Printed colours depend on the printer and paper, so check with your printer for exact values.
OKLCH colours outside the sRGB range that most screens show are converted to the closest sRGB colour, and a note tells you when that happens.
Transparency is kept in HEX, RGB, HSL and OKLCH. HSV, CMYK, the palettes and the contrast figures ignore it.
The nearest Tailwind colour comes from the Tailwind CSS v3 default palette.

Top Suggestions

Turning a brand's hex code into RGB or HSL for CSS, or into CMYK for a print shop
Making a 50–950 shade scale for a design system or Tailwind theme
Finding complementary or triadic colours for a poster or social media post
Checking whether white or black text reads better on a colour

Color Converter & Palette Generator FAQ

How do I convert HEX to RGB?

Paste the hex code, such as #6366f1 or just 6366f1, into the Colour field. The RGB field shows rgb(99, 102, 241) straight away, and the copy button beside it copies the value.

How do I convert RGB to HEX?

Paste rgb(99, 102, 241), or only the three numbers, into the Colour field or the RGB field. The HEX field updates as you type. Values with transparency, such as rgba(99, 102, 241, 0.5), give an 8-digit hex code.

What is OKLCH and why use it?

OKLCH describes a colour by lightness, chroma (colourfulness) and hue, and is designed so that equal steps look equally different to the eye. That makes it easier to build even shade scales. Modern browsers support oklch() in CSS, and Tailwind CSS v4 defines its colours with it.

What is the difference between HSL and HSV?

Both use a hue angle and a saturation, but HSL uses lightness, where 100% is always white, while HSV (also called HSB) uses value, where 100% is the brightest form of the colour. CSS supports HSL. HSV is what most design apps such as Photoshop and Figma show in their colour pickers.

How are the tints and shades made?

Your colour is placed at the step whose usual lightness is closest to its own, often 500. The other steps keep its hue, get lighter or darker in even steps in OKLCH, and lose some colourfulness towards the ends, much like the palettes in Tailwind CSS.

Is my colour sent anywhere?

No. Parsing, conversion and palettes are calculated in your browser, and nothing is uploaded or saved.