Use a Five-Colour Palette Without Equal Shares

A five-colour palette is not an instruction to give five colours equal space. When each colour competes for the same amount of attention, the page loses hierarchy. When each has a defined role, the same palette can feel ordered while still having range.

We will use the real Midnight SaaS palette from the Modern SaaS category: Midnight #0F172A, Slate #1E293B, Electric Blue #3B82F6, Emerald #10B981 and Snow #F8FAFC.

Give every colour a job before setting a proportion

Start with intent, not percentages. In this palette, Midnight is the main background. Snow is the reading colour. Electric Blue is the primary interactive colour, used for the dominant action and active navigation. Slate is the secondary surface, separating cards or a side panel from the background. Emerald is the accent, reserved for a success state, a completed step or one small piece of live status information.

• Background: Midnight #0F172A establishes the largest visual field.
• Text: Snow #F8FAFC handles body copy, headings and text inside dark areas.
• Primary: Electric Blue #3B82F6 identifies the main action, key links and selected navigation.
• Secondary: Slate #1E293B creates quieter panels, cards and grouped regions.
• Accent: Emerald #10B981 signals a distinct, limited meaning such as success, availability or a completed task.

These labels are not permanent properties of the hex values. They are decisions for this page. A colour can take a different role in another product, but avoid giving it two unrelated meanings within one interface. If Emerald means “complete”, do not also use it as a general decorative highlight.

An area split that is useful, not a rule

For a dark product page, try a first pass of roughly 70% Midnight, 20% Slate, 7% Snow, 2% Electric Blue and 1% Emerald. Those figures cover surfaces and text areas, not every pixel. They are an adaptable heuristic, not a formula to enforce. A text-heavy documentation page may need more Snow; a dashboard with many grouped cards may need more Slate; a campaign landing page may temporarily need more Electric Blue.

The point of the split is to make the default state quiet. Midnight and Slate carry structure. Snow makes content readable. Blue shows where to act. Emerald earns attention because it is scarce. If a layout still feels busy, reduce the area taken by the two signal colours before adding another neutral.

A balanced layout

Imagine a product dashboard. Use Midnight for the shell, header and wide content background. Put summary cards and a settings panel on Slate. Set headings, metric labels and body text in Snow. Make one “Create project” button Electric Blue, along with the active navigation item and ordinary text links. Use Emerald only for a small “All systems operational” badge and a positive change indicator. The eye can travel from content to action to status without being pulled in every direction.

An overused-accent layout

Now colour every card border Emerald, fill all secondary buttons with Emerald, make chart series Emerald and use it for notification dots, filters and tags. The status signal no longer signals status. The accent becomes a second primary colour, while the page has fewer visual pauses. The remedy is not necessarily a new palette. Return Emerald to a narrow semantic job, use Slate for card boundaries and use Snow text plus spacing to organise information.

Check the pairs you will actually place together

Contrast is a property of a foreground and its actual background, not of a swatch in isolation. W3C’s guidance for WCAG 2.2 says normal text needs at least 4.5:1 and large-scale text at least 3:1 under SC 1.4.3; it also explains that contrast is assessed against the specified background in normal use. Read the W3C explanation of text contrast.

The figures use the W3C sRGB relative-luminance method and are rounded to two decimal places. They are examples of useful intended pairings, not approval for every possible arrangement.

• Snow #F8FAFC on Midnight #0F172A: 17.06:1. Strong body-copy pairing.
• Snow #F8FAFC on Slate #1E293B: 13.98:1. Strong card-copy pairing.
• Electric Blue #3B82F6 on Midnight #0F172A: 4.85:1. Suitable for normal-sized blue text on the Midnight background, subject to the actual rendered state.
• Emerald #10B981 on Midnight #0F172A: 7.04:1. A high-contrast accent on the main background.
• Emerald #10B981 on Slate #1E293B: 5.77:1. Useful for a status label within a Slate panel.
• Snow #F8FAFC on Electric Blue #3B82F6: 3.52:1. Do not use this for normal button text; it only clears the 3:1 threshold associated with large text.
• Snow #F8FAFC on Emerald #10B981: 2.42:1. Do not use this as readable button or label text.

A compact CSS start makes the intended roles visible in one place:

:root {
  --background: #0F172A;
  --surface: #1E293B;
  --text: #F8FAFC;
  --primary: #3B82F6;
  --accent: #10B981;
}

.page { background: var(--background); color: var(--text); }
.card { background: var(--surface); }
.button-primary { background: var(--primary); color: #0F172A; }
.status-ok { color: var(--accent); }

The primary button deliberately uses Midnight text rather than Snow. Test that exact pairing in your component and then test the rendered button, including its border, icon and focus treatment. Use the contrast checker when you change a value, introduce transparency or place text over an image.

Apply the palette to common interface moments

For a marketing page, let Midnight frame the hero and footer, Slate hold testimonials or feature cards, Snow carry copy and Electric Blue mark the primary call to action. Emerald can show only a proof point such as availability or a successful subscription. For an application screen, use the same roles in a denser arrangement: Slate for data groups, blue for the action that advances the task, and Emerald for completion or healthy status. Do not depend on colour alone to communicate an error, selection or status: add clear text, an icon, position or another visible cue.

For related dark interfaces, explore Ocean Depth or Electric Coral. If you need a calmer, light-surface equivalent, compare Nordic Frost. The palette generator can help you create alternatives, but repeat the role assignment and pair checking rather than simply copying a five-swatch distribution.

Test states, not only the resting screen

Every interactive state needs testing: default, hover, keyboard focus, active or pressed, selected, visited links where relevant, disabled, loading, success, warning, error, empty and validation states. Also check icons, borders, charts, toggles, form inputs and focus indicators. W3C’s non-text contrast guidance says visual information needed to identify user-interface components and states should reach 3:1 against adjacent colours, apart from inactive components. Read the W3C explanation of non-text contrast.

Pair checking is a valuable design and engineering check, but it does not certify a page. WCAG conformance applies to full pages and complete processes, and W3C describes testing as a combination of automated checks and human evaluation. Read W3C’s conformance guidance. Review the real content at its delivered sizes, with zoom and keyboard navigation, and include usability testing where you can. A five-colour system becomes dependable through that work, not through its swatch count.