Create accessible color themes in seconds
A visual theme generator that ensures your color palettes meet WCAG accessibility standards. Pick colors, check contrast ratios, and export production-ready theme code.
Contrast Ratio
7.2:1
✓ WCAG AAA
Quick Start
Get up and running with Theme Gen in just a few steps
Install dependencies
Clone the repository and install dependencies with your preferred package manager.
Start the development server
Create your first theme
Click on any color to open the color picker, or use the shuffle button to generate a random accessible palette. Lock colors you want to preserve during shuffles.
All generated palettes automatically meet WCAG contrast requirements for text, backgrounds, and interactive elements.
Key Features
Everything you need to create accessible, production-ready color themes
Live Preview
Every color change updates the entire interface in real-time, so you can see exactly how your theme looks.
WCAG Auditing
Built-in checks for all required contrast ratios against WCAG AA and AAA standards.
Smart Shuffle
Generate random palettes that automatically pass all contrast requirements. Respects locked colors.
Color Locking
Lock any color to preserve it during shuffles and regenerations.
Multi-Format Export
Export to CSS variables, Tailwind CSS (v3 & v4), or SCSS in hex, rgb, or hsl formats.
URL Sharing
Themes encode to URL parameters automatically. Share themes by copying the URL.
Explore by Topic
Learn how to use Theme Gen effectively
Creating Themes
Learn how to create and customize color themes from scratch.
Accessibility Guide
Understand WCAG contrast requirements and how Theme Gen ensures compliance.
Exporting Themes
Export your themes in multiple formats for different frameworks and build tools.
Sharing Themes
Share your themes with team members or save them for later use.
Developer Resources
Integrate Theme Gen’s functionality into your own projects
Theme Context
React context provider and hooks for theme management.
Color Utilities
Functions for color generation, manipulation, and validation.
Contrast Functions
Calculate and validate WCAG contrast ratios.
Color Conversion
Convert between hex, RGB, HSL, HSV, and OKLCH color spaces.
Components
Pre-built React components for theme customization.
TypeScript Types
Type definitions for themes, colors, and configurations.
Ready to create accessible themes?
Start building beautiful, accessible color palettes that meet WCAG standards out of the box.
Get Started Now