TodayTools

Color converter

Match your logo colour across the website, print and visiting cards.

PrivateNo uploadsRuns in your browser

Donate
Formats
HEX#21dbaa
RGBrgb(33, 219, 170)
HSLhsl(164 74% 49%)
HWBhwb(164 13% 14%)
OKLCHoklch(79.4% 0.155 168.6)
OKLABoklab(79.4% -0.152 0.031)
CSS vars33, 219, 170
Integer2218922
SwiftUIColor(red: 0.129, green: 0.859, blue: 0.667)
Android0xFF21DBAA

Text contrast

Text in your colour. AA or AAA means it is easy to read.

  • Sample1.78:1Failon white
  • Sample11.78:1AAAon black
  • Sample10.74:1AAAvs #0b0f19

Nearest Tailwind

Tints and shades

Complementary

Analogous

Triadic

Split

Tetradic

Bottles of colourful paint on a table

For the perfect shade

The same colour on the wall, the web and the card.

The shop sign. Match the paint to the website colour.

BeforeColours that never match

With sdevEvery code for the same shade

  • A hand painting blue strokes on paper

    The art class

    Find the code of your favourite blue.

  • A man painting with bright colours

    The brand colour

    One shade across print and screen.

How to convert a colour

  1. Enter a colour

    Type or paste any CSS colour into the box, or click the small swatch on the left to open a colour picker. The field turns red when the value cannot be read.

  2. Read the formats

    Every format is listed in the table with its own copy button. On the right you get the contrast ratio against white, black and a second colour of your choice, plus the three closest Tailwind shades.

  3. Explore the palette

    Below the table are eleven tints and shades and five harmonies built from your colour. Click any swatch to make it the new input and carry on from there.

Good to know

  • Ctrl+C (Cmd+C on a Mac) with nothing selected copies every format at once, one per line.
  • Tints, shades and harmonies are worked out in OKLCH, so the lightness steps look even and rotated hues keep the same perceived brightness.
  • The CSS vars row is the bare r, g, b triple for patterns such as rgb(var(--brand) / 0.5).
  • The Android literal is 0xAARRGGBB with alpha first. Integer is the plain 24-bit RGB value with no alpha, as some APIs and older Android code expect.
  • Named colours resolve through your browser, so anything CSS knows works, including newer names like rebeccapurple.
  • Everything is computed in your browser. Nothing you paste is sent anywhere.

Where people use it

  • Use a brand colour in code

    Get a logo colour as HEX, RGB, HSL or OKLCH for your app or website.

  • Is the text easy to read?

    Check the contrast of text on a background against WCAG rules.

  • Lighter and darker steps

    Make tints and shades of one colour for buttons and hover states.

  • Colours that go well together

    See matching harmony colours for a poster or a slide deck.

  • Colour from a photo

    Pick colours straight out of a picture first.

    Colour palette from a photo

Why this one

It does more than convert: one colour gives you contrast checks, Tailwind matches, tints, shades and harmonies on the same page.

  • HEX, RGB, HSL, HWB, OKLCH and OKLAB together.
  • Contrast check with a clear pass or fail.
  • Finds the nearest Tailwind shade.
  • Works on phones, no sign-up.

What you can change

  • Pick or type a colour
  • Background for contrast
  • Tints, shades and harmonies

People find this page by searching

  • hex to rgb
  • rgb to hex
  • color converter
  • hex to hsl
  • color contrast checker
  • oklch converter
  • tailwind color finder
  • color shades generator
  • color picker online
Cite this tool
  • APA
    sdev.in. (n.d.). Color converter [Web tool]. https://www.sdev.in/tools/color-converter
  • MLA
    "Color converter." sdev.in, https://www.sdev.in/tools/color-converter.
  • Chicago
    sdev.in. "Color converter." https://www.sdev.in/tools/color-converter.
  • BibTeX
    @misc{sdev-color-converter,
  title = {Color converter},
  author = {{sdev.in}},
  howpublished = {\url{https://www.sdev.in/tools/color-converter}},
  note = {Web tool}
}

Questions people ask

Which colour formats can I type in?

Hex with 3, 4, 6 or 8 digits, rgb(), rgba(), hsl(), hsla(), hwb(), oklch(), oklab() and any CSS colour name such as teal or rebeccapurple. Both the modern space-separated syntax and the older comma syntax work, including a slash alpha like rgb(33 219 170 / 0.5).

How is the contrast ratio worked out?

It is the WCAG 2 formula based on relative luminance. 4.5:1 or more passes AA for normal text, 3:1 passes for large text and UI parts, and 7:1 passes AAA. The ratio is shown against white, against black and against the second colour you type.

What does Nearest Tailwind mean?

The three shades in the default Tailwind CSS palette that sit closest to your colour, measured in OKLAB so the distance matches what the eye sees. Click a swatch to load that shade as the input.

Does it handle transparency?

Yes. Alpha from an 8-digit hex or a slash value is kept: it appears as 8-digit hex, as a slash alpha in the rgb, hsl, hwb, oklch and oklab rows, and as the leading byte of the Android literal. The SwiftUI and Integer rows drop it, and the contrast ratio treats the colour as opaque.

Why does my OKLCH colour come back slightly different?

OKLCH can describe colours that sRGB cannot show. Channels that fall outside sRGB are clamped, so a very saturated oklch() value maps to the nearest hex the screen can display.

Donate