Design · Color converter

HEX to RGB

Type or paste a hex code – the RGB value (and HSL, OKLCH …) appears below, ready to copy.

/color

Any CSS color

Adjust

OKLCH HSL RGB

Shades – same hue, OKLCH lightness steps · click to use

WCAG contrast

Text

Background

Normal text – the quick brown fox jumps over the lazy dog.

Large text – 24 px bold

Button / icon outline

How the conversion works

A hex color is three bytes written in base 16: #RRGGBB. Each pair is one channel from 00 (0) to ff (255). For #3b82f6:

3b → 3×16 + 11 =  59   red
82 → 8×16 +  2 = 130   green
f6 → 15×16 + 6 = 246   blue
→ rgb(59 130 246)

Short hex doubles each digit: #abc = #aabbcc. Eight digits add alpha: in #3b82f680 the last pair 80 = 128 / 255 ≈ 50 % opacity, written in CSS as rgb(59 130 246 / 50%).

In code

// JavaScript
const hex = '3b82f6';
const [r, g, b] = [0, 2, 4].map(i => parseInt(hex.slice(i, i + 2), 16));

# Python
tuple(int('3b82f6'[i:i+2], 16) for i in (0, 2, 4))

Questions

rgb() or rgba()?

Both work in all current browsers. Modern CSS writes alpha inside rgb() with a slash: rgb(59 130 246 / 50%); rgba(59, 130, 246, 0.5) is the older, still valid form.

Can I convert RGB back to hex?

Yes – paste rgb(59, 130, 246) or any other CSS color into the same field; every format updates.

Is the color readable as text?

Check it in the WCAG contrast panel next to the formats, or open the contrast checker page.

▸ About this tool

About the Color Converter & Contrast Checker

Introduction

The same color can be written in many ways – #3f6b0a, rgb(63 107 10), hsl(87 83% 23%) or oklch(47.7% 0.129 132.5) – and every tool, framework and design file seems to want a different one. This converter reads any CSS color and gives you all common formats at once, lets you fine-tune it with sliders, builds a matching set of shades, and checks whether text in that color is readable according to the WCAG accessibility guidelines.

How to use it

Type or paste a color in any CSS syntax – hex, rgb(), hsl(), hwb(), lab(), oklch() or a name like rebeccapurple. Click the swatch for your system color picker, or use Pick from screen (Chrome and Edge) to grab a color from any window.
Adjust it with sliders in OKLCH, HSL or RGB; the tracks show what each change will look like. Every format on the right updates instantly and has a copy button.
Click a shade (50–950, like Tailwind CSS palettes) to jump to a lighter or darker version of the same hue.
In WCAG contrast, set the background. The ratio, the pass/fail result for every level and a live preview update immediately. If the contrast is too low, one click applies the closest text color that passes AA or AAA.

Short links: develzone.org/color, /hex2rgb, /oklch and /contrast. The address bar always holds the current colors, so a link shares exactly what you see. Pasting a color into the search box on the home page opens it here.

Which format should I use?

HEX – compact and universal: design tools, brand guides, older code.
RGB – how screens mix light; needed for canvas, image processing and many APIs.
HSL – hue, saturation, lightness; intuitive, but its "lightness" is not what the eye sees: yellow and blue at 50 % look very different.
OKLCH – lightness, chroma, hue in a perceptual color space (Björn Ottosson, 2020). Equal steps look equal, so changing only the hue keeps the same visual brightness – ideal for design systems, dark modes and generated palettes. It is supported in all modern browsers and used by Tailwind CSS v4. OKLCH can also describe colors beyond sRGB that wide-gamut (Display P3) screens can show; the tool warns you when that happens and shows the closest sRGB fallback.
LAB / OKLAB – the color spaces behind color-difference calculations and smooth gradients.

WCAG contrast explained

The Web Content Accessibility Guidelines (WCAG 2.1 / 2.2) measure the contrast ratio between text and background, from 1:1 (identical) to 21:1 (black on white):

AA – at least 4.5:1 for normal text and 3:1 for large text (24 px, or 18.66 px bold). This is the level required by most accessibility laws, including the European Accessibility Act and ADA case law.
AAA – at least 7:1 for normal and 4.5:1 for large text.
Non-text contrast – icons, input borders and focus indicators need 3:1.

The ratio is truncated, never rounded up – 4.499:1 does not pass AA. Semi-transparent text is blended over the background before measuring, because that is the color the reader actually sees.

Privacy

All conversions and checks run in your browser; nothing is sent to a server.

Interesting facts

CSS knows 148 named colors. rebeccapurple (#663399) was added in 2014 in memory of Rebecca Meyer, daughter of CSS pioneer Eric Meyer.
About 1 in 12 men and 1 in 200 women have a color-vision deficiency – one more reason never to rely on color alone and to keep contrast high.
Need to embed an image in CSS instead of a color? Try the Image to Base64 converter.