◐ Web & Design

Color Palette Generator

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

Updated

Extract from image WCAG contrast CSS / Tailwind / SCSS Images read locally

Loading Color Palette…

What this page sends

  • Your input: Images are read with the Canvas API in this tab and not sent to a server.
  • Page load: Loading the page requests HTML, scripts and images from ByteKiln, fonts from Google Fonts, and sends Google Analytics page views, tool-usage events and catalog interactions (tool/category IDs, result status and whether a click followed search — never your input, output or search terms). Privacy & sharing

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.

Limitations

  • Extraction counts pixel colors in a 200×200 downsample using 32-level buckets — frequency, not perceptual clustering — so small accent colors in a large image are often missed.
  • Near-black and near-white are filtered out, which drops the black of a black-and-white logo.
  • Colors are sRGB; wide-gamut (Display P3) images are converted by the canvas first, and embedded color profiles may shift values slightly.
  • The contrast grades use the WCAG 2 formula against white and black only; check real text/background pairs in the Contrast Checker.

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 read with the Canvas API in your browser and is not sent to a server.

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.

test-debug

Accessibility Checker

Audit HTML for WCAG 2.1 AA accessibility violations using axe-core — critical, serious, moderate, and minor issues.

web-design

CSS Minifier

Minify or beautify CSS for quick inspection and front-end debugging.

format-compare

JSON Formatter

Format, validate, and minify JSON instantly with a browser-first editor.

Related guides