Palette Lab

Live Preview

Palette in Action

See how your Monochrome palette (#3B82F6) 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

#E3EDFC

100

#E2ECFD

200

#B1CDFA

300

#80AEF8

400

#5895F7

500

#3B82F6

600

#1068F8

700

#0656DA

Accent

#CF8917