DevTools Hub

RGB ↔ Hex Converter

Convert between hex, RGB, HSL, and CSS color names, with contrast checks.

Runs locally
InputRGB values (0–255)
OutputEvery notation
Ready
  • Hex#6366f1
  • RGBrgb(99, 102, 241)
  • HSLhsl(239, 84%, 67%)

WCAG contrast

  • On white4.47:1AA Large
  • On black4.70:1AA
Status
Color converted locally.

How it works

A hex color code is the same three RGB channels written in base 16. Each channel runs from 0 to 255, which is exactly two hex digits, so rgb(37, 99, 235) becomes #2563eb: 37 is 0x25, 99 is 0x63, and 235 is 0xeb.

Both directions work, and the input side accepts any CSS color: hex with or without the leading # in 3, 4, 6, or 8 digits, rgb() and rgba() in comma or space syntax, hsl() and hsla() with deg, rad, grad, or turn hues, and all 148 CSS color names. Hex, RGB, and HSL are written out together, so you can copy whichever notation the stylesheet needs.

RGB channels outside 0-255 are clamped and decimals are rounded, so a value pasted straight out of a design tool still produces a valid code. An alpha channel is carried through to #RRGGBBAA, rgba(), and hsla().

Each color is also scored against white and black using the WCAG 2.1 contrast formula, with the AA and AAA thresholds marked, so you can tell at a glance whether text in that color will be readable.

Frequently asked questions

How do I convert RGB to hex by hand?
Convert each channel to base 16 and pad it to two digits: 37 becomes 25, 99 becomes 63, 235 becomes eb. Join them behind a hash and you get #2563eb.
What does the three-digit shorthand mean?
Each digit is repeated, so #fff is #ffffff and #25b is #2255bb. Only colors whose channel pairs are identical can be written this way.
Does it support eight-digit hex with alpha (#RRGGBBAA)?
Yes. Four- and eight-digit hex is parsed, the alpha slider sets it in the other direction, and any color with alpha below 1 is written as #RRGGBBAA, rgba(), and hsla() instead of the opaque forms.
Is a hex color code case sensitive?
No. #2563EB and #2563eb are the same color. Input in either case is accepted, and the converter outputs lowercase.
What contrast ratio does text need to be readable?
WCAG 2.1 asks for at least 4.5:1 for body text and 3:1 for large text, which is 18pt or 14pt bold. The stricter AAA level asks for 7:1. Both ratios against white and black are shown for every color.