Visually pick any colour and read its HEX, RGB, HSL and OKLCH values. Drag the picker or paste a value to convert in either direction.
Includes OKLCH, the perceptually uniform format used by modern design systems and Tailwind v4, alongside the classic formats.
A color picker helps you explore palettes and copy exact values into CSS, Figma or Tailwind config. Beyond aesthetics, contrast ratio matters for accessibility. WCAG recommends at least 4.5:1 contrast for normal text against its background.
HEX is the default on the web. RGB maps to screens. HSL makes it easier to adjust lightness without shifting hue. Pick a base color, then copy all three formats for your design system documentation.
OKLCH (Lightness, Chroma, Hue) is perceptually uniform, equal numerical changes look equally different to the eye. It produces smoother gradients and accessible palettes more reliably than HSL.
8-digit HEX includes an alpha channel, the last two characters are opacity (00 transparent, FF opaque). Strip them if your tool only accepts RGB.
It uses the EyeDropper API, available in Chromium-based browsers (Chrome, Edge, Opera). Safari and Firefox don't expose it yet.
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt+). AAA tightens those to 7:1 and 4.5:1.