Turn Any Image Into an OKLCH Color Palette
Upload an image and HexPickr generates perceptually uniform OKLCH palettes, CSS variables, JSON tokens, and classic HEX/RGB/HSL values. Build modern, accessible color systems from real imagery — without guessing.
Perceptually uniform
Small numeric changes in lightness, chroma, and hue produce predictable visual changes.
Better theming & states
Derive hover, active, and dark-mode variants by tweaking OKLCH values instead of picking new colors.
Accessibility aware
Design for readability and contrast with a color space closer to human vision than raw RGB/HSL.
Copy OKLCH tokens directly into your design system
HexPickr gives you OKLCH values alongside HEX/RGB/HSL so you can build modern design tokens and color algorithms. Use OKLCH in CSS, design systems, or internal tooling while still supporting existing formats.
- ✓Works with CSS oklch()
- ✓Great for theme variants and elevation levels
- ✓Pairs with CSS variables & JSON tokens
:root {
--brand-primary: oklch(0.72 0.08 285);
--brand-accent: oklch(0.63 0.12 25);
}
.btn-primary {
color: oklch(0.99 0 0);
background-color: var(--brand-primary);
}Try the OKLCH color extractor
Drop an image, choose your palette size, and inspect OKLCH values alongside HEX, RGB, HSL, CSS variables, and JSON exports.
Drop an image. Get OKLCH palettes instantly.
Generated by HexPickr — hexpickr.com
Palette history
Output
HexPickr exports extracted image colors as ready-to-use CSS variables, Tailwind color configs, and JSON for direct use in modern frontend projects. Includes OKLCH/OKLAB for modern color workflows
:root{
/* OKLCH */
}theme: { extend: { colors: { } } }{"colors": {
}
}HexPickr
Color palette
Developer snippets
:root{
}theme: { extend: { colors: { } } }Features designed for modern workflows
Perceptual control
Adjust lightness, chroma, and hue without strange jumps in appearance.
OKLCH + classic formats
Get OKLCH, HEX, RGB, HSL, CSS variables, and JSON together to ease adoption.
Design-system friendly
Turn OKLCH palettes into tokens for web, mobile, and design tools.
Built on HexPickr’s engine
Same fast, distraction-free UI you already use for Tailwind & CSS exports.
How it works
Upload a reference image
Brand visuals, product shots, UI screens — anything you want to derive colors from.
Inspect the OKLCH palette
Review OKLCH, HEX, RGB, and HSL values for each swatch. Adjust palette size for your needs.
Copy tokens into your system
Export OKLCH values, CSS variables, or JSON tokens and plug them into your design system or codebase.
Extract OKLCH Colors from Any Image for Modern Design Systems
Transitioning to modern color spaces is the hallmark of a high-quality design system. Our OKLCH Color Extractor is designed to help you bridge the gap between inspiration and implementation. By sampling colors directly from your images into a perceptually uniform color space, you ensure that your design tokens are consistent, accessible, and mathematically sound from the start.
Traditional color models like RGB and HSL were built for hardware, not human eyes. In HSL, a 'lightness' of 50% for yellow appears much brighter than 50% for blue. The OKLCH model solves this by aligning its axes with human perception. When you extract a palette with HexPickr, you're getting values that reflect how your users actually see color, making it easier to maintain visual balance across your entire UI.
Why Developers Care About OKLCH
For developers working with modern design systems, speed and consistency are critical. Our tool doesn't just give you a list of codes; it provides production-ready tokens. Whether you're building a new hero section or an entire dashboard theme, having OKLCH values at your fingertips allows you to programmatically derive hover states, active states, and dark mode variants with predictable results.
By derivation design tokens directly from your hero imagery or brand assets, you ensure a level of visual harmony that stock palettes can't match. This creates a cohesive user experience where the interface feels like an extension of the content, reducing the friction between the brand's visual identity and the technical implementation.
Designed for Professional Handoff
We know that a color extractor is only as good as its export options. HexPickr provides a comprehensive suite of developer tools to ensure your new palette fits perfectly into your existing workflow:
- ✓Native CSS Support: Copy `oklch()` functions directly into your variables or stylesheets.
- ✓Accessibility-First: Maintain consistent contrast levels across different hues with perceptual lightness.
- ✓Full Format Support: Get HEX, RGB, HSL, and JSON exports alongside your OKLCH tokens.
- ✓Design Token Sync: Use our JSON export to keep your code in sync with Figma or mobile applications.
"The OKLCH color space is the future of web design. Our goal is to make it accessible and practical for every developer, today."
OKLCH Color Extractor FAQ
What is OKLCH and why should I use it instead of HSL?
OKLCH is a modern, perceptually uniform color space. Unlike HSL, where the same 'lightness' value can look vastly different between yellow and blue, OKLCH ensures that colors with the same 'L' value have the same perceived brightness. This makes it the superior choice for building accessible design systems and generating programmatic UI themes.
How do I implement OKLCH values in my CSS?
Copy the oklch() values directly from HexPickr and use them in your stylesheets. Modern browsers support the oklch() function natively. For example: background-color: oklch(0.7 0.12 180);. We also provide HEX and HSL fallbacks if you need to support legacy environments.
Which image formats does the OKLCH extractor support?
Our tool supports all major web formats, including PNG, JPEG, WebP, AVIF, and SVG. Whether you're extracting colors from a client's logo or a high-resolution mood board, the process happens instantly in your browser.
How many colors can I extract from one image?
You can extract between 5 and 24 dominant colors from any image. Use the interactive slider to find the right balance for your design system, from simple brand accents to complex, multi-shade palettes.
Does HexPickr store the images I upload?
Privacy and security are built-in. We process your images locally within your browser to generate the color palette; we do not intentionally store or publish your images on our servers for this extraction tool.
Can I use OKLCH values in Figma or other design tools?
Yes! Many modern design tools like Figma now support OKLCH. You can copy the values directly or export the entire palette as a JSON object to sync your design tokens across your creative and development teams.
Ready to use HexPickr beyond OKLCH?
Explore Tailwind configs, CSS variables, JSON tokens, and more from the same image palettes.
Try the full HexPickr experience →