Color Generator
Color Palette Generator
Effortlessly use and customize color palettes for Tailwind CSS and other design projects. Enter a color to create your unique theme or explore existing color schemes.
jungle
orchid
sepia
celadon
padua
cerulean
cornflower
amethyst
maroon
sweetPink
peachOrange
reef
rose
pink
fuchsia
purple
violet
indigo
blue
sky
cyan
teal
emerald
green
lime
yellow
amber
orange
red
stone
neutral
zinc
gray
slate
Free Color Tool
What is Color Palette Generator?
Create stunning color themes for Tailwind CSS projects with intelligent color series generation
The Color Palette Generator is a powerful tool that uses the @arco-design/color library to generate complete color series from any base color. Input any valid color value (HEX, RGB, HSL, or OKLCH) to generate 11 shades ranging from lightest (50) to darkest (950), following Tailwind CSS theme conventions.
Perfect for designers and developers working with design systems. These colors ensure consistency across your project and can be directly applied to Tailwind CSS or custom stylesheets. The generator also supports dark mode color schemes for comprehensive theme coverage.
Key Features
Multiple Formats
Support for HEX, RGB, HSL, and OKLCH color formats
11 Shades
Complete color series from 50 to 950 following Tailwind conventions
One-Click Copy
Click any color block to instantly copy its value to clipboard
Dark Mode
Toggle between light and dark mode color schemes
Custom Colors
Input any color to generate your own color series
CSS Variables
Export colors as CSS custom properties for easy integration
Accessibility
Built-in contrast checking for accessible color combinations
Live Preview
See how colors look in both light and dark contexts
How to Use
01
Choose Format
Select your preferred color format (HEX, RGB, HSL, or OKLCH)
02
Select Color
Choose from preset colors or input your own custom color
03
Toggle Mode
Switch between light and dark mode to see different schemes
04
Copy Values
Click any color block to copy its value to clipboard
05
Export CSS
Copy CSS variables or use individual color values
06
Apply to Project
Use colors in Tailwind config or custom CSS
About the Color Algorithm
Dynamic Gradients
Based on arco-design's color algorithm with dark mode optimization
11 Gradient Steps
Following Tailwind's theme rules with 6th color as primary
Inverted Dark Mode
Light algorithm inverted and fine-tuned for dark themes
Consistent Saturation
Ensures color harmony across all shades
About OKLCH Color Format
OKLCH is a perceptually uniform color space that represents colors in a way that better matches human perception. The format consists of three components:
L Lightness
Ranges from 0 (black) to 1 (white)
C Chroma
Represents the colorfulness or saturation
H Hue
Color angle in degrees (0-360)
OKLCH provides better perceptual uniformity and is especially useful for creating accessible color palettes and smooth gradients.
Pro Tips
Use the 6th shade — Typically used as the primary color in Tailwind themes
Test contrast ratios — Ensure text is readable on colored backgrounds
Create consistency — Use the same color family across your design system
Consider dark mode — Test your palette in both light and dark modes
Use OKLCH for precision — Better for creating accessible color scales
Export as CSS variables — Easier to maintain and update across projects
Our Color Palette Generator uses industry-standard algorithms to create professional color series that ensure consistency and accessibility in your design systems.
