Accessible Palette Generator

Create ready-to-use light and dark mode color systems with verified WCAG AA and AAA contrast. Preview UI components live and export CSS variables or JSON design tokens.

Palette Overview

Accessible design system preview

Evaluate your visual hierarchy, readable secondary copy, buttons, links, and borders rendered together in real context.

Generated Color Roles

Passing Combinations

6 of 6

Contrast Standard

WCAG AA

Semantic design tokens

Role-based color assignments tailored for your light interface.

Brand tone scale

Perceptually spaced OKLCH lightness steps mapped safely into standard sRGB.

Verified WCAG combinations

Check color combinations against your selected WCAG contrast requirements.

Text on canvas backgroundRequires 4.5:1 minimum

17.22:1

Muted text on backgroundRequires 4.5:1 minimum

7.23:1

Text on raised surfaceRequires 4.5:1 minimum

16.46:1

Interactive link on backgroundRequires 4.5:1 minimum

5.32:1

Text & icon on primary action buttonRequires 4.5:1 minimum

8.44:1

Input border & dividers on backgroundRequires 3:1 minimum

3.03:1

Export tokens

Copy-ready CSS custom properties or JSON design tokens.

:root {
  --color-primary: #14b8a6;
  --color-on-primary: #000000;
  --color-background: #ffffff;
  --color-surface: #f8fafc;
  --color-text: #1b1b1b;
  --color-text-muted: #575757;
  --color-link: #00796b;
  --color-border: #949494;
}

How Our Accessible Palette Generator Works

Turn any brand color into a complete, contrast-verified light and dark theme in three steps.

Step 101

Enter Your Brand Color

Pick a starting HEX color and choose whether your interface targets standard WCAG AA (4.5:1) or enhanced AAA (7:1) compliance.

Step 202

Inspect Light & Dark Roles

Review automatically balanced tokens for primary actions, backgrounds, cards, body text, muted labels, and borders.

Step 303

Export CSS or JSON Tokens

Copy ready-to-use CSS custom properties or structured JSON design tokens directly into your project.

Key features

Built for design systems and frontend teams prioritizing readability across themes.

WCAG Contrast Checking

Check color combinations against your selected WCAG contrast requirements to verify legibility across light and dark themes.

Adaptive Light & Dark Themes

Generates dedicated light and dark surface palettes so vibrant brand accents stay legible without eye strain.

Browser-Local Processing

Your files are processed directly in your browser and are not uploaded to Pinatool's servers.

Frequently Asked Questions

Everything you need to know about accessible color generation and WCAG compliance.

How does the Accessible Palette Generator verify contrast requirements?

The generator computes the relative luminance of your seed color using the WCAG 2.1 formula. It derives background, surface, text, muted text, and border roles, automatically adjusting lightness values to satisfy contrast targets: at least 4.5:1 for normal text (WCAG AA) or 7:1 (WCAG AAA), and 3:1 for large text and UI controls. Contrast checking is essential for legibility, but it is only one part of overall web accessibility.

What is the difference between WCAG AA and AAA conformance?

WCAG AA is the standard legal and professional benchmark for web accessibility, requiring a 4.5:1 contrast ratio for body text and 3:1 for large text or graphical controls. WCAG AAA is an enhanced standard requiring 7:1 for normal text and 4.5:1 for large text, offering higher legibility for visually impaired users.

How are light and dark themes generated?

Each mode recalculates lightness curves and surface tones independently. Light mode pairs deep, legible text against clean luminous surfaces, while dark mode inverts contrast dynamics, desaturating vibrant brand tones to prevent eye strain and halos against deep neutral backgrounds.

How do I use the exported CSS and JSON in my project?

The CSS export provides ready-to-use CSS Custom Properties (:root variables) with semantic names such as --color-primary, --color-surface, and --color-text. The JSON export matches standard Design Tokens Community Group (DTCG) formats compatible with Tailwind CSS configs, Style Dictionary, and Figma plugins.

Does this tool transmit my brand colors to a server?

No. All color math, luminance calculations, and token generation run entirely client-side inside your browser. No color codes or data ever leave your machine.

Explore More Tools

More free utilities for color contrast testing, harmonies, and visual accessibility.

Color Contrast Checker

Test text and background colors against WCAG AA and AAA accessibility standards.

Color Wheel

Explore geometric harmonies (triadic, complementary, analogous) on a 360° wheel.

Color Blindness Simulator

Simulate how your palette looks to people with Protanopia, Deuteranopia, and Tritanopia.