npm install @chromacreator/colors

Color Palette Generator
for Developers

Generate WCAG-compliant color schemes with instant CSS export. Built for developers who need accessible colors fast.

Start GeneratingSee Code Examples

Built for Developer Workflows

Instant CSS Export

Copy CSS variables ready to paste. No manual conversion, no hex-to-rgb calculators.

WCAG Validation

Automatic accessibility checking. Ship compliant code without manual testing.

Zero Config

No API keys, no npm packages, no build step. Just generate and copy.

Export Formats for Every Stack

styles.css
:root {
  --color-primary: #6366F1;
  --color-secondary: #8B5CF6;
  --color-accent: #EC4899;
  --color-background: #1F2937;
  --color-text: #F9FAFB;
}

/* Use in your components */
.button {
  background-color: var(--color-primary);
  color: var(--color-text);
}
colors.json
{
  "palette": {
    "primary": "#6366F1",
    "secondary": "#8B5CF6",
    "accent": "#EC4899",
    "background": "#1F2937",
    "text": "#F9FAFB"
  },
  "accessibility": {
    "primary-on-background": {
      "ratio": 7.2,
      "wcag": "AAA"
    }
  }
}
tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#6366F1',
        secondary: '#8B5CF6',
        accent: '#EC4899',
        background: '#1F2937',
        text: '#F9FAFB',
      }
    }
  }
}

Developer-Focused Features

WCAG Compliance Checking

Automatic validation for AA and AAA standards. See contrast ratios for every color combination.

  • • Real-time contrast ratio calculation
  • • Text and UI component validation
  • • Color blindness simulation

Multiple Export Formats

Export to CSS variables, JSON, Tailwind config, or copy individual hex codes.

  • • CSS custom properties
  • • JSON for design systems
  • • Tailwind configuration

Keyboard Shortcuts

Developer-friendly shortcuts for rapid palette generation and manipulation.

  • • Space Generate new palette
  • • C Copy all colors
  • • S Save palette

No Build Required

Pure client-side generation. No API calls, no rate limits, no dependencies.

  • • Works offline
  • • No API keys needed
  • • Privacy-first (no data sent)

Perfect for Your Tech Stack

React / Next.js

Export CSS variables or JSON for theme configuration. Perfect for styled-components or Tailwind.

Vue / Nuxt

Generate palettes for your Vue components. Export to CSS or integrate with your design system.

Angular

Create Material Design compliant palettes. Export for Angular Material theming.

Start Building with Better Colors

Generate WCAG-compliant palettes in seconds. Export to CSS. Ship accessible code.

Launch Generator

No signup • No API keys • No npm install