LocalDevTools

Color Converter

Paste a color in any common format, or pick one, and get every other format ready to copy, plus its contrast ratio against white and black text.

Runs entirely in your browser. Your input is never uploaded or stored on a server.

How to convert a color

  1. Paste a color into the box. HEX (#1e90ff, #fff, #1e90ff80), rgb(), rgba(), hsl(), hsla(), hsv() and CSS color names such as rebeccapurple all work. Both the comma syntax and the modern space syntax (rgb(30 144 255 / 50%)) are accepted.
  2. Or click the picker and choose a color visually.
  3. Every other format updates instantly. Click Copy next to the one you need.

Examples

#1e90ff              →  rgb(30, 144, 255)   hsl(209.6, 100%, 55.9%)
rgb(255 99 71 / 0.5) →  #ff634780           (tomato at 50% opacity)
hsl(0, 0%, 20%)      →  #333333

Which format should I use?

HEX is the most compact and is what design tools usually export. RGB maps directly to how screens mix light. HSL is easier to reason about when you want a lighter or darker shade of the same hue: keep the hue, change the lightness. OKLCH is a newer CSS format (supported in all current browsers) where equal steps in lightness look equal to the eye, which makes it a good choice for design systems and color palettes.

CMYK here is a simple mathematical conversion. Real print output depends on the printer's color profile, so treat it as a starting point and confirm with your print shop.

Contrast and accessibility

The contrast ratios use the WCAG 2.x formula. Normal body text needs at least 4.5:1 to pass level AA and 7:1 for AAA. Large text (about 24px, or 19px bold) needs 3:1. If your brand color fails on white, try a darker shade by lowering the HSL lightness.

Frequently asked questions

How do I convert HEX to RGB by hand?

Split the six hex digits into three pairs and convert each pair from base 16 to base 10. For #1e90ff: 1e = 30, 90 = 144, ff = 255, so the result is rgb(30, 144, 255).

What do the last two digits in an 8-digit HEX color mean?

They are the alpha (opacity) channel. 00 is fully transparent and ff is fully opaque, so 80 is about 50%. Note that Android uses the ARGB order, with alpha first.

What is the difference between HSL and HSV (HSB)?

Both use hue and saturation, but HSL uses lightness, where 100% is always white, while HSV uses value (brightness), where 100% is the most vivid version of the color. Photoshop and Figma pickers use HSB; CSS uses HSL.

Why is the converted HSL slightly different from what I typed?

RGB channels are whole numbers from 0 to 255, so converting HSL to RGB and back can shift values by a fraction of a percent. The color on screen is the same.

Is my color data sent anywhere?

No. All conversion happens in your browser with JavaScript.

Related tools

Last updated: