Color Picker & Converter

The three formats

• HEX — a 6-digit code representing red, green, and blue in base 16; the most common format in CSS and design tools
• RGB — the same red/green/blue values written as three numbers from 0-255
• HSL — hue (position on the color wheel, 0-360°), saturation, and lightness (both 0-100%); often more intuitive for adjusting a color's shade or brightness

How the conversion works

A hex code is three pairs of base-16 digits, so reading each pair as a number gives red, green and blue from 0 to 255. For HSL, those values are scaled to 0–1. Lightness is the average of the largest and smallest channel, saturation measures how far apart they are, and hue is an angle on the color wheel set by which channel is largest. Results are rounded to whole numbers.

Worked example

The default blue, #3B82F6, splits into 3B, 82 and F6, which are 59, 130 and 246 in decimal, so it is rgb(59, 130, 246). Its brightest channel is blue and its darkest is red, which puts the hue at 217° on the wheel, with 91% saturation and 60% lightness: hsl(217, 91%, 60%).

• #FF0000 is rgb(255, 0, 0) and hsl(0, 100%, 50%)
• #00FF00 is rgb(0, 255, 0) and hsl(120, 100%, 50%)
• #0000FF is rgb(0, 0, 255) and hsl(240, 100%, 50%)
• #808080 is rgb(128, 128, 128) and hsl(0, 0%, 50%)

What it doesn't do

Only full six-digit hex codes are accepted, so shorthand like #FFF needs to be written as #FFFFFF. There is no transparency, no color names, and no CMYK for print. Because HSL is rounded, converting back from it can differ by a unit or two. Everything is computed on your device as you type.

More conversions to check by hand

• #FFA500, the standard orange, is rgb(255, 165, 0) and hsl(39, 100%, 50%)
• #7C3AED, a violet, is rgb(124, 58, 237) and hsl(262, 83%, 58%)
• #1E293B, a dark slate, is rgb(30, 41, 59) and hsl(217, 33%, 17%)
• #000000 is hsl(0, 0%, 0%) and #FFFFFF is hsl(0, 0%, 100%)

Black, white and every gray have no saturation, so the hue shown for them is 0, which carries no meaning. The results can be pasted straight into a stylesheet, for example color: #FFA500; or color: rgb(255 165 0); or color: hsl(39 100% 50%); and all three draw the same orange, give or take one unit of rounding in the HSL form.

Input rules

The leading # is optional and capitals do not matter, so 3b82f6 gives the same answer as #3B82F6. A code with a trailing space, five digits, or the three-digit shorthand #FFF is rejected with the message "Enter a valid 6-digit hex color, like #3B82F6." The tool goes from hex to RGB and HSL only. It does not take an RGB or HSL value and give back a hex code, so for that direction, compute each channel in base 16 by hand.