ColorFinderscolour instruments

Color code converter

Color code converter

Paste a colour in any notation and get every other one, plus code ready for the platform you are working in.

#3498db

Hex, rgb, rgba, hsl, hsla, hsv, hsb, or a CSS colour keyword.

Try

Every notation

  • HEX#3498db
  • RGBrgb(52, 152, 219)
  • RGBArgba(52, 152, 219, 1)
  • HSLhsl(204, 70%, 53%)
  • HSLAhsla(204, 70%, 53%, 1)
  • HSVhsv(204, 76%, 86%)
  • CMYKcmyk(76%, 31%, 0%, 14%)approx
  • LABlab(60.16 -6.1 -42.23)approx
  • CSSrgb(52 152 219)

Closest CSS keyword: steelblue approximate: #4682b4 is 12.81 ΔE away, so it is not the same colour

Ready to paste

The same colour written the way each platform expects it.

  • CSS custom property
    --brand: #3498db;
  • CSS declaration
    color: rgb(52 152 219);
  • Sass variable
    $brand: #3498db;
  • Tailwind arbitrary value
    bg-[#3498db]
  • SwiftUI
    Color(red: 0.204, green: 0.596, blue: 0.859)
  • Android XML
    <color name="brand">#FF3498DB</color>
  • Flutter
    const Color(0xFF3498DB)
  • JSON
    { "hex": "#3498db", "rgb": [52, 152, 219] }

How the conversions work

Everything starts by parsing what you typed into red, green, blue and alpha. From there each notation is a defined piece of arithmetic, and the interesting part is which ones throw information away.

Hex and RGB

These are the same numbers in different bases. #3498db is rgb(52, 152, 219) because 34 in base sixteen is 52. Nothing is lost in either direction.

HSL and HSV

Both re-describe the same point in colour space using an angle and two percentages. The conversion is reversible in floating point, but the values shown here are rounded so they are readable, which means a round trip can shift a channel by one. If you need to preserve a colour exactly, carry the hex.

CMYK

The standard conversion assumes ink behaves ideally and that no profile is involved. Neither is true on a press. Treat the result as a starting point.

LAB

CIE L*a*b* is designed so that equal numeric distances look like equal perceptual distances. That is what makes it the right space for asking "how different are these two colours", which is how the closest-keyword match on this site is worked out.

Converting a whole palette

This page converts one colour at a time. If you have an image and need a set, extract a palette and export it as CSS variables or JSON. That converts everything at once and keeps the ordering.

Frequently asked questions

What can I paste in?

Hex in three, four, six or eight digits with or without the hash; rgb() and rgba() in comma or space syntax; hsl() and hsla(); hsv() and hsb(); and any of the CSS colour keywords. If a value cannot be parsed with certainty the field says so rather than guessing at what you meant.

Are the conversions lossless?

HEX, RGB and RGBA are the same three bytes written differently, so those are exact. HSL and HSV are exact in principle, but the displayed numbers are rounded to whole degrees and percentages, so converting back can land a unit away. CMYK and LAB are marked approximate for reasons that are printed next to them.

Why is the CMYK value only approximate?

Because a real CMYK number depends on the press, the ink and the paper, all of which are described by an ICC profile. A browser has none of that, so the arithmetic here is the standard uncalibrated conversion. Use it to get into the right region, then confirm in a colour-managed application.

Which code snippet should I use?

Whichever matches your platform. The CSS custom property is the usual choice for the web; the Android and Flutter forms put alpha first as those platforms expect; the SwiftUI form uses 0-to-1 floats. Each one is complete and can be pasted directly.

Read the guide

  • How to use color codes in CSSEvery way CSS accepts a colour, why custom properties beat repeating hex codes, and the relative-colour syntax that replaces most of your Sass functions.
  • HEX vs RGB vs HSLThree ways of writing the same colour. What each notation is good at, and when to reach for which.