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.
Intuitive, friction-free workflow designed to get you from blank slate to job-ready in minutes.
Drag the picker or click on the colour area.
Adjust hue with the slider on the right.
Copy the value in your preferred format.
Engineered for speed, privacy, and recruiter compliance
Targeted for modern job applications and career moves
Includes OKLCH, the perceptually uniform format used by modern design systems and Tailwind v4, alongside the classic formats.
Zero paid tiers, hidden subscriptions, or paywalls
No forced email signups or credit meters
Parsed inside your browser, never stored in DB
No watermark branding or export limits
Authoritative standards for passing ATS filters and catching hiring managers' attention.
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.
Straightforward answers regarding ATS compliance, PDF rendering, and data privacy.
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.
Drag the picker or enter a value and the tool shows the color's HEX code alongside a live preview. Click to copy it straight into your CSS, design tool or brand palette.
For any picked color the tool displays HEX, RGB and HSL formats side by side with one-click copy, so you can grab the exact value your stylesheet or design software needs.
In-depth articles and tutorials to get the most out of Color Picker.
Build accessible, consistent color systems in CSS. Understand why OKLCH fixes HSL brightness distortions and enables wide-gamut Display P3 web palettes.
Design compliant, high-readability web interfaces. Learn WCAG 2.2 contrast thresholds, the mathematical formula behind relative luminance, and the APCA standard.
Build production-ready light and dark themes without JavaScript overhead. Learn how to structure design tokens with HSL, avoid contrast failures, and implement smooth mode transitions.
Design interfaces everyone can read. Master WCAG 2.1 contrast ratios, understand human luminance perception, and learn how to construct balanced 60-30-10 palettes using HEX, RGB, and HSL.