About

Color palette inconsistency across design systems causes measurable production waste. A single mismatched hex value between a Figma file and a CSS stylesheet can propagate through hundreds of components. This tool generates palette files in multiple output formats - PNG swatch strips, CSS custom properties, SCSS maps, and raw JSON - from a single source of truth you define here. It calculates WCAG 2.1 contrast ratios against white and black backgrounds for every color, so you can validate accessibility compliance before committing to a design token set. Color harmony algorithms rotate hue values in HSL space at fixed angular intervals: complementary at 180°, triadic at 120°, analogous at 30°. The PNG export writes actual pixel data to a Canvas element via ImageData, producing a lossless raster file - not a screenshot, not a simulation.

Limitation: the named-color matching uses a dictionary of 148 CSS named colors and approximates perceptual distance via CIE76 ΔE. This is adequate for design work but not for colorimetry or print proofing where CIE2000 is required. Pro tip: export your palette as CSS variables early in a project and import the file into your design system tokens - retrofitting palette changes across 50+ components is the kind of technical debt that compounds silently.

Formulas

Contrast ratio between two colors is derived from their relative luminance values. The formula follows WCAG 2.1 specification:

CR = L₁ + 0.05L₂ + 0.05

Where L₁ is the relative luminance of the lighter color and L₂ is the relative luminance of the darker color. Relative luminance is computed from linearized sRGB channels:

L = 0.2126 ⋅ R_lin + 0.7152 ⋅ G_lin + 0.0722 ⋅ B_lin

Each sRGB channel is linearized by the inverse companding function:

{

C_lin = C_srgb12.92 if C_srgb ≤ 0.04045C_lin = pow(C_srgb + 0.0551.055, 2.4) otherwise

Color harmony generation rotates the hue component in HSL space. For a base hue H:

H_new = (H_base + θ) mod 360

Where θ is the rotation angle specific to the harmony type. CIE76 perceptual color distance for nearest named color matching:

ΔE = √(L₂ − L₁)² + (a₂ − a₁)² + (b₂ − b₁)²

Where L, a, b are coordinates in CIELAB color space.

Reference Data

Harmony Type	Hue Rotation	Count	Use Case	Visual Character
Complementary	180°	2	High contrast CTAs, alerts	Maximum tension, vibrant
Analogous	±30°	3	Backgrounds, gradients	Harmonious, serene
Triadic	120°	3	Dashboards, infographics	Balanced, colorful
Split-Complementary	150° & 210°	3	Web design, UI themes	Contrast with less tension
Tetradic (Rectangle)	60°, 180°, 240°	4	Complex illustrations	Rich, needs balance
Square	90°	4	Data visualization	Even distribution
Monochromatic	0° (vary S/L)	5	Minimalist UI, text hierarchy	Subtle, professional

WCAG Level	Min Ratio (Normal Text)	Min Ratio (Large Text)	Applies To
AA	4.5:1	3:1	Body text, inputs, labels
AAA	7:1	4.5:1	Enhanced accessibility targets
Non-text	3:1	3:1	Icons, borders, focus rings

Export Format	Extension	Content Type	Best For
PNG Swatch Strip	.png	Raster image	Presentations, mood boards
CSS Custom Properties	.css	Text	Web projects, design systems
SCSS Variables	.scss	Text	Sass/SCSS preprocessor projects
JSON Tokens	.json	Application/json	Design token pipelines, APIs
Tailwind Config	.js	Text	Tailwind CSS theme extension
Plain Text List	.txt	Text	Documentation, quick reference

Frequently Asked Questions

The PNG export writes raw pixel data directly to an HTML Canvas via the ImageData API. Each color swatch occupies a precise rectangular region with exact pixel dimensions. The resulting file is lossless, has no anti-aliasing artifacts, no browser chrome, and no compression artifacts from screenshot tools. The pixel values in the file are the exact RGB values you specified - verified at the byte level.

Contrast ratios follow the WCAG 2.1 relative luminance formula, which operates in linearized sRGB space. The sRGB channel values (0-255) are first normalized to 0-1, then inverse-companded using the sRGB transfer function (gamma ≈ 2.2) before being weighted by the luminance coefficients: R × 0.2126 + G × 0.7152 + B × 0.0722. This is not a simple average - it accounts for the human eye's greater sensitivity to green light.

The tool uses CIE76 (Euclidean distance in CIELAB space) for nearest-color matching. CIE76 is computationally efficient but does not account for perceptual non-uniformities - particularly in the blue-purple region where human vision is less reliable. CIE2000 (ΔE00) would produce better perceptual matches but requires significantly more computation. For design tool usage, CIE76 is sufficient. For print proofing or colorimetry, it is not.

Yes. The CSS export produces standard custom properties in the format --palette-{name}: #{hex}; scoped to :root. These are compatible with any design token pipeline that reads CSS custom properties, including Style Dictionary, Theo, and native CSS-in-JS solutions. If your system expects JSON tokens, use the JSON export instead - it produces a flat key-value map of color names to hex values.

The tool permits duplicate hex values because different semantic names may share the same color (e.g., "primary-blue" and "link-color" might both be #3B82F6). Each color entry maintains a unique internal ID regardless of its hex value. In exported files, duplicates will appear as separate entries. If this is unintentional, the duplicate will be visually obvious in the swatch strip.

HSL harmony rotation operates in the sRGB gamut, which is a screen-oriented color space. Print workflows use CMYK or Pantone spot colors, neither of which map linearly from HSL rotations. A complementary color generated here may not appear complementary when converted to CMYK due to gamut compression. Use these harmonies for screen design. For print, convert the final palette through an ICC profile in your prepress software.