Pick colors and instantly convert between HEX, RGB, HSL and CSS formats. Includes palette generator and contrast checker.
Generated Palette
Named Colors
Recent Colors
🎨
Instant conversion
Pick any color and instantly see HEX, RGB, HSL and CSS formats side by side.
🎭
Palette generator
Generate harmonious color palettes — analogous, complementary, triadic, shades and tints.
♿
Contrast checker
WCAG contrast ratio checker ensures your text meets accessibility standards.
Frequently Asked Questions
What color formats does the picker support?
The color picker supports HEX (#RRGGBB), RGB (rgb(255,0,0)), HSL (hsl(0,100%,50%)), and HSB/HSV values. You can input a value in any format and the tool will convert it to all other formats simultaneously.
How do I find the HEX code for a color I can see on screen?
Use your operating system's built-in color picker — Digital Color Meter on macOS or PowerToys Color Picker on Windows — to sample any pixel on your screen, then paste the HEX value into this tool to convert it or explore similar shades.
Can I use this tool to check color accessibility contrast ratios?
For full contrast ratio checking against WCAG AA and AAA standards, use our dedicated Color Contrast Checker tool. The HEX Color Picker focuses on color format conversion and visual color selection.
What is the difference between HEX and RGB?
HEX is a 6-digit hexadecimal representation of a color (e.g. #FF5733). RGB uses three decimal values for Red, Green and Blue (e.g. rgb(255, 87, 51)). Both represent the same colors — HEX is more compact and common in CSS, while RGB is more readable.
What is HSL?
HSL stands for Hue, Saturation, Lightness. Hue is the color angle (0-360°), saturation is the intensity (0-100%), and lightness is how light or dark (0-100%). HSL is often easier to work with programmatically when creating color variations.
What is WCAG contrast ratio?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios for readable text. Level AA requires 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1. Our tool checks your selected color against white and black backgrounds.
🛡️
Your IP address and DNS queries are visible to your ISP.Protect your privacy with a trusted VPN — tested and recommended by Anonymiz.
The same colour can be written in several ways. This picker converts between them, gives you CSS-ready values, builds palettes and checks contrast.
HEX, like #00D4FF, is three pairs of hexadecimal digits for red, green and blue. It is the most common format in CSS and design tools, and a fourth pair, as in #00D4FF80, sets transparency.
RGB, like rgb(0 212 255), gives the same three channels as numbers from 0 to 255.
HSL, like hsl(190 100% 50%), describes hue (an angle on the colour wheel), saturation and lightness. It is the easiest format for making a colour lighter, darker or softer while keeping the same hue.
Building a palette
Start with one brand colour and create lighter and darker shades by changing only the lightness in HSL.
Complementary colours sit opposite each other on the wheel, 180 degrees apart, and work well for accents and buttons.
Tint your greys slightly toward the brand hue instead of using pure grey; the palette feels more consistent.
Keep it small. One main colour, one accent and a range of neutrals cover most designs.
Check readability
A colour that looks good can still be hard to read as text. Test every text and background pair with the colour contrast checker; WCAG AA asks for at least 4.5:1 for normal text.