Color Picker
Pick a color and instantly get the HEX, RGB, and HSL values. Includes WCAG contrast ratio checker.
How to use
- Pick a color using the color picker or type a HEX, RGB, or HSL value.
- All formats update automatically — click any Copy button to copy that format.
- Check the WCAG contrast ratios against white and black backgrounds below.
Frequently asked questions
What is a HEX color code?
A HEX color code is a 6-digit hexadecimal value preceded by #, representing a color in the RGB model. Each pair of digits encodes the red, green, and blue components (00–FF). For example, #FF0000 is pure red.
What's the difference between RGB and HSL?
RGB defines color by mixing red, green, and blue light (0–255 each). HSL defines color by hue (0–360°), saturation (0–100%), and lightness (0–100%). HSL is often more intuitive for adjusting colors because you can change brightness or saturation independently.
What is WCAG contrast ratio?
WCAG contrast ratio measures the luminance difference between foreground and background colors. A ratio of 4.5:1 is required for normal text (AA), and 7:1 for enhanced contrast (AAA). Higher ratios mean better readability for users with visual impairments.
How do I convert HEX to RGB?
Split the 6-digit HEX code into three pairs and convert each from hexadecimal to decimal. For example, #3A7BF2 becomes R=58, G=123, B=242. This tool does it automatically — just pick or enter a color.