Back to Tools

Color Converter and Palette Generator

Convert between HEX, RGB, HSL and OKLCH, check WCAG contrast and generate palettes

Color Selection

Valid format
Preset colors

This color

#0D5A6B

darkslategrey

White text reads best on this color: 7.80:1

Other color spaces
Computed in your browser

Build

Build

White text passes AA from 500 up; black text down to 400.

#0d5a6b
Target
Notation
@theme {
  --color-darkslategrey-50: #f3fafc;
  --color-darkslategrey-100: #dbf0f5;
  --color-darkslategrey-200: #aedfea;
  --color-darkslategrey-300: #65d3ec;
  --color-darkslategrey-400: #1ab3d5;
  --color-darkslategrey-500: #0d5a6b;
  --color-darkslategrey-600: #0c505f;
  --color-darkslategrey-700: #0b4856;
  --color-darkslategrey-800: #05404d;
  --color-darkslategrey-900: #04343e;
  --color-darkslategrey-950: #032830;
}

Contrast (WCAG)

On white7.80:1

Aa Sample text

Aa Sample text

  • AA (4.5:1)
  • AAA (7:1)
  • AA large (3:1)
  • Icon/border (3:1)
On black2.69:1

Aa Sample text

Aa Sample text

  • AA (4.5:1)
  • AAA (7:1)
  • AA large (3:1)
  • Icon/border (3:1)

Large text means 24px regular, or 18.66px bold and above.

Compare against another backdrop
On your backdrop2.29:1

Aa Sample text

Aa Sample text

  • AA (4.5:1)
  • AAA (7:1)
  • AA large (3:1)
  • Icon/border (3:1)

Color formats — a reference

Every format writes the same color differently. The table below shows one color — #0d5a6b — in all seven notations, so the rows can be compared directly.

FormatCSS syntaxExampleWhen to use it
HEX#RRGGBB[AA]#0d5a6bThe most widely used notation on the web. Each channel is two hexadecimal digits; the eight-digit form carries opacity in the last pair. Short and easy to copy, but hard to picture from the digits alone.
RGBrgb(R G B [/ A])rgb(13 90 107)The notation closest to how a screen works: how much red, green and blue light, from 0 to 255. Usually what you reach for when doing arithmetic on colors in JavaScript. Modern syntax separates the channels with spaces and puts opacity after a slash.
HSLhsl(H S% L% [/ A])hsl(191 78% 24%)Hue (0–360°), saturation and lightness. It matches how people think about colour, so it is convenient for hand-tuning: raise the lightness and the colour washes out, lower it and it deepens. The drawback is that the same lightness looks different at different hues.
OKLCHoklch(L C H [/ A])oklch(0.433 0.073 217)The 2026 standard for design systems. Unlike HSL its lightness is perceptually even: a yellow and a blue at the same L look equally bright to the eye. Tailwind v4 authors its own palette in this notation, which makes it the right choice for token export.
OKLaboklab(L a b [/ A])oklab(0.433 -0.058 -0.045)The rectangular coordinates of OKLCH: L is lightness, a and b are the green↔red and blue↔yellow axes. Used to measure how far apart two colours look — this tool finds the nearest colour name in exactly this space.
LCHlch(L% C H [/ A])lch(35% 22 227)The cylindrical form of CIE Lab, and the generation before OKLCH: the same idea, but lightness is not quite even across some hues. Still seen in older design systems and in print workflows.
Lablab(L% a b [/ A])lab(35% -15 -16)The CIE Lab space, standardised in 1976 and device-independent — the same value means the same colour on any display. It remains the working space for colour comparison and colour-management systems.

The hex conversion is doable by hand: in #0d5a6b the pair 0d is 0×16 + 13 = 13, 5a is 5×16 + 10 = 90, and 6b is 6×16 + 11 = 107. That gives rgb(13 90 107).

Frequently asked questions

Which color formats are supported?

HEX (3, 4, 6 and 8 digits), RGB, HSL, Lab, LCH, OKLab, OKLCH and CSS color names. Modern CSS Color 4 syntax is read too — rgb(255 0 0 / 50%) or hsl(200deg 50% 40%). CMYK is not supported: it depends on a print profile and cannot be computed accurately in a browser.

What does the WCAG contrast check show?

It measures the chosen color against white and against black. WCAG 2.1 asks for 4.5:1 (AA) and 7:1 (AAA) for body text, 3:1 for large text, and 3:1 for icons and borders. A translucent color is composited onto each backdrop first, so the number describes what people actually see. When AA fails, the tool offers the nearest step of your own scale that passes.

Are my colors sent to a server?

No. Every conversion runs in your browser. History and favorites are stored only in localStorage on your own device, and you can clear them at any time.

How do I get the result into my project?

Export the scale as CSS variables, a Tailwind v4 @theme block or SCSS variables, in either HEX or OKLCH notation. You choose the token name, and the snippet is shown in full before you copy it. Gradients come with ready CSS and a Tailwind class.