Color palette for your website

Copy
Color name
#648F3BA
Copy
Color name
#648F3BA
Copy
Color name
#648F3BA
Copy
Color name
#648F3BA
Copy
Color name
#648F3BA
Copy
Color name
#648F3BA
Copy
Color name
#648F3BA
Generate
Export to CSS
Like this palette
Show more

Live Color Palette Demo

This page was built using your selected palette. You can see how the palette could be used and maybe looking at it will spark new ideas for your project!

Mockup 0

Explore Your Palette in Context

Here’s how your selected colors might appear on a lighter background. This helps visualize UI elements like cards, text, and subtle backgrounds using the base and accentuation tones.

Palette-Driven Design

This card uses base-color as background and dark for text. It's perfect for UI surfaces like panels, modals, or form containers.

Accent on Dark

This block uses the dark color as a background with light text. Great for contrast areas like footers or callouts.

Inspiration Grid

These cards simulate a visual content section, perfect for blog snippets, product displays, or galleries.

Mockup 1

Clean layout blocks using primary as a highlight color for buttons and headings.

Mockup 2

Use your base color to anchor content in calm neutral zones like this.

Mockup 3

Bright accentuation colors draw attention to CTAs and active areas.

Mockup 4

Dark primary tones are perfect for contrast-heavy footers or headers.

Mockup 5

Light base shades are subtle backgrounds that won’t overpower content.