Color palette
Swatches — click any pill to copy value
Upload any image — a brand photo, mood board, or logo — and export a ready-to-paste :root CSS block with all color custom properties. The fastest way from image to design system.
Color palette
Swatches — click any pill to copy value
When a design starts from a photograph — a hero image, brand photography, or a mood board — your CSS color tokens should trace directly back to it. This tool makes that connection instant.
Extract the palette from a campaign hero image and use the output as your design token baseline — ensuring every UI element shares a visual language with the photography.
Drop in a reference image, copy the CSS variables block, paste into your stylesheet. You have a working color system in under 60 seconds without leaving your browser.
When clients provide photography but no color guidelines, extract the palette directly from their images and build a coherent site palette that feels intentional and on-brand.
The JSON export provides hex, RGB, and HSL for every color — exactly the shape you need to populate a tailwind.config.js or a style dictionary token file.
Copy hex values directly into your theme object for Styled Components, Emotion, or any CSS-in-JS setup. The JSON export also maps cleanly to TypeScript theme interfaces.
Screenshot a palette, export the JSON, and commit both alongside your code — giving your team a clear record of where the design system colors came from.
From image to stylesheet in four steps.
Drag in a brand photo, mood board screenshot, logo, or any image that defines your intended color palette. No account needed, nothing leaves your browser.
Use the slider to match the number of colors in your design system — typically 4–6 for a focused palette, up to 10 if you need a full range of utility colors.
Click "CSS variables" to copy a ready-to-paste :root { --color-1: #...; --color-2: #...; } block. Paste into your stylesheet and rename the tokens to match your naming convention.
The JSON export includes hex, RGB, HSL, and a color name for every swatch. Feed it into Style Dictionary, Theo, or any design token pipeline to generate platform-specific output automatically.
Common questions about this workflow.
Upload your image using the tool above, set the number of colors using the slider, then click the 'CSS variables' export button. This copies a :root { --color-1: #hex; } block directly to your clipboard, ready to paste into your stylesheet.
The output is a valid CSS :root block with custom properties named --color-1, --color-2, and so on. Each value is a hex color code. For example: :root { --color-1: #3A2F4E; --color-2: #C4A882; --color-3: #F7F2EB; }. You can rename the variables to match your design system's naming convention.
Yes. Copy the hex codes from the CSS variables or JSON export, then add them to the colors object in your tailwind.config.js file. The JSON export is particularly useful here since it provides the hex value for each color alongside the color name, which you can use as your Tailwind token name.
Upload your primary brand photo or logo to extract the core palette. Set the slider to the number of design tokens you need (usually 4–8). Use the CSS variables export as the foundation of your :root token declarations, then extend with tints and shades programmatically using hsl() manipulation or a tool like Radix Colors.
The tool exports CSS custom properties (--color-1: #hex), not SCSS variables ($color-1: #hex). However, converting is trivial — replace the -- prefix with $ and remove the :root {} wrapper. Alternatively, use the JSON export to generate SCSS variables programmatically via a build step.
Other ways to use Find Palette for your workflow.