Color Palette Ideas
76 hand-picked color palettes for websites, apps and brands. Copy the hex codes or open any palette in our color tools.
76 palettes · click a palette for its color details, CSS and tools
About these color palettes
Each palette in this collection is curated for real interface work: a mix of neutrals for backgrounds and text, a confident primary color, and accents for highlights. Use them as a starting point for a website, an app theme or a brand — copy them as CSS variables, adjust them in the Color Palette Generator, or preview them on dashboards, landing pages and mobile screens in the Palette Visualizer before you commit.
All Color Palettes A–Z
- 70s Lounge
- 80s Arcade
- Apricot & Teal
- Arctic Lights
- Aurora Borealis
- Autumn Leaves
- Berry Smoothie
- Blueprint
- Bubblegum Pop
- Charcoal & Coral
- Cherry Blossom
- Citrus Punch
- Coffee House
- Cotton Candy
- Creative Studio
- Cyberpunk
- Deep Space
- Denim & Canvas
- Desert Clay
- Dusty Rose
- Eco Brand
- Electric Violet
- Evergreen & Gold
- Fiesta
- Fintech Trust
- Flamingo Beach
- Forest Walk
- Glacier
- Golden Hour
- Health & Calm
- Honey Bee
- Indigo Night
- Ivory & Ink
- Jungle Night
- Lagoon Mist
- Laser Tag
- Lavender Fields
- Lemonade
- Lilac Dream
- Luxury Noir
- Marine Signal
- Matcha Latte
- Midnight Neon
- Mint Chip
- Mod 60s
- Moss & Stone
- Neon Tokyo
- Nordic Frost
- Ocean Breeze
- Olive Grove
- Papaya Punch
- Peach Sorbet
- Pebble Beach
- Pistachio Cream
- Playful Kids
- Plum Wine
- Polar Night
- Retro Diner
- Rose Gold
- Royal Velvet
- Saffron Spice
- Sage & Linen
- Sandstone
- Seafoam Coast
- Sky Candy
- Slate Sky
- Spring Meadow
- Startup Fresh
- Sunset Boulevard
- Synthwave
- Terracotta Home
- Toxic Lime
- Tropical Lagoon
- Vintage Postcard
- Volcanic
- Wheat Field
How to Use These Palettes
- 1Filter the palettes by mood (warm, pastel, neon, brand-like and more) or by their dominant hue, and sort them by lightness if you like.
- 2Click a palette to open it and see each color's name, HEX, RGB and HSL values.
- 3Click any value to copy it, or copy the whole palette as CSS custom properties.
- 4From the popup, open the palette in the Color Palette Generator to edit it, preview it on real UI in the Palette Visualizer, build a tints and shades scale from its main color, or check its text contrast. Each tool opens in a new tab.
Frequently Asked Questions
Yes. Every palette here is free to use in personal and commercial projects — websites, apps, branding, slides and more. No sign-up or attribution needed.
Click a palette, then use Copy in its CSS panel to copy it as CSS custom properties, like --sunset-boulevard-1: #264653;. Paste the block into your stylesheet and use the variables anywhere with var().
Most interfaces work well with four to six colors: one or two neutrals for backgrounds and text, a primary color for buttons and links, and one or two accents. That's why every palette in this collection has between four and six colors.
Click a palette and choose Contrast Checker. It opens the palette's darkest and lightest colors in the Color Contrast Checker, which tells you whether that text and background pair passes WCAG AA and AAA. The Palette Visualizer also flags failing pairs on real UI mockups.
Yes. Open any palette and press Save, or save your own from the Color Palette Generator. Saved palettes appear under the Saved filter, where you can rename or delete your own. They are stored in your browser, so no account is needed — but they don't sync between devices.
It groups palettes by the hue that carries the most color across all of their swatches, so a palette of mostly blues with a small orange accent still shows up under Blue. Palettes made of grays, whites and blacks are grouped as Neutral.
Related Tools
More free CSS generators you might like.