Color Picker & Converter
Pick a color and convert it between HEX, RGB and HSL with a contrast check.
How to use: Pick a colour or type a HEX, RGB or HSL value to see it in every format.
How to use the Color Picker & Converter
Colors on the web are written in several formats, and designers and developers constantly switch between them. This tool converts a color between HEX, RGB and HSL in real time and gives you copy-ready CSS values.
HEX codes such as #1e90ff are six hexadecimal digits for red, green and blue. RGB expresses the same three channels as numbers from 0 to 255. HSL describes a color by hue (the position on the color wheel, 0 to 360 degrees), saturation (how vivid it is) and lightness (how light or dark), which is the most intuitive format for adjusting a shade.
Pick a color with the picker, type a HEX code (three-digit shorthand like #09f works too), or edit any RGB or HSL number; all the other fields update. Press a Copy button to grab the exact CSS string, for example rgb(30, 144, 255).
Below the values you will see the contrast ratio between the color and both white and black text, with a suggestion for the more readable option. For accessible design, WCAG recommends a contrast ratio of at least 4.5 to 1 for normal text. Because HSL values are rounded to whole numbers, converting back and forth may shift a channel by one or two points, which is invisible to the eye.
Frequently asked questions
What does HEX stand for in colors?
It is short for hexadecimal, a base-16 number system. Each pair of digits represents the red, green or blue amount from 00 to FF.
What contrast ratio is accessible?
WCAG asks for at least 4.5:1 for normal text and 3:1 for large text.
Can I enter shorthand HEX like #fff?
Yes. Three-digit codes are expanded automatically, so #09f becomes #0099ff.