Brand Palettes
Professional color systems based on Tailwind CSS for consistent brand representation.
Understanding Brand Palettes
Power UI's brand palette system generates 12 carefully calibrated shades from any brand color you choose. These shades (25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) provide a complete range from near-white to deep, rich tones. The 500 shade serves as your base brand color, with lighter shades for backgrounds and darker shades for emphasis and contrast.
The brand palette uses advanced OKLCH color space calculations to maintain perceptual consistency across all shades. This ensures excellent contrast ratios for accessibility, smooth gradients for data visualization, and natural color relationships. When you input a brand color, Power UI automatically generates the full 12-shade palette that works seamlessly across all visual contexts and theme modes.
Built-in Brand Palettes
Power UI includes several built-in brand palettes to get you started quickly. You can also choose from Tailwind CSS color families including red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, and more. Each palette is optimized for data visualization with clear differentiation between values.
red
orange
amber
yellow
lime
green
emerald
teal
The 500 shade typically serves as your primary brand color, while the 300-400 shades work well for hover states and the 600-700 shades provide emphasis. Lighter shades (25-200) create subtle backgrounds and the darkest shades (800-950) ensure strong contrast for text and critical UI elements.
How Brand Palettes Work
Brand palettes apply intelligently across your theme. Primary colors become the default for data series, secondary shades handle accents and highlights, and the full spectrum provides options for complex visualizations. The system maintains color relationships even as you switch between different visual types.
Each brand palette integrates seamlessly with the token system, ensuring that your brand colors adapt properly in light and dark modes. The 12-shade structure provides enough variation for sophisticated designs while maintaining simplicity for everyday use.
Next: Neutral Palettes
Learn how neutral color systems create professional UI foundations.
Continue to Neutral Palettes →