Skip to content
GlassMarshmallow
Back: Tools

Palette generator

Pick a base color and a harmony to get a palette with a role for each color, applied to a sample page built with the framework. Every color meets its contrast in light and dark mode.

Preview

Base color

0°
0 %
100 %

Text contrast

White text: 1,0:1 Below AA
Black text: 21,0:1 Readable (AA)
Harmony

Palette colors

  • Background#f5f9fa
  • Surface#ffffff
  • Text#1d2e3013.3:1 AAA
  • Secondary text#5773754.8:1 AA
  • Primary#5cdfeb
  • Text on primary#00000013.2:1 AAA
  • Secondary#cbf6e4
  • Accent#1b6dde4.6:1 AA
Sample texts
/* Generated with GlassMarshmallow */
:root {
  --gm-bg: #f5f9fa;
  --gm-surface: #ffffff;
  --gm-surface-solid: #ffffff;
  --gm-surface-glass: #ffffff;
  --gm-form-bg: #ffffff;
  --gm-header-bg: #ffffff;
  --gm-text: #1d2e30;
  --gm-nav-link: #1d2e30;
  --gm-text-secondary: #577375;
  --gm-muted: #577375;
  --gm-primary: #5cdfeb;
  --gm-on-primary: #000000;
  --gm-tag: #cbf6e4;
  --gm-fill-subtle: #cbf6e4;
  --gm-accent: #1b6dde;
  --gm-link: #1b6dde;
  --gm-focus: #1b6dde;
  --gm-field-focus: #1b6dde;
}

[data-theme="dark"] {
  --gm-bg: #0c1617;
  --gm-surface: #172526;
  --gm-surface-solid: #172526;
  --gm-surface-glass: #172526;
  --gm-form-bg: #172526;
  --gm-header-bg: #172526;
  --gm-text: #ecf3f4;
  --gm-nav-link: #ecf3f4;
  --gm-text-secondary: #adc1c2;
  --gm-muted: #adc1c2;
  --gm-primary: #5cdfeb;
  --gm-on-primary: #000000;
  --gm-tag: #0f5739;
  --gm-fill-subtle: #0f5739;
  --gm-accent: #5c97eb;
  --gm-link: #5c97eb;
  --gm-focus: #5c97eb;
  --gm-field-focus: #5c97eb;
}

How to apply the palette colors

A palette is not split evenly. The 60-30-10 rule helps the page look balanced: lots of calm color, some supporting color and very little strong color, which is what guides the eye.

  • 60 % for the background and surfaces: the least noticeable color, taking the most space.
  • 30 % for the secondary: tags, alerts, highlighted areas and blocks you want to set apart from the background.
  • 10 % for the primary and the accent: action buttons, links and icons. If it is everywhere, it stops standing out.

Where each color goes

  • BackgroundThe background of the whole page. Neutral, with a little of the base hue so it is not just gray.
  • SurfaceCards, forms, menus and the navigation bar: everything that sits on top of the background.
  • TextHeadings and main text. Reaches 7:1 on the background (AAA).
  • Secondary textDescriptions, hints and less important text. Reaches 4.5:1 on the background (AA).
  • PrimaryThe main action button and the elements that must stand out most. One per area at most.
  • Text on primaryText and icons on primary buttons: white or black, whichever has more contrast.
  • SecondaryTags, alerts and highlighted area backgrounds. Carries the regular text.
  • AccentLinks, icons and the keyboard focus. Readable on the background and the surface.

Rules for using it well

  • Regular text needs 4.5:1 against its background (7:1 for AAA), and field borders and icons need 3:1. The palette comes adjusted; if you change a color, measure it again.
  • Do not rely on color alone to convey information: pair it with text or an icon (an error in red also says it is an error).
  • State colors (success, warning and danger) stay outside the palette: mint, lemon and coral in GlassMarshmallow.
  • Try it in light and dark mode: the CSS includes both, and dark is not just light inverted.
  • Use the primary sparingly: if everything stands out, nothing does.