The ColorGenius API for Modern Developers
Generate stunning, harmonious color palettes with seamless Tailwind CSS integration. Perfect for web apps, design systems, and creative projects.
Live Color Palette Generator
Click any color to copy • Generate Tailwind-ready palettes
// Generated by ColorGenius API
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ['class'],
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic':
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
},
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)',
},
colors: {
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))',
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))',
},
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))',
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))',
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))',
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))',
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))',
},
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
chart: {
'1': 'hsl(var(--chart-1))',
'2': 'hsl(var(--chart-2))',
'3': 'hsl(var(--chart-3))',
'4': 'hsl(var(--chart-4))',
'5': 'hsl(var(--chart-5))',
},
success: {
DEFAULT: 'hsl(142 76% 36%)',
foreground: 'hsl(138 76% 97%)',
},
warning: {
DEFAULT: 'hsl(38 92% 50%)',
foreground: 'hsl(48 96% 89%)',
},
info: {
DEFAULT: 'hsl(199 89% 48%)',
foreground: 'hsl(210 40% 98%)',
},
},
keyframes: {
'accordion-down': {
from: {
height: '0',
},
to: {
height: 'var(--radix-accordion-content-height)',
},
},
'accordion-up': {
from: {
height: 'var(--radix-accordion-content-height)',
},
to: {
height: '0',
},
},
'slide-in': {
from: {
transform: 'translateX(-100%)',
},
to: {
transform: 'translateX(0)',
},
},
'fade-in': {
from: {
opacity: '0',
},
to: {
opacity: '1',
},
},
'scale-in': {
from: {
transform: 'scale(0.95)',
opacity: '0',
},
to: {
transform: 'scale(1)',
opacity: '1',
},
},
},
animation: {
'accordion-down': 'accordion-down 0.2s ease-out',
'accordion-up': 'accordion-up 0.2s ease-out',
'slide-in': 'slide-in 0.3s ease-out',
'fade-in': 'fade-in 0.2s ease-out',
'scale-in': 'scale-in 0.2s ease-out',
},
},
},
plugins: [require('tailwindcss-animate')],
};
Try the ColorGenius API
Generate beautiful color palettes with seamless Tailwind CSS integration. Export as Tailwind config, CSS variables, or any format you need.
Color Palette Generator
Select a palette type and output format to generate beautiful color combinations
Everything You Need for Color Generation
Our API provides comprehensive color generation tools with enterprise-grade reliability, seamless Tailwind CSS integration, and developer-first design.
Color Theory Based
Generate palettes using proven color harmony principles including complementary, analogous, triadic, and monochromatic schemes.
Tailwind CSS Ready
Export palettes as ready-to-use Tailwind CSS configurations, CSS variables, or any format. Perfect for modern web development.
Lightning Fast
Sub-100ms response times with global CDN distribution. Perfect for real-time applications and user interfaces.
Multiple Formats
Get colors in HEX, RGB, HSL, CMYK formats. Export as JSON, CSS variables, SCSS mixins, or Tailwind config files.
Enterprise Security
API key authentication, rate limiting, and HTTPS encryption. SOC 2 compliant infrastructure with 99.9% uptime.
Design System Ready
Generate complete design system color scales with semantic naming. Perfect for component libraries and design tokens.
Mobile Optimized
Perfect for mobile apps with optimized payloads and offline-capable color generation algorithms.
Global CDN
Deployed across 180+ edge locations worldwide for minimal latency no matter where your users are.
Usage Analytics
Detailed analytics dashboard showing usage patterns, popular palettes, and performance metrics.
Accessibility Tools
Built-in WCAG compliance checking, contrast ratio analysis, and color blindness simulation.
Seamless Developer Experience
Generate color palettes that work perfectly with your existing Tailwind CSS workflow
// Your generated palette becomes:
<div className="bg-brand-500 text-brand-50">
<h1 className="text-brand-900">Welcome</h1>
<button className="bg-brand-600 hover:bg-brand-700">
Get Started
</button>
</div>
Choose Your Plan
Start free and scale as you grow. All plans include our core features with no hidden fees.
Free
Perfect for personal projects and experimentation
- 1,000 API calls per month
- Basic color palettes
- HEX and RGB formats
- Community support
- Standard rate limits
Pro
Ideal for growing businesses and professional projects
- 50,000 API calls per month
- All palette types and themes
- All color formats (HEX, RGB, HSL, CMYK)
- Priority support
- Analytics dashboard
- Custom webhooks
- Higher rate limits
Enterprise
For large-scale applications with custom requirements
- Unlimited API calls
- Custom palette algorithms
- Dedicated support team
- SLA guarantees
- Custom integrations
- White-label options
- On-premise deployment
All plans include free SSL, 99.9% uptime SLA, and no setup fees
View API Documentation →