ToolLaunchpadHow to use the color converter
Enter a color in the Color value field or choose one with the picker. All formats update instantly, and each has its own copy button. The field accepts:
- HEX in 3, 4, 6 or 8 digits, with or without
#:#f80,ff8000,#ff800080 - RGB and RGBA, with commas or the modern space syntax:
rgb(255, 128, 0),rgb(255 128 0 / 50%), percentages too - HSL and HSLA:
hsl(30, 100%, 50%),hsl(30deg 100% 50% / 0.5) - CSS color names such as
rebeccapurpleortomato
The Alpha slider sets opacity from 0 (transparent) to 1 (opaque). The preview swatch is drawn over a checkerboard so you can see transparency. Below the outputs you see the contrast ratio of the color against white and black text, which helps when choosing accessible colors.
Worked example
Orange #ff8000 converts as follows. Each pair of hex digits is one channel from 00 to ff (0 to 255): ff = 255 red, 80 = 128 green, 00 = 0 blue, so the color is rgb(255, 128, 0). For HSL, the largest channel is 1.0 and the smallest is 0, so lightness is their average, 50%. Saturation is 100% because the color is as vivid as it can be at that lightness, and the hue is 30 degrees, between red (0°) and yellow (60°). The result is hsl(30, 100%, 50%).
HEX, RGB or HSL: which should you use?
- HEX is compact and what design tools usually export. It is the same information as RGB, just written in base 16.
- RGB is handy when you calculate colors in code or need alpha in older browsers via
rgba(). - HSL is the easiest to adjust by hand: change lightness for hover states or tints, or keep saturation and lightness and rotate the hue to build a palette.
All three describe colors in the sRGB color space and are supported by every browser. Values are rounded to whole numbers for display, so converting HSL to RGB and back can shift a value by one.
Common mistakes
- Wrong alpha position in 8-digit hex. CSS uses
#RRGGBBAA, with alpha last. Android and some older Windows APIs use#AARRGGBB, with alpha first. - Alpha as 0-255 in rgba(). In CSS the alpha in
rgba()is 0 to 1 (or a percentage), not 0 to 255. - Missing percent signs in HSL.
hsl(30, 100, 50)is invalid in classic CSS syntax; saturation and lightness need%. - Judging contrast by eye. WCAG asks for at least 4.5:1 for normal text. The contrast line shows the actual ratio.
Frequently asked questions
How do I convert HEX to RGB?
Split the six hex digits into three pairs and convert each pair from base 16 to a number from 0 to 255. For #ff8000 that is ff = 255, 80 = 128 and 00 = 0, giving rgb(255, 128, 0).
What is HSL?
HSL describes a color by hue (an angle from 0 to 360 degrees on the color wheel), saturation (how vivid it is) and lightness (from black at 0% to white at 100%). It is easier to adjust by hand than RGB.
What does the alpha value mean?
Alpha is opacity. 1 is fully opaque, 0 is fully transparent and 0.5 lets half of the background show through. In 8-digit CSS hex colors it is the last pair of digits, where 80 is roughly 50 percent.
Why does a converted value differ by one from what I expected?
HSL values are usually rounded to whole numbers, and RGB channels can only be whole numbers from 0 to 255. Rounding at each step can shift a value by one. The color looks the same.
Can I enter color names like tomato?
Yes. All CSS named colors are accepted, from black and white to rebeccapurple. The tool uses your browser's own CSS color parser to resolve them.
What contrast ratio do I need for readable text?
WCAG level AA requires at least 4.5 to 1 for normal text and 3 to 1 for large text. Level AAA asks for 7 to 1. The tool shows the ratio against white and against black.