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.
gray
red
orange
yellow
green
teal
blue
indigo
purple
pink
slate
About the Color System
This tool uses the @arco-design/color library to generate color series. You can input any valid color value (HEX, RGB, or HSL format) to generate a complete color series, ranging from the lightest (50) to the darkest (950) shades.
These colors can be directly applied to your design system, ensuring color consistency and accessibility. Click any color block to copy its color value.
How to Use
- Click a color block to copy the color value
- Use the format button at the top to switch color formats (HEX, RGB, HSL)
- Toggle light/dark mode to view different color schemes
- Input custom colors and names to generate your own color series
About the Color Algorithm
The Color Palette Generator incorporates a color algorithm based on dynamic gradients, sourced from arco.design @arco-design/color. Building on the light color algorithm, it has been inverted and fine-tuned to develop a color algorithm for dark mode. The palette includes various commonly used colors, divided into 11 gradients according to Tailwind's common theme rules. Typically, we use the 6th color as the primary color in the palette.
