Turn Any Image Into CSS Color Variables — Ready for Design Systems
Upload an image and HexPickr generates a full set of :root CSS variables, OKLCH/OKLAB tokens, and JSON exports. Build modern, themeable UIs without guessing HEX values.
:root {
--color-1: #BEA883;
--color-2: #BCC7CA;
--color-3: #916E58;
/* OKLCH variants */
--color-1-oklch: oklch(0.725 0.054 65.8);
--color-2-oklch: oklch(0.822 0.013 215.8);
--color-3-oklch: oklch(0.681 0.071 45.2);
}Instant theme tokens
Generate --color-* tokens directly from brand images, hero shots, or UI mockups.
Modern OKLCH/OKLAB support
Use perceptually-uniform colors with OKLCH/OKLAB CSS functions, not just HEX.
Design-system friendly
Copy variables into your global :root or per-theme scopes in seconds.
Design tokens ready
Copy-paste CSS variables for your design system
HexPickr builds a set of CSS variables from your image so you can paste them into :root, theme files, or design-token pipelines. Use them in plain CSS, CSS-in-JS, or frameworks like React, Next.js, and Vue.
:root {
--color-1: #BEA883;
--color-2: #BCC7CA;
--color-3: #916E58;
/* OKLCH variants */
--color-1-oklch: oklch(0.725 0.054 65.8);
--color-2-oklch: oklch(0.822 0.013 215.8);
--color-3-oklch: oklch(0.681 0.071 45.2);
}Try the CSS variable extractor
Drop an image, pick your palette size, and export CSS variables, OKLCH/OKLAB, and JSON in one click.
Drop an image. Get CSS variables and tokens 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: { } } }Built for design systems
Design-token ready output
Map your tokens directly to --color-* variables and JSON.
OKLCH/OKLAB built in
Generate variables that work great with modern color spaces and accessibility.
Works with any framework
Use the variables in plain CSS, Tailwind, CSS-in-JS, or your own token pipeline.
Fast and clutter-free UI
No extra noise — drop an image, inspect your palette, copy code.
How it works
Upload a reference image
Brand photos, UI mockups, marketing art — anything.
Review the generated palette
Inspect HEX/RGB/HSL/OKLCH/OKLAB values and adjust palette size.
Copy CSS variables / tokens
Paste the variables into your :root, theme files, or token system.
Extract Production-Ready CSS Variables from Any Image
In modern web development, maintainability is the key to scalability. Our CSS Variable Color Extractor is designed to help you transform visual inspiration into a structured set of CSS custom properties in seconds. By deriving your colors directly from an image, you ensure that your design tokens are consistent and deeply connected to your project's visual core.
Manually managing HEX codes across multiple stylesheets is a recipe for technical debt. HexPickr eliminates this friction by providing ready-to-use `:root` variables. Whether you're building a client dashboard or a complex marketing site, using variables allows you to update your entire theme in a single location, rather than hunting down hard-coded values throughout your codebase.
Mastering Your Design Tokens
Developers love design tokens because they bridge the gap between design and code. Our tool doesn't just give you raw strings; it provides semantically structured data. By using these extracted variables, you can create a unified language for your team, where 'primary' or 'accent' colors are derived from real-world imagery, resulting in a more cohesive and professional user interface.
Beyond traditional HEX and RGB, we provide modern exports including OKLCH and OKLAB variants for every variable. This empowers you to build themes that aren't just visually harmonious, but also accessible and ready for the next decade of web technology.
Optimized for Professional Workflows
We believe that your tools should work as hard as you do. That's why out CSS variable extractor is built with professional-grade features to streamline your development process:
- ✓Global Scoping: Instantly generate `:root` tokens for global availability across your entire application.
- ✓Framework Independent: Use the generated variables in plain CSS, SASS, Tailwind, or your favorite JS framework.
- ✓Structured JSON Export: Sync your color tokens across platforms including Figma and mobile apps.
- ✓Modern Perceptual Formats: Leverage OKLCH for consistent lightness and better accessibility levels.
"CSS Variables are the backbone of themeable web applications. HexPickr makes generating them from inspiration as easy as drag and drop."
CSS Variable Extractor FAQ
Can I use these CSS variables in any web framework?
Absolutely. CSS Custom Properties are a web standard. You can paste them into your global :root scope and access them via the var() function in plain CSS, SASS, Tailwind CSS, styled-components, or any other framework that supports standard CSS values.
How do I implement these variables in my project?
Copy the generated block of variables and paste them into your main globals.css or tokens.css file within a :root {} selector. This makes the colors available globally across your stylesheets. You can then use them like color: var(--color-1) or background: var(--color-2-oklch).
Which image formats can I use with the CSS variable extractor?
We support a wide range of formats, including PNG, JPEG, WebP, AVIF, SVG, and even Favicon ICO files. Our high-performance engine processes the pixels locally in your browser for instant results and enhanced privacy.
How many color variables are generated from one image?
You can extract between 5 and 24 unique color variables. For each color, we provide the standard HEX value and its OKLCH/OKLAB equivalent, allowing you to choose the most appropriate format for your specific design needs.
Is my privacy protected when I upload images?
Yes. HexPickr prioritizes your data security. The color extraction happens client-side within your browser session. We do not intentionally store, share, or publish your images on our servers for this tool, ensuring your confidential project assets remain private.
Do you offer JSON formats for design token pipelines?
Yes. In addition to CSS variables, we provide a structured JSON export. This is perfect for teams using Style Dictionary or other design token pipelines to sync colors across web, iOS, and Android applications simultaneously.
Ready to use HexPickr beyond CSS variables?
Explore all export formats, including Tailwind, JSON, and OKLCH/OKLAB.