Which formats can I paste?

Almost any: #f60, #ff6600, #ff660080, rgb(255 102 0), rgba(255, 102, 0, 0.5), hsl(), hsv(), hwb(), cmyk(), lab(), lch(), oklab(), oklch() and CSS names like “tomato”. Paste into any field.

What is OKLCH and why use it?

OKLCH describes a color by lightness, chroma and hue in a way that matches how we see. Changing only lightness keeps the color looking the same, which makes it great for building shades. Modern browsers support oklch() in CSS.

How is CMYK calculated?

With the simple formula from RGB, without a printer profile. It is a good starting point, but for exact print colors ask your print shop for their profile.

What contrast do I need for text?

WCAG 2 asks for at least 4.5:1 for normal text (AA) and 3:1 for large text and icons. AAA needs 7:1. The “Fix” buttons find the nearest text color that passes.

How are the shades made?

They are built in OKLCH around your color, with lightness close to Tailwind's scale from 50 to 950. Your color takes the step that matches it best (marked with a star).

Is my picture uploaded when I pick a color from it?

No. The picture is opened right in your browser and never leaves your device.

Design & Color

Color Converter

Convert colors between HEX, RGB, HSL, CMYK, LAB and OKLCH, check contrast and build shades.

Color picker

Sliders

R37G99B235

Formats

Paste a color in any format into any field.

#2563EB≈ royalblue

HEX

RGB

HSL

HSV

HWB

CMYK

LAB

LCH

OKLAB

OKLCH

Closest name

Shades

A scale from 50 to 950 built around your color (★). Click a shade to use it.

Harmonies

Complementary

Analogous

Triadic

Split complementary

Square

Monochrome

Contrast checker

Text on your color (or your color as text). WCAG 2 contrast ratio.

Text

Large text

The quick brown fox jumps over the lazy dog

5.17: 1

Normal textAAAAA

Large textAAAAA

Icons & bordersAA

Color blindness

How the color and the text look for people with color vision deficiency.

Code

Ready to paste into your project.

Name

:root {
  --brand: #2563EB;
  --brand-rgb: 37 99 235;
  --brand-oklch: oklch(54.61% 0.2152 262.9);
}

.brand {
  color: var(--brand);
}

How to use

1Pick a color in the square, take it from the screen or from a picture, or paste a code in any format.
2Every format updates at once: HEX, RGB, HSL, HSV, HWB, CMYK, LAB, LCH, OKLAB, OKLCH and the closest CSS color name.
3Fine-tune with the RGB, HSL or OKLCH sliders and set the opacity.
4Use the shades (50–950) and harmonies, check text contrast (WCAG AA/AAA) and see how the color looks with color blindness.
5Copy a format, or ready code for CSS, Tailwind, SCSS, Swift, Android, Flutter or GLSL. The link keeps the color, so you can share it.

FAQ

Which formats can I paste?: Almost any: #f60, #ff6600, #ff660080, rgb(255 102 0), rgba(255, 102, 0, 0.5), hsl(), hsv(), hwb(), cmyk(), lab(), lch(), oklab(), oklch() and CSS names like “tomato”. Paste into any field.
What is OKLCH and why use it?: OKLCH describes a color by lightness, chroma and hue in a way that matches how we see. Changing only lightness keeps the color looking the same, which makes it great for building shades. Modern browsers support oklch() in CSS.
How is CMYK calculated?: With the simple formula from RGB, without a printer profile. It is a good starting point, but for exact print colors ask your print shop for their profile.
What contrast do I need for text?: WCAG 2 asks for at least 4.5:1 for normal text (AA) and 3:1 for large text and icons. AAA needs 7:1. The “Fix” buttons find the nearest text color that passes.
How are the shades made?: They are built in OKLCH around your color, with lightness close to Tailwind's scale from 50 to 950. Your color takes the step that matches it best (marked with a star).
Is my picture uploaded when I pick a color from it?: No. The picture is opened right in your browser and never leaves your device.