What Is a Hex Color Code?
How hex codes work and how to read them.
Read article →Color Picker
Pick a color and get HEX, RGB, and HSL values instantly.
HEX#01696F
RGBrgb(1, 105, 111)
HSLhsl(183, 98%, 22%)
Contrast preview
White text
Ratio 6.46:1 ✓ AA
Black text
Ratio 3.25:1 ~ Large only
What this color picker gives you
Pick any color and instantly see its value in three formats: HEX (used in CSS and most design tools), RGB (red, green, blue as numbers from 0 to 255), and HSL (hue, saturation, lightness — the most intuitive format for adjusting colors).
Contrast checking
The contrast preview shows how readable white and black text would be on your chosen color. A ratio of 4.5:1 or higher meets WCAG Level AA for normal text — the standard required for accessible web design.
Frequently asked questions
- What is the difference between HEX, RGB, and HSL?
- All three describe the same colors differently. HEX is a 6-digit shorthand used in CSS and design tools. RGB breaks a color into red, green, and blue components (0–255 each). HSL describes hue (0–360°), saturation (%), and lightness (%), which is more intuitive for humans.
- What is a good contrast ratio for accessible text?
- WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text to meet Level AA accessibility. A ratio of 7:1 or higher meets the stricter Level AAA standard.
- How do I use a color picker in CSS?
- Copy the HEX or RGB value from this tool and use it directly in your CSS — for example: color: #01696f; or background: rgb(1, 105, 111);. For dynamic theming, CSS custom properties (variables) let you define a color once and use it anywhere.