HEX to RGB Converter
Convert HEX color codes to RGB and HSL and back again, with shorthand #rgb support, invalid-value warnings and a live swatch you can compare against your palette.
Three formats, one color
HEX is six hexadecimal digits for red, green and blue - #0d1117 means red 13, green 17, blue 23 - and the shorthand #abc expands to #aabbcc by doubling each digit. RGB is the same three numbers in decimal. HSL rewrites them as hue, saturation and lightness, which is the format designers reach for when they want "a bit darker" rather than three unrelated channel tweaks: dropping lightness by 10% keeps the hue intact, whereas subtracting 10 from each RGB channel does not scale the same way across the range.
The swatch and the luminance reading are there because conversions can be technically correct and still wrong on screen. A near-black hex passes every syntax check while being invisible against your page background; the suggested-text field applies the WCAG contrast ratio and tells you whether to put white or near-black text on it.
Usage example
A brand guide lists #F0883E and the stylesheet needs rgb() for a gradient. Paste the hex, read off rgb(240, 136, 62), and check the luminance: at 0.36 this is a mid-tone, so dark text on it holds contrast and white does not. Use the shade selector to preview a 25% darker variant for a hover state, copy the result, and move on - all three fields update live, so switching back to hex costs nothing.
Palette work usually ends with a set of related values, and comparing them side by side is where mistakes hide: run the candidate values past the meta tag generator if one of them becomes your theme-color, and use the text diff when a color edit touched more lines than you meant it to.
Frequently asked questions
Do I need the leading hash?
It is optional on input - both 0d1117 and #0d1117 parse - but the output always includes it, since that is what CSS and most design tools expect.
Why does my three-digit hex come back as six digits?
Shorthand expands by doubling each digit: #abc is #aabbcc. The expanded form is shown because it is unambiguous, and both are valid in CSS.
Is the contrast figure a guarantee of accessibility?
It is the WCAG relative luminance and contrast ratio, which is the standard measure - but compliance also depends on font size and weight. Treat a pass as necessary, not sufficient, for small text.