Color formats
How to pick a color
Pick a color visually or enter an exact value, then copy the representation your project uses. HEX, RGB, and HSL describe the same sRGB color in different ways.
Open the color pickerChoose visually or enter an exact color
A visual picker is useful when exploring. An exact value is better when matching a brand, design token, or existing CSS rule. After choosing, inspect the swatch on the same background where it will be used.
Browser color fields typically select opaque colors. If you need transparency, set alpha separately and preview the composited result, because a translucent color looks different over white, gray, or an image.
Choose the right color format
| Format | Example | Best when |
|---|---|---|
| HEX | #336699 | You want a compact CSS or design value |
| RGB | rgb(51, 102, 153) | You work directly with red, green, and blue channels |
| HSL | hsl(210 50% 40%) | You want to reason about hue, saturation, and lightness |
Changing the notation does not improve color accuracy. These formats still describe sRGB. HSL can be easier for deliberate variations, while HEX is often easier to scan and share.
Understand alpha and opacity
Alpha ranges from 0 for fully transparent to 1 for fully opaque. In eight-digit HEX, the final two digits store alpha. For example, #33669980 uses approximately 50% opacity.
Alpha has 256 discrete byte values, so a decimal may be rounded. A value of 0.5 becomes hexadecimal 80, which represents about 0.502. Keep the background in mind when evaluating the visual result or checking contrast.
Check the color before using it
- Copy the exact value instead of estimating it from the screen.
- Check light and dark contexts if the interface supports both.
- Test text contrast against its final background.
- Give color tokens a purpose-based name.
- Do not use hue as the only way to communicate meaning.
Pick and convert with ToolPixels
The free Color Picker accepts 3, 4, 6, or 8-digit HEX, keeps an opacity field in sync with alpha digits, and displays copyable HEX, RGB, and HSL values.