Developer Runs locally Ready to use Built-in examples No tracking

Color Converter

Convert between HEX, RGB and HSL color formats with live preview and WCAG contrast suggestions.

The colour converter moves between HEX, RGB and HSL, for writing a CSS theme, matching design annotations, or turning a colour value copied out of a design tool into something usable in code. HEX and RGB are two representations of the same colour, both based on sRGB, while HSL describes hue, saturation and lightness — far more direct when adjusting the light and dark of one hue.

What is easily forgotten while choosing colours is readability: the contrast between text and background has to meet the WCAG minimum (4.5:1 for body text, 3:1 for large text), or it will be difficult to read in dim light or on a poor screen. This tool computes contrast from relative luminance and suggests black or white text, which is also one of the accessibility checks many platforms apply.

—
—
—
—

How to use

  1. Enter the colour as HEX, RGB or HSL.
  2. Read the other two representations.
  3. Check the preview and the contrast ratio.
  4. Take the suggested black or white text for the background.

How it works

Accepted input formats

Paste any format into the box: #rrggbb, the short #rgb, or rgb(r, g, b).

The three output formats

All three formats (HEX/RGB/HSL) output at once, each line individually copyable, with a live swatch preview.

Contrast and accessibility standards

Contrast is computed from WCAG relative luminance: ≥ 4.5:1 meets the body-text accessibility bar, and the tool recommends a higher-contrast text color otherwise.

Code example

CSS Using color values as design tokens 

:root {
  --brand: #336699;          /* HEX */
  --brand-rgb: 51 102 153;   /* handy for compositing with alpha */
}

.btn {
  background: rgb(var(--brand-rgb));
  color: rgb(255 255 255 / 0.9);
}

JavaScript Converting between HEX and RGB 

// HEX to RGB
const toRgb = (hex) => {
  const h = hex.replace("#", "");
  const v = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
  return [0, 2, 4].map((i) => parseInt(v.slice(i, i + 2), 16));
};
toRgb("#369"); // [51, 102, 153]

// RGB to HEX
const toHex = (r, g, b) =>
  "#" + [r, g, b].map((n) => n.toString(16).padStart(2, "0")).join("");
toHex(51, 102, 153); // "#336699"

FAQ

Are HEX and rgb() the same thing?

Yes. #336699 and rgb(51, 102, 153) are the exact same color (0x33=51, 0x66=102, 0x99=153). HEX is compact for design comps; rgb() extends to alpha with rgba() — pick by context.

What is HSL good for?

HSL (hue/saturation/lightness) matches human intuition: to build a same-hue button family, fix H and S and vary L only. #369 is hsl(210, 50%, 40%); pushing L to 60% gives the light-blue variant — far easier than juggling RGB numbers.

What contrast level passes?

WCAG 2.1: body text needs ≥ 4.5:1 (AA), large text ≥ 3:1. Below 4.5:1 the tool recommends whichever of black or white text reads better.

What does the three-digit #369 mean?

It's shorthand for six digits, each digit doubled: #369 equals #336699 (R = 0x33, G = 0x66, B = 0x99). Shorthand only works when each channel's two digits repeat (#AABBCC → #ABC); #ABCDEF can't shorten.

How do I write a color with transparency?

Two common forms: #RRGGBBAA (last two digits are alpha, FF fully opaque) or rgba(r, g, b, a) with a in 0–1. For example #33669980 is roughly 50% transparent; modern CSS supports the 8-digit hex form too.

How do HEX and RGB values convert?

HEX pairs off into R, G, B; convert each pair from hex to decimal: #336699 → (0x33, 0x66, 0x99) = (51, 102, 153). Reversed, decimal becomes two-digit hex and concatenates. This tool handles both directions automatically.

Which standard demands 4.5:1 contrast?

WCAG 2.1: normal-size body text needs at least 4.5:1 (AA), large text (18pt+ or 14pt bold) relaxes to 3:1, and AAA demands 7:1. For accessible design, body and button text should meet the appropriate level.