Color Palette Generator

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, HSL, or OKLCH 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, OKLCH)
• 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.

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): Represents the color angle in degrees (0-360)

OKLCH provides better perceptual uniformity and is especially useful for creating accessible color palettes and smooth gradients.