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.
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.
Related Tools
CSS Gradient Generator
Generate CSS linear, radial and conic gradients visually with up to 8 color stops.
CSS Minifier & Formatter
Minify and beautify CSS code online free. Reduce CSS file size instantly.
Meta Tag Generator
Generate complete SEO meta tags, Open Graph and Twitter Card tags with live Google preview.