Palette Lab

Live Preview

Palette in Action

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

#F8E8E7

100

#F2D1CE

200

#E8AAA5

300

#E0827B

400

#D96259

500

#D34A40

600

#C23328

700

#A2281F

Accent

#2BB1BB