Color Palette
Generator & Auditor

Design Systems Engine:
Fast Harmonies, Pixel Extraction, and Contrast Checks

Bad palettes break good software. Text washes out against gray backgrounds, buttons blend into containers, and front-end teams waste hours arguing over hex codes in Slack. This workbench runs completely inside your browser memory. You tap Spacebar to test color harmonies, drag a brand image onto the canvas to isolate its dominant hues via k-means clustering, or audit contrast ratios against WCAG 2.1 thresholds before pushing code to production. No logins. No subscription walls. Zero server roundtrips.

Core Capabilities Built for Web Developers

Most online color pickers treat color generation as an artistic toy. They flash random pastel boxes that look pretty on Pinterest but fall apart the moment you try to build a functional SaaS dashboard or e-commerce checkout. We built this workbench around production engineering requirements:

Practical Decision Rules: When to Use This Workbench

The Math Behind the Engine

Understanding how your tools calculate color data prevents expensive UI bugs down the road. Here is the operational breakdown of our two primary mathematical models:

1. Local K-Means Pixel Clustering

When you drop an image onto the canvas, the browser extracts the raw pixel array using the native getImageData() API. Each pixel contains red, green, blue, and alpha channels. Transparent pixels (alpha < 128) are thrown out.

The algorithm treats each pixel as a coordinate point in a 3D Euclidean space:

It places five initial random centroids, assigns every sampled pixel to its closest centroid, recalculates each centroid as the geometric mean of its assigned cluster, and repeats this iterative loop until the centroid shifts drop below a convergence delta. The five finalized centroids become your dominant palette.

2. Photopic Relative Luminance and WCAG Contrast

Why can you put black text on pure green, but white text looks washed out? Because the human eye is packed with M-cones sensitive to medium wavelengths. The standard sRGB relative luminance formula (L) accounts for this biological reality:

Notice the weights: Green accounts for 71.52% of perceived luminance, Red contributes 21.26%, and Blue contributes only 7.22%. Contrast Ratio (CR) is then calculated as:

The constant 0.05 compensates for ambient screen flare. If your computed ratio is below 4.5:1, your standard text will fail an automated accessibility audit.

WCAG 2.1 Contrast Benchmark Reference Matrix

The 60-30-10 Rule: Real-World SaaS Interface Architecture

Applying a color palette is not an even 20% split across five columns. Real software follows the classical interior 60-30-10 distribution to direct user focus toward high-conversion actions without overwhelming cognitive processing:

Deploying Color Tokens in Modern Frontend Stacks

Once you finish your palette, you can wire it straight into your frontend repository. Here are the two standard patterns:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#fdf2f8',
          100: '#fce7f3',
          200: '#fbcfe8',
          300: '#f9a8d4',
          400: '#f472b6',
          500: '#ec4899', // Base Brand Anchor
          600: '#db2777',
          700: '#be185d',
          800: '#9d174d',
          900: '#831843',
        }
      }
    }
  }
};

:root {
  --color-canvas-bg: #f8fafc;
  --color-surface-card: #ffffff;
  --color-border-subtle: #e2e8f0;
  --color-text-primary: #0f172a;
  --color-text-muted: #64748b;
  --color-brand-primary: #ec4899;
  --color-brand-hover: #db2777;
}

[data-theme="dark"] {
  --color-canvas-bg: #090d16;
  --color-surface-card: #131b2e;
  --color-border-subtle: #1e293b;
  --color-text-primary: #f8fafc;
  --color-text-muted: #94a3b8;
  --color-brand-primary: #f472b6;
}

Common Design Pitfalls and How to Fix Them

Feature Comparison: How This Engine Stacks Up

Related Design Guides and Utilities

Explore our engineering deep-dives and complementary client-side utilities to streamline your digital asset workflow: