Color Picker — HEX, RGB, HSL, OKLCH Color Converter Free
The Advanced Color Picker converts any color between 9 formats simultaneously: HEX, HEX8, RGB, RGBA, HSL, HSLA, OKLCH, CSS custom property, and Tailwind arbitrary value. Paste any CSS color format and see all conversions instantly. Includes a WCAG contrast ratio checker (AA and AAA for normal and large text), five color harmony generators, a 10-shade Tailwind-style palette, and a color history. Everything runs locally — no colors are sent to a server.
How to Use the Color Picker
- 01
Pick or paste a color
Use the visual picker to select a color with the browser's native color input, or paste any format — HEX, RGB, HSL, named CSS color — in the "Paste any format" tab.
- 02
See all formats instantly
All 9 output formats update simultaneously. Click the copy icon next to any format to copy it to your clipboard.
- 03
Check accessibility and explore harmonies
Review WCAG contrast ratios, explore harmony swatches, generate a full shade palette, and keep a history of your recent colors.
Features
- ✓Visual color picker (native browser input)
- ✓Paste any CSS color: HEX, RGB, HSL, named colors
- ✓9 simultaneous output formats with copy buttons
- ✓OKLCH output for modern CSS color spaces
- ✓Tailwind CSS arbitrary value output
- ✓CSS custom property output
- ✓WCAG contrast ratio vs white and black
- ✓AA / AAA compliance for normal and large text
- ✓Nearest CSS color name lookup
- ✓Relative luminance value
- ✓5 harmony generators: complementary, triadic, analogous, split, tetradic
- ✓10-shade Tailwind-style palette (50–900)
- ✓Copy all shades as CSS variables
- ✓Color history (last 10, persisted in localStorage)
- ✓100% browser-based — no data sent to server
Frequently Asked Questions
What color formats does this tool output?
The tool outputs nine formats simultaneously: HEX (#FF5733), HEX8 (with alpha channel, #FF5733FF), RGB, RGBA, HSL, HSLA, OKLCH (a perceptually uniform color space used in modern CSS), a CSS custom property declaration (--color-primary: #FF5733), and a Tailwind CSS arbitrary value (bg-[#FF5733]). Every format has its own copy button.
What input formats are accepted in "Paste any format"?
The paste input accepts any standard CSS color format: HEX with or without # (e.g. #FF5733 or FF5733), shorthand HEX (#F73), RGB, RGBA, HSL, HSLA, and over 140 named CSS colors (e.g. "tomato", "cornflowerblue", "rebeccapurple"). Type the color and press Enter or click Apply.
What is WCAG contrast ratio and why does it matter?
WCAG (Web Content Accessibility Guidelines) contrast ratio measures how distinguishable text is against its background. The minimum for accessible text is 4.5:1 (AA) or 7:1 (AAA). Large text (18px+ bold or 24px+) requires 3:1 (AA) or 4.5:1 (AAA). The tool checks your color against both white and black backgrounds and shows which WCAG levels it passes.
What are color harmonies?
Color harmonies are systematic color combinations based on positions on the color wheel. Complementary uses the color directly opposite (180°), giving high contrast. Triadic uses three evenly spaced colors (120° apart). Analogous uses adjacent colors (±30°). Split-complementary uses the two colors adjacent to the complement. Tetradic uses four evenly spaced colors (90° apart). Click any swatch to make it the active color.
How are the shades generated?
The shade generator creates 10 tints and shades named 50–900 (matching Tailwind's naming scale). Each shade keeps the same hue as the original color but varies the lightness from nearly white (97% lightness at 50) to nearly black (15% lightness at 900). Click "Copy all as CSS vars" to get a full CSS custom property block you can drop into your stylesheet.