Stays in your browser
Color Picker — HEX, RGB & HSL
Free online color picker. Choose a color and convert between HEX, RGB, and HSL for CSS.
Working across colour formats
One colour has several notations, and each exists for a reason. HEX is compact and is what design tools hand over, RGB matches how a display emits light, and HSL matches how people reason about a palette, because you can change lightness without touching hue.
Alpha is where conversions go wrong most often. An eight-digit hex value appends alpha last, as RRGGBBAA, while CSS rgba() takes a fourth argument from 0 to 1. That makes #ffffff80 roughly half-transparent white rather than 80% opaque, because the pair is hexadecimal and 0x80 is 128 of 255.
Two realistic traps remain. Hex is not colour managed, so the same code renders slightly differently across displays, and a colour that looks good in isolation can fail contrast against the text placed on it. Check the pair you actually ship, not the swatch on its own.
FAQ
- Why use a color picker?
- Get exact values for web and design tools without guessing.
- What is HSL?
- HSL describes hue, saturation, and lightness—often easier for adjusting tones.
- Can I copy CSS?
- Yes. Copy hex, rgb(), or hsl() strings in one click.
- How do I convert a HEX colour to RGB?
- Split the six digits into three pairs. #1E90FF becomes 1E, 90 and FF, which are 30, 144 and 255 in decimal. For shorthand such as #1AF, double each digit first, so it becomes #11AAFF before you read the channels.
- What does the alpha value mean?
- It is opacity, from fully transparent to fully opaque. Hex writes it as the last two digits from 00 to FF, while rgb() and hsl() take it as a decimal from 0 to 1 as the fourth argument. A value of 80 in hex is about 0.5, not 0.8.
- Why does my colour look different on another screen?
- Most consumer displays are not calibrated, so the same hex value can render warmer, cooler or at a different brightness. This matters most for brand colour and for text contrast, which is why contrast ratios are checked numerically rather than by eye.