Color picker
Complementary color and contrast
WCAG Use CautionComplementary color
Aa Text Preview
Suggested Text ColorWhite text · Contrast 4.43:1White text 4.43:1
Bold text 4.01:1
Color picker
Choose color and convert HEX, RGB, HSL
Browser local processingInputs and files are not uploaded to our serverData processing
Contrast DetectionWCAG AA ≥ 4.5 / AAA ≥ 7
Instructions
Pick a color and get HEX, RGB, HSL values
Use for design, CSS, or consistent brand colors.
1Use color palette to pick colors
2View color values in different formats
3Copy needed format with one click
After completionGet color values ready to paste into design or code.Select a color first
Did this tool solve your problem?Tell us after completing the action, your feedback helps improve tools.
Turn a brand color into values for development
HEX, RGB and HSL can describe the same color. Check which format the destination software expects and compare its preview after pasting.
An example to check
Input and settings
#ff0000Expected result
RGB: 255, 0, 0
HSL: 0°, 100%, 50%The red channel is 255 and the other channels are zero. Hue 0° represents red in HSL. Paste either the HEX or RGB value into CSS and check the browser preview.
Scope and limitations
- Converting values does not guarantee matching appearance across displays or printers. Check the color space and a physical proof for print work.
- An attractive foreground color may still make text hard to read. Use the contrast checker to assess it against the intended background.
Does a result differ from this reference? Share steps without private data. Report a problem