Palette Lab

Live Preview

Palette in Action

See how your Complementary palette (#4466D3) looks on real UI components.

Edit Palette

Buttons

Cards

Gradient Header

A card with a gradient header using your palette mid-tones.

Accent Border

Side-accented card using palette extremes for text and the lightest tone as background.

Dark Card

Built on the darkest palette stop. Great for feature highlights or CTAs.

Badges & Tags

50 100 200 300 400 500 600 700 Accent
50 100 200 300 400 500 600 700
Default Info Accent Dark

Alerts

Information

This is an informational alert using your palette base tones.

Accent Alert

Using the accent color as a highlight against a light palette background.

Dark Alert

A solid dark alert built on the deepest palette stop.

Form Elements

I agree to the terms

Typography

Heading Display

Secondary Heading

Body text styled with the 500-level stop. This is how paragraph content would look in your color system. It provides enough contrast for comfortable reading while maintaining the palette identity.

A lighter secondary text using the 300-level stop. Useful for captions, timestamps, and metadata.

Accent-colored link

Dashboard

Revenue

$48,290

+12.5% from last month

Users

2,847

+8.1% from last month

Orders

1,024

+3.2% from last month

Conversion

36.0%

+2.4% from last month

Weekly Activity

Mon Tue Wed Thu Fri Sat Sun

Table

Name Role Status Action
Alex Morgan Designer Active Edit
Sam Rivera Developer Active Edit
Jordan Lee Product Away Edit
Casey Kim Marketing Active Edit

Navigation

Dashboard Analytics Settings Team
Overview Analytics Reports Settings

Progress & Indicators

Storage Used72%
Upload45%
Capacity91%

Palette Reference

50

#E7EBF8

100

#D2DAF3

200

#A9B8E9

300

#7F96E0

400

#D9BB5D

500

#D3B144

600

#C4A02A

700

#A58521

Accent

#BA982C