British Palette

Bright primaries over cool slate. The greys are the real content: five steps from near-white to midnight blue.

Live preview

Everything below is the real component. Change the controls, tab through it, and turn on Inspector Mode to read any value off the screen.

20 colours

Drawn by Jan Losert for Flat UI Colors 2.Original

FormatOrderClick any swatch to copy its value.

01 · Text colours

A palette ships hues, not a text ramp. These five are solved against the page background rather than mixed by percentage — "secondary" means 8:1 on every one of the fourteen palettes, so the pages stay comparable and none of them ships a ramp that fails. Disabled sits below the floor deliberately; it is the one role WCAG exempts.

PrimaryHeadings and high emphasis#f4f4f6Derived · near-white holding 8% of Hint of Pensive's hue — this palette ships no neutral pale enough for body copy15.16:1

SecondaryBody copy#b0b4beDerived · solved to 8:1 on the page8.03:1

TertiarySupporting detail#8f95a2Derived · solved to 5.5:15.54:1

MutedCaptions, metadata, placeholders#7e8595Derived · solved to 4.5:1 — the floor for body text4.50:1

DisabledInactive — formally exempt from contrast#565f73Derived · solved to 2.6:1, deliberately below the floor2.60:1

02 · Surfaces and backgrounds

Anchored on Pico Void, the darkest colour in the set. The rest of the ladder is computed, because no palette ships two darks that happen to sit 16% apart — and depth read from surface lightness is the only kind that survives greyscale, high-contrast mode and a phone in sunlight.

Page backgroundThe furthest-back plane#111d3aDerived · 32% toward black from Pico Void

SurfaceCards, panels, the default plane#152348Derived · 16% toward black from Pico Void

Surface elevatedMenus, dialogs, anything raised#192a56Row 4, Col 4 · Pico Void

Surface hoverPointer over a row or a card#293962Derived · 7% toward white from the elevated surface

BorderDividers and default edges#344061Derived · solved to 1.5:1 on the surface — visible, not loud1.50:1

Border strongInputs, checkboxes, anything you can click#646e86Derived · solved to 3:1 — the floor for a control boundary3.01:1

03 · Semantic colours

Primary is the palette’s opening colour — designers lead with their signature. The status roles are the nearest hue this palette carries to each target, which is the honest version of a choice usually made by eye. Hover prefers a darker sibling the designer actually drew; active is always computed. Where a role sits far from its ideal hue, the row says so.

PrimaryRow 1, Col 1 · Protoss Pylon — the palette's opening colour

base#00a8ff

hover#0097e6

active#0080c2

Label on the fill: the page colour at 6.38:1 · Hover is a palette colour.

SuccessRow 1, Col 4 · Download Progress

base#4cd137

hover#44bd32

active#3a9f2a

Label on the fill: the page colour at 8.32:1 · Hover is a palette colour.

InfoRow 1, Col 5 · Seabrook

base#487eb0

hover#3f6f9b

active#376086

Label on the fill: white at 4.30:1 — under 4.5:1, so this fill can only carry large text. · Hover is derived.

WarningRow 1, Col 3 · Rise-N-Shine

base#fbc531

hover#e1b12c

active#bf9625

Label on the fill: the page colour at 10.42:1 · Hover is a palette colour.

DangerRow 3, Col 1 · Nasturcian Flower

base#e84118

hover#c23616

active#b03112

Label on the fill: the page colour at 4.13:1 — under 4.5:1, so this fill can only carry large text. · Hover is a palette colour.

AccentRow 1, Col 2 · Periwinkle

base#9c88ff

hover#8c7ae6

active#7767c2

Label on the fill: the page colour at 5.85:1 · Hover is a palette colour.

04 · Component examples

The moment the palette stops being a picture. Filled, outlined and text buttons across five roles, four field states, and the selection controls — a colour that read as confident in a swatch grid often cannot hold a five-character label, and there is no way to discover that except by putting the label on it.

Buttons

filledPrimarySuccessInfoWarningDangerDisabled

outlinedPrimarySuccessInfoWarningDangerDisabled

textPrimarySuccessInfoWarningDangerDisabled

Input fields

DefaultInput text

FocusInput text

FilledInput text

DisabledInput text

Checkbox, radio and switch

CheckedUncheckedDisabled

SelectedUnselectedDisabledOnOff

05 · Chart colours

Eight hues spread around the circle, each required to clear 3:1 against the page — under WCAG 1.4.11 a chart mark is a meaningful graphic, so a series nobody can see is not a style choice. This set is kept separate from the semantic roles on purpose: a series that happens to be red must not read as a failure.

#c23616#fbc531#e1b12c#44bd32#0097e6#487eb0#f5f6fa#9c88ff

Direct24%Organic18%Social14%Referral12%Email10%Paid search9%Affiliate8%Other5%

Eight hues spread around the circle, every one of them measured at 3:1 or better against this page — a chart mark is a meaningful graphic, not decoration. None of them carries a status meaning, which is the entire reason this set is separate from the one above.

06 · Alerts and notifications

The four status roles doing the job they exist for, each with an icon and a word alongside the fill. Run these through a greyscale filter — if you can still tell the error from the success, colour was reinforcing the message rather than carrying it.

Success. Your changes have been saved.

Info. This is an informational message.

Warning. Please check your input carefully.

Error. Something went wrong. Try again.

Every one of these carries an icon and a word as well as a fill. Remove the colour and the four are still distinguishable — which is the test, because for a good number of readers the colour was never there.

07 · Elevation

The one part of the system that is not derived from the palette and never should be. Shadows are black at rising alpha on every palette on earth; on a page this dark they barely register, which is why the surface ladder in section 02 is what actually carries depth.

Level 0FlatPage, and anything not raised

Level 1RaisedCards at rest

Level 2HoverA card under the pointer

Level 3OverlayMenus and popovers

Level 4ModalDialogs and drawers

Black at rising alpha, on every palette. A shadow is the absence of light, so tinting it with the brand hue is how a dark theme starts looking bruised. On very dark pages the shadow does almost nothing and the surface ladder above is what carries depth.

Do

Take the hues, rebuild the rampTwenty flat values is a mood board, not a system. Lift the hues you want, generate a perceptually even ramp from each, and put those in the semantic tier — that is what makes the palette themeable, auditable and extensible.

Use it where colour carries no valenceCharts, tags, avatars, calendar categories. These are the jobs a decorative palette is genuinely good at, because nothing here has to mean "this failed" to someone who cannot see it.

Pico VoidLynx White

Reach for Pico Void and Lynx White before the middleThe ends do the structural work. Pico Void #192a56 is the darkest value here — 13.94:1 on white — and Lynx White #f5f6fa the lightest, at 19.45:1 on black. A palette's usable contrast lives at its extremes, and the extremes are the two swatches people skip.

Don't

Do not map these onto success, warning and dangerA status colour has to clear 4.5:1 against the surface it sits on, in both themes, next to an icon and a word. These were drawn to look good in a grid. The two requirements overlap by accident, never by design.

Do not paste the hex into a componentA literal hex cannot be themed, cannot be audited, and cannot be found later. Every one of these values belongs behind a custom property, exactly like the values in our own token tiers.

Do not call a colour accessible without naming the surface6 of these 20 can set body text on a white page and 14 can on a black one — and none manage both. The two sets are nearly disjoint by arithmetic, not by taste. Pick the surface first and the palette divides itself.

Accessibility

Not a checklist to run at the end. These are the requirements the component was built from.

1.4.1Use of ColorA1.4.3Contrast (Minimum)AA1.4.11Non-text ContrastAA

Contrast

6 of 20 colours clear 4.5:1 against white and can carry body text on a light page. 14 clear it against black. None do both.
Those two sets are nearly disjoint for a reason, not by accident: a colour’s contrast with white multiplied by its contrast with black is always exactly 21. Clearing 4.5:1 on one surface leaves at most 4.67:1 on the other.
12 of 20 reach 3:1 on white, which is the bar for large text, icons, borders and chart marks — a much larger set, and the one most of this palette is genuinely for.
White and black are the bounds, not our surfaces. Against a real canvas the numbers move, and alpha moves them again — composite first or the ratio is fiction.

Keyboard

`Tab`	Moves through the swatches; each one is a button that copies its value.
`⌘I`	Inspector Mode reports the live contrast of anything on this page.

Screen readers

A colour has no accessible meaning. If a chart series is identified only by its fill, the series does not exist for a screen reader — label it directly or provide the table.
Colour names like “Jigglypuff” or “Wet Asphalt” are identifiers, not descriptions. Never use one as the only label for a state.

Focus & touch

Swatches take the standard focus ring, offset outwards. An inset ring would have to sit on the colour being demonstrated and would fail contrast on roughly half of these values.
Swatches are 88px tall and at least 152px wide, comfortably past the 44px minimum, so the copy affordance is reachable on a phone without a precise tap.

Attribute	Applied to	Notes
aria-label	Each swatch	Names the colour and its value, because the swatch itself announces as nothing — a background colour is invisible to a screen reader.
forced-colors: active	Media query	Windows High Contrast Mode discards this palette wholesale. Anything that was only distinguishable by fill becomes identical.

Code

Example usage

What this palette is for, and what it is not for.

tsx

1// A borrowed palette is categorical data, not a set of semantics.2// Bind it to series, not to states.3const GB_SERIES = [4  'var(--flat-gb-skirret-green)', // Skirret Green5  'var(--flat-gb-download-progress)', // Download Progress6  'var(--flat-gb-nanohanacha-gold)', // Nanohanacha Gold7  'var(--flat-gb-rise-n-shine)', // Rise-N-Shine8  'var(--flat-gb-hint-of-pensive)', // Hint of Pensive9  'var(--flat-gb-lynx-white)', // Lynx White10]1112<Chart series={data} colors={GB_SERIES} />1314// Text on any of them uses the measured pair, never a guess.15// Protoss Pylon takes #000000 at 8.05:1.16<span style={{17  background: 'var(--flat-gb-protoss-pylon)',18  color: '#000000',19}}>20  Protoss Pylon21</span>

CSS

The twenty plus the 37 they were expanded into. 12 of those are literal palette colours; the rest are computed, and each carries the arithmetic that produced it.

css

/* ---- The twenty, verbatim. Namespaced, so a borrowed value can never
        be mistaken for one of ours. ---------------------------------------- */
/* British Palette — Jan Losert, Flat UI Colors 2 */
:root {
  --flat-gb-protoss-pylon: #00a8ff;
  --flat-gb-periwinkle: #9c88ff;
  --flat-gb-rise-n-shine: #fbc531;
  --flat-gb-download-progress: #4cd137;
  --flat-gb-seabrook: #487eb0;
  --flat-gb-vanadyl-blue: #0097e6;
  --flat-gb-matt-purple: #8c7ae6;
  --flat-gb-nanohanacha-gold: #e1b12c;
  --flat-gb-skirret-green: #44bd32;
  --flat-gb-naval: #40739e;
  --flat-gb-nasturcian-flower: #e84118;
  --flat-gb-lynx-white: #f5f6fa;
  --flat-gb-blueberry-soda: #7f8fa6;
  --flat-gb-mazarine-blue: #273c75;
  --flat-gb-blue-nights: #353b48;
  --flat-gb-harley-davidson-orange: #c23616;
  --flat-gb-hint-of-pensive: #dcdde1;
  --flat-gb-chain-gang-grey: #718093;
  --flat-gb-pico-void: #192a56;
  --flat-gb-electromagnetic: #2f3640;
}

/* ---- The system derived from them. This is the half a palette does not
        ship, and the half a product cannot be built without. -------------- */
/* British Palette — a dark theme derived from the twenty.
   Jan Losert, Flat UI Colors 2. Values marked "taken" are the palette's own;
   everything else is computed from them by the rules on this page. */
:root {
  /* surfaces */
  --gb-page: #111d3a;                     /* derived */
  --gb-surface: #152348;                  /* derived */
  --gb-elevated: #192a56;                 /* taken */
  --gb-hover: #293962;                    /* derived */
  --gb-border: #344061;                   /* derived */
  --gb-border-strong: #646e86;            /* derived */

  /* text */
  --gb-text: #f4f4f6;                     /* 15.2:1 on the page */
  --gb-text-secondary: #b0b4be;           /* 8.0:1 on the page */
  --gb-text-tertiary: #8f95a2;            /* 5.5:1 on the page */
  --gb-text-muted: #7e8595;               /* 4.5:1 on the page */
  --gb-text-disabled: #565f73;            /* 2.6:1 on the page */

  /* semantic */
  --gb-primary: #00a8ff;                  /* taken */
  --gb-primary-hover: #0097e6;            /* taken */
  --gb-primary-active: #0080c2;           /* derived */
  --gb-primary-on: #111d3a;               /* 6.4:1 on the fill */
  --gb-success: #4cd137;                  /* taken */
  --gb-success-hover: #44bd32;            /* taken */
  --gb-success-active: #3a9f2a;           /* derived */
  --gb-success-on: #111d3a;               /* 8.3:1 on the fill */
  --gb-info: #487eb0;                     /* taken */
  --gb-info-hover: #3f6f9b;               /* derived */
  --gb-info-active: #376086;              /* derived */
  --gb-info-on: #ffffff;                  /* 4.3:1 on the fill */
  --gb-warning: #fbc531;                  /* taken */
  --gb-warning-hover: #e1b12c;            /* taken */
  --gb-warning-active: #bf9625;           /* derived */
  --gb-warning-on: #111d3a;               /* 10.4:1 on the fill */
  --gb-danger: #e84118;                   /* taken */
  --gb-danger-hover: #c23616;             /* taken */
  --gb-danger-active: #b03112;            /* derived */
  --gb-danger-on: #111d3a;                /* 4.1:1 on the fill */
  --gb-accent: #9c88ff;                   /* taken */
  --gb-accent-hover: #8c7ae6;             /* taken */
  --gb-accent-active: #7767c2;            /* derived */
  --gb-accent-on: #111d3a;                /* 5.9:1 on the fill */

  /* categorical — never status */
  --gb-chart-1: #c23616;                  /* Harley Davidson Orange */
  --gb-chart-2: #fbc531;                  /* Rise-N-Shine */
  --gb-chart-3: #e1b12c;                  /* Nanohanacha Gold */
  --gb-chart-4: #44bd32;                  /* Skirret Green */
  --gb-chart-5: #0097e6;                  /* Vanadyl Blue */
  --gb-chart-6: #487eb0;                  /* Seabrook */
  --gb-chart-7: #f5f6fa;                  /* Lynx White */
  --gb-chart-8: #9c88ff;                  /* Periwinkle */

  /* elevation — black, never the brand hue */
  --gb-elevation-1: 0 1px 3px rgb(0 0 0 / 0.12);/* raised */
  --gb-elevation-2: 0 4px 6px rgb(0 0 0 / 0.16);/* hover */
  --gb-elevation-3: 0 10px 20px rgb(0 0 0 / 0.20);/* overlay */
  --gb-elevation-4: 0 16px 32px rgb(0 0 0 / 0.24);/* modal */
}

Notes

Professional tips

Bright primaries over cool slate. The greys are the real content: five steps from near-white to midnight blue.
Darkest value: Pico Void #192a56. Lightest: Lynx White #f5f6fa. Between them sits every ramp you could build from this set.
Sort the sheet by Hue to find neighbours you can safely put side by side, and by Lightness to find the ones that can carry text. Source order is the designer’s order and tells you about their intent, not about contrast.
If you only need one colour from this palette, take it and leave the rest. Adopting twenty because you liked one is how a product ends up with two palettes.

Common mistakes

Using the palette at full saturation across a whole screen. These were drawn as accents against neutral ground; twenty of them at once is a swatch page, not an interface.
Assuming the names mean something. They are memorable, not systematic — “Light Red” is darker than “Pastel Red” in the palette next door.
Copying the hexes into a design file and the CSS separately. They will drift, and the design file will win the argument for about six months.

Real-world recommendations

Credit stays attached: this set was drawn by Jan Losert (@janlosert on Dribbble) and published in Flat UI Colors 2 by Ahmet Sülek.
Palettes like this one age visibly. A 2013 flat palette reads as 2013 — which is useful when that is the intent and a liability when it is not.
The fastest legitimate use is prototyping: grab a palette, get the categorical colours out of the way, and spend the argument you saved on hierarchy instead.

Contrast reference

The measurement behind every derivation above. White and black bound what a colour can do, and reading a row in both directions gives you both answers at once — 4.86:1 on white is equally “this as text on a white page” and “white as a label on this fill”. The last column is what people mean when they ask whether a colour is accessible, and it is almost never both.

Colour	On white	On black	Ink on
Pico Void#192a56	Aa13.94AAA	Aa1.51Fail	Light only
Electromagnetic#2f3640	Aa12.19AAA	Aa1.72Fail	Light only
Blue Nights#353b48	Aa11.23AAA	Aa1.87Fail	Light only
Mazarine Blue#273c75	Aa10.56AAA	Aa1.99Fail	Light only
Harley Davidson Orange#c23616	Aa5.48AA	Aa3.83AA Large	Light only
Naval#40739e	Aa5.04AA	Aa4.16AA Large	Light only
Seabrook#487eb0	Aa4.30AA Large	Aa4.89AA	Dark only
Nasturcian Flower#e84118	Aa4.04AA Large	Aa5.20AA	Dark only
Chain Gang Grey#718093	Aa4.03AA Large	Aa5.21AA	Dark only
Matt Purple#8c7ae6	Aa3.48AA Large	Aa6.04AA	Dark only
Blueberry Soda#7f8fa6	Aa3.29AA Large	Aa6.38AA	Dark only
Vanadyl Blue#0097e6	Aa3.20AA Large	Aa6.57AA	Dark only
Periwinkle#9c88ff	Aa2.85Fail	Aa7.38AAA	Dark only
Protoss Pylon#00a8ff	Aa2.61Fail	Aa8.05AAA	Dark only
Skirret Green#44bd32	Aa2.45Fail	Aa8.57AAA	Dark only
Download Progress#4cd137	Aa2.00Fail	Aa10.48AAA	Dark only
Nanohanacha Gold#e1b12c	Aa1.99Fail	Aa10.53AAA	Dark only
Rise-N-Shine#fbc531	Aa1.60Fail	Aa13.13AAA	Dark only
Hint of Pensive#dcdde1	Aa1.36Fail	Aa15.47AAA	Dark only
Lynx White#f5f6fa	Aa1.08Fail	Aa19.45AAA	Dark only