Image to CSS :root Variables · Copy-Paste Ready · SCSS Export Too
Extract the dominant colors from any image and instantly get a CSS :root block with custom properties you can paste into any project. No manual color picking, no hex transcription errors — the extractor produces clean, named variables derived directly from your image's actual pixel data. SCSS output is available as well.
Open the extractor and start immediately — no account, nothing stored on any server.
Open the Color Palette Extractor →CSS custom properties declared on :root act as global design tokens. By generating them from an image, you anchor your color system to a real visual reference rather than an abstract guess. The export includes a hex value comment beside each variable so you can read the actual color at a glance without opening a color picker. You can also rename the variables to match your project's naming convention before pasting.
CSS custom properties, also called CSS variables, are declarations that begin with -- and are scoped to a selector. Declaring them on :root makes them available throughout the entire document. You reference them with var(--property-name) anywhere in your stylesheet.
Paste the :root block at the top of your CSS file, then reference each color with var(--color-1), var(--color-2), etc. This lets you change the entire theme by updating one central block rather than hunting down individual hex codes.
Yes. The export panel offers both :root CSS custom properties and SCSS $variable syntax. The SCSS export uses $color-1, $color-2… naming so you can drop it directly into a Sass or SCSS project without modification.