##### Amara Evans

amara@example.com

Pro

### Upgrade to Pro

Get access to all features

- Advanced Analytics
- Team Collaboration
- API Access

Upgrade Now
Upgrade to Pro
Log Out

# Colors

Our comprehensive color system provides a wide range of utility classes for styling text and backgrounds. The color palette includes semantic colors (primary, secondary, success, etc.), brand colors, and gradient variations. Each color comes with multiple variants including pale and soft versions for subtle backgrounds. These utility classes follow a consistent naming convention and are designed to work seamlessly with your design system, ensuring accessibility and visual hierarchy throughout your application.

### Text Colors

Text color utilities provide precise control over typography appearance and readability. The collection includes a full spectrum of colors from vibrant brand colors to subtle muted tones. Semantic colors like `.text-primary` and `.text-secondary` maintain consistency with your theme, while specific color classes like `.text-blue` or `.text-red` offer exact color control. Gradient text classes create eye-catching headings and call-to-action elements. All text colors are optimized for contrast and accessibility standards.

Text Colors
Loading...
Text Colors
Loading...

### Solid Background Colors

Background color utilities offer three intensity levels for each color: standard, pale, and soft variants. The standard background classes (e.g., `.bg-blue`) provide full-intensity colors perfect for buttons, badges, and prominent elements. Pale variants (e.g., `.bg-blue-pale`) offer subtle backgrounds ideal for cards, notifications, and content sections. Soft variants (e.g., `.bg-blue-soft`) provide the most subtle option, perfect for hover states and gentle highlighting. Each variant is carefully calibrated to work with appropriate text colors for optimal readability and visual appeal.

Solid Background Colors
Loading...
Solid Background Colors
Loading...

### Gradient Background Colors

Gradient backgrounds add visual depth and modern appeal to your interface elements. Our curated collection of gradient classes features smooth color transitions that work beautifully for hero sections, cards, buttons, and decorative elements. Each gradient is carefully designed with appropriate color stops and directions to ensure visual harmony. Gradients 1-8 use vibrant color combinations with white text, while gradient-9 features a lighter palette suitable for dark text. These gradients are optimized for both aesthetic appeal and performance across all devices.

Gradient Background Colors
Loading...
Gradient Background Colors
Loading...
`ESC`

###### Quick Links

###### Dashboard

Analytics Overview

###### Profile

View your profile

###### Settings

Manage preferences

###### Help Center

Get support

###### Recent Searches

Analytics Dashboard User Settings Email Templates