Color Mood Board Generator

Color mood board generator for palettes, fonts and CSS

This color mood board generator turns a mood or an industry into a ready-to-edit board: a curated palette, a Google Font pairing and a live interface preview. You use it to find a direction fast, test it on real components and export it. It is free, runs in your browser and needs no signup.

How to make a color mood board in six steps

1. Type a mood or industry such as "calm fintech" into Describe a mood or industry and press Generate. Or choose a board from Or start from a preset.
2. Read the short description under the board title. It explains the feeling the palette aims for and which brands it suits.
3. Edit the colors under Mood board colors. Change a value, drag the handle to reorder, remove a color or press Add color.
4. Lock the colors you like, then press Regenerate unlocked to get new variations of the rest.
5. Change the Heading font and Body font and check the preview and contrast results.
6. Use Copy palette, Copy CSS, Download PNG, Export JSON or Share link to take the board with you.

Mood and industry presets you can start from

The tool ships with 26 hand-picked starting boards: 14 moods and 12 industries. Each preset has seven colors and a heading and body font pairing. Pick the closest match, then adjust it.

Other moods include Playful, Bold, Minimal, Romantic, Natural, Vintage, Futuristic, Pastel, Moody, Tropical and Earthy. Other industries include Healthcare, Fashion, Education, Real Estate, Travel & Hospitality, Beauty & Cosmetics, Nonprofit and Kids & Toys. Surprise me jumps to a random one.

How does the mood or industry field pick a palette?

The field matches your words against keywords attached to each preset. "Sports" finds Energetic, "bakery" finds Food & Beverage and "edtech" finds Education. When your text contains both a mood and an industry word, the industry wins, so "calm fintech" loads Finance.

The tool does not invent a palette from scratch. If nothing matches, it tells you and suggests words such as calm, bold, retro, fintech or wellness. Then you shape the result with the color controls.

Mood board palette controls you can use

• Editable colors: change any value with the color picker or by typing a HEX code. A board holds 3 to 10 colors.
• Drag to reorder: use the handle, or focus it and press Arrow Up or Arrow Down.
• Lock and regenerate: locked colors stay put. Unlocked colors shift slightly in hue, saturation and lightness, so the mood survives.
• Reset: restores the preset palette and its fonts.
• Color roles: each board labels colors as Background, Surface, Text, Primary, Accent or Supporting, so you see how each one will work in a layout.
• Color details: click a swatch to open its details, or click a HEX label to copy it.

How are mood board color roles like Primary and Accent assigned?

The tool assigns roles automatically from the colors on your board, so any edit gets a sensible preview. On a light board, the lightest color becomes the Background and the darkest becomes the Text color. On a dark board, with several near-black colors and nothing very light, that logic flips.

The most colorful remaining color becomes Primary. The Accent is a colorful color whose hue is clearly different from the Primary. Surface is the next background-like tone, used for the card in the preview. Everything left is labeled Supporting.

If you reorder or edit colors and the roles change, that is expected. Roles follow the color values, not their position in the list.

Mood board font pairing from Google Fonts

The font pairing panel shows a headline and body text in your chosen fonts, coloured with your palette. You can choose from 19 open-source Google Fonts, including serifs such as Playfair Display, sans-serifs such as Inter and display faces such as Bebas Neue. Each font links to its Google Fonts page.

Fonts load from Google only when the preview is shown. For a wider search, try the font pairing generator.

How do mood board UI preview contrast checks work?

The preview applies your palette to a navigation bar, a card, badges, an input and two buttons, then measures four text and UI pairings against WCAG. Each result shows a ratio and a pass or fail. The rules come from WCAG 2.2 success criterion 1.4.3: normal text needs at least 4.5:1.

The four checks are body text on background, card text on surface, button text on primary (all 4.5:1) and primary as a UI color on the background (3:1). That last threshold follows the non-text contrast criterion.

Worked example: mood board contrast with the Calm preset

The Calm board includes #2C5F7A and #7EC8C8. White text on #2C5F7A measures about 6.94:1, which passes AA. White text on #7EC8C8 measures about 1.91:1, which fails badly. Near-black #111827 on #7EC8C8 reaches about 9.28:1.

The lesson: a light teal works as a background or accent, but not as a surface for white text. The tool picks black or white button text automatically, and the checks show you when a pairing falls below its minimum. For any pair, you can run the contrast checker.

Export mood board colors as CSS variables, PNG or JSON

Press Copy CSS to get a :root block with your numbered palette, the assigned roles and both font stacks. Custom properties like these can be reused anywhere in a stylesheet, as MDN's guide to CSS custom properties explains. The output looks like this:

:root {
  --mood-1: #7EC8C8;
  --mood-bg: #F0F7F4;
  --mood-primary: #2C5F7A;
  --mood-font-heading: 'Lato', system-ui, sans-serif;
  --mood-font-body: 'Source Sans 3', system-ui, sans-serif;
}

The values change with your board. Other exports: Copy palette gives a HEX list, Download PNG saves a 1200 x 630 image for decks and chats, Export JSON saves palette, roles and fonts, and Share link copies a link that restores your board. To turn the palette into a full theme, continue in the CSS variable theme generator.

Color palette generator by industry: what to expect

Industry presets follow the conventions people already expect in each field. Healthcare uses trustworthy greens and blues on clean whites. Finance combines deep navy and green with a gold accent. Kids & Toys uses bright primary colors, and Gaming puts neon purple, electric blue and acid green on near-black.

Following convention makes a brand feel familiar at first glance. Breaking it, for example a bold orange in a healthcare board, can set you apart. Use the preset as a baseline, then decide deliberately where to differ. You can also browse finished examples in the healthcare color palettes collection.

Tips for choosing brand mood board colors

• Start with the audience, not the swatch. Pick the mood your customers should feel, then test the palette. The color emotion and psychology guide covers common associations.
• Keep one dominant and one accent. A mood board color palette of seven colors usually needs a neutral background, a text color, one primary and one accent. The rest should support.
• Check contrast before you commit. Light, pastel and neon colors often fail as text backgrounds. Read the four checks after every edit.
• Limit font styles. Two fonts are enough. Using the same family for both, as the Minimal preset does, is fine.
• Do not treat associations as rules. Meanings of color vary across cultures and industries, so test with your real audience.
• Save a version before experimenting. Copy the palette or use Share link, then regenerate freely. Reset brings back the preset if you lose your way.

When should you use a color palette by mood?

A mood-led palette helps most at the start of a project, when you need direction before final assets exist. Designers use it for client pitches, developers for prototypes and theme tokens, and marketers for campaign boards. A mood board is a visual collage that communicates a style, as the Wikipedia article on mood boards describes.

If you already have a photo that captures the feeling, extract a palette from an image instead. If you need related hues, the color harmonies generator builds complementary and analogous schemes.

Once your board feels right, create lighter and darker steps of the primary color with the tint and shade scale generator to cover hover states, borders and backgrounds.