⇄ Converters

Color Palette Generator

Q: What export formats are available?

CSS custom properties (:root { --color-1: #hex; }), a Tailwind config snippet for theme.extend.colors, SCSS variable declarations, and a JSON object with hex and RGB values for each color.

Q: Is my image uploaded anywhere?

No. The image is processed entirely in-browser using the HTML5 Canvas API. The pixel data never leaves your device.

Q: Can I edit the palette manually after extracting from an image?

Switch to the Manual Hex tab and paste the hex codes from your extracted palette. You can then add, remove, or change individual colors before exporting.

Extract color palettes from images or build them manually. Export to CSS variables, Tailwind config, SCSS, or JSON with WCAG contrast grades.

Extract from image WCAG contrast CSS / Tailwind / SCSS No uploads

How the Color Palette Generator Works

The ByteKiln Color Palette Generator uses the HTML5 Canvas API for image color extraction and pure JavaScript for contrast calculation — no external image processing library required.

Image color extraction

The image is loaded into an HTMLImageElement, drawn onto a 200×200 canvas, and the pixel data is read. Pixels are quantized into 32-level RGB buckets, counted by frequency, filtered to remove near-black and near-white extremes, and the top N colors by frequency become the palette.

WCAG contrast calculation

Contrast is calculated using the WCAG 2.1 relative luminance formula: each RGB channel is linearized and combined as L = 0.2126R + 0.7152G + 0.0722B. The contrast ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color.

Export generation

Colors are named sequentially (color-1, color-2, …). CSS variables wrap them in :root {}, Tailwind wraps them in the module.exports config structure, SCSS produces $variable declarations, and JSON produces an object with hex and RGB component values.

Read the full guide

FAQ

Short answers for the things developers usually ask before trusting a tool.

How does color extraction from images work?

The image is drawn to an off-screen canvas (downscaled to 200×200 for speed), then pixel data is sampled and quantized into color buckets. The most frequent color buckets become the palette, with near-black and near-white filtered out.

What WCAG contrast check is shown?

Each palette color is checked against white using the WCAG 2.1 relative luminance formula. The contrast ratio is displayed with a grade: AAA (≥7:1), AA (≥4.5:1), AA Large (≥3:1 for large text), or Fail (<3:1).

What export formats are available?

CSS custom properties (:root { --color-1: #hex; }), a Tailwind config snippet for theme.extend.colors, SCSS variable declarations, and a JSON object with hex and RGB values for each color.

Is my image uploaded anywhere?

No. The image is processed entirely in-browser using the HTML5 Canvas API. The pixel data never leaves your device.

Can I edit the palette manually after extracting from an image?

Switch to the Manual Hex tab and paste the hex codes from your extracted palette. You can then add, remove, or change individual colors before exporting.

Related tools

Useful follow-ups when one conversion usually turns into three more.

formatters