An online color picker is a free design tool that lets you choose any color and instantly convert it between HEX, RGB and HSL codes. This studio goes further: generate tints and shades palettes with one click, and check contrast ratios against WCAG accessibility standards.
HEX, RGB and HSL codes
Tints and shades palette
Click any swatch to copy its HEX code.
Tints (mixed toward white)
Shades (mixed toward black)
Contrast ratio checker
WCAG 2.1: normal text needs 4.5:1 (AA) or 7:1 (AAA); large text needs 3:1 (AA).
How do I convert HEX to RGB?
Split the six HEX digits into three pairs and convert each from base-16 to base-10: for example, #7C3AED becomes rgb(124, 58, 237) because 7C equals 124, 3A equals 58 and ED equals 237. The converter above does this instantly, along with HSL, so you never need the math - but knowing the method helps when reading other people's code.
Three-digit HEX is shorthand: #F0A expands to #FF00AA by doubling each digit.
What is a good contrast ratio for text?
WCAG 2.1 requires at least 4.5:1 for normal text (AA) and 7:1 for the stricter AAA level; large text (18pt and up) needs 3:1. The checker above compares your color against white, black and a custom color, and shows pass/fail badges for each level so you can fix accessibility before you ship.
Low contrast is the most common accessibility failure on the web, and it affects far more people than screen-reader users alone - anyone on a dim or sunlit screen benefits.
What are tints and shades?
Tints are a color mixed with white (lighter versions) and shades are a color mixed with black (darker versions). Designers use them to build harmonious palettes: light tints for backgrounds, the base color for primary elements, and dark shades for text and hover states. The palette generator above creates ten steps of each from any base color.
- Pick a color with the visual picker or type a HEX code.
- Copy the HEX, RGB or HSL value with one click.
- Click any tint or shade swatch to copy its code.
- Pick a second color to check the WCAG contrast ratio.
Frequently asked questions
Is this color picker free?
Yes. Pick, convert and check unlimited colors with no account and no daily caps. Everything runs in your browser.
Can I pick a color from my screen?
Use your operating system's color picker or a browser eyedropper extension to grab a HEX code, then paste it into the HEX field here for conversion, palettes and contrast checks.
What color formats are supported?
HEX, RGB and HSL, each with a one-click copy button. Type a HEX code or use the visual picker and all three update instantly.
What contrast ratio does WCAG require?
WCAG 2.1 requires 4.5:1 for normal text (AA), 3:1 for large text (AA), and 7:1 for the stricter AAA level. The checker shows pass/fail badges for each.
What is the difference between tints and shades?
Tints mix the color toward white (lighter), shades mix it toward black (darker). The palette generator creates ten steps of each from your base color.