Navy and white, graphite and silver, black with red: 12 strict colors, a cool grey scale and 10 palettes for business sites — with codes and text contrast of 7:1 and higher.
A color combination looks strict when three things come together: cool neutrals instead of warm ones, strong contrast in lightness and no more than one accent. The base is navy, graphite or black on white and cool greys; the accent is burgundy, bottle green or a single signal-red detail. Below: 12 strict colors with codes, a cool grey scale 50–950, seven pairings and ten palettes — five light and five dark, all with body text at 7:1 contrast or higher.
Strict colors are dark and muted, and the light ones are cool: white and greys with a faint bluish cast. None of them is bright — even the accents here are deep: navy, petrol, bottle green, burgundy.
White
Background: a strict palette can afford pure white
Cool white
Second background, section fills
Platinum
Cards, table rows, dividers
Silver
Borders, inactive states
Steel
Icons and large captions
Slate
Secondary text on white
Graphite
Body text, buttons
Black
Headings and a dark theme background
Navy
The main strict color: header, buttons
Petrol
A blue-green alternative to navy
Bottle green
A deep green base for finance and clubs
Burgundy
A single accent: a line, a tag, a button
Eleven steps from 50 to 950, built in OKLCH with one bluish hue and very low saturation: the greys stay cool from end to end and never drift to green or violet. The numbers under each step are its contrast with white and with black — for text on white take 600 and darker, for body text 700 and darker.
□ — contrast with white · ■ — with black. Text needs 4.5 and above
In each pairing one color is deep and one is light, and the third either supports the neutrals or is the only accent.
The classic of business sites: banks, law firms, consulting. Navy builds trust, white gives air, steel handles the secondary.
The strictest and the most contrasting. Architecture, fashion, editorial sites — where typography does the talking.
Softer than black and white, but just as composed. Tech, engineering, B2B services.
The university classic: navy as the base, burgundy as a thread of accent. Education, law, publishing.
Strict but alive: deep green instead of blue. Finance with a history, private schools, consulting.
A cool blue-green: strictness without banking boredom. Engineering, medicine, analytics.
The Swiss style: two neutrals and one signal detail. Red takes no more than a couple of percent of the screen.
Each palette has one deep base and at most one accent. Body text is at 7:1 contrast or higher everywhere — strictness starts with legibility. Click a swatch to copy its code; the CSS button copies all variables; the card can be saved as an image.
01 / 10
light · cool · business
When to use Banks, law firms, consulting, insurance.
Tip The blue is dark and muted, almost ink: a bright corporate blue looks like a template.
| Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Background | ||||
| Surface | ||||
| Text | ||||
| Accent | ||||
| Second accent |
Usage example
02 / 10
light · monochrome · editorial
When to use Architecture, fashion, photography, editorial sites.
Tip The whole hierarchy rests on typography and the grid: size, weight and 1 px lines.
| Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Background | ||||
| Surface | ||||
| Text | ||||
| Accent | ||||
| Second accent |
Usage example
03 / 10
light · contrasting · graphic
When to use Design studios, architecture bureaus, events, media.
Tip Red is only the button and one or two tags. Any more, and strictness turns into shouting.
| Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Background | ||||
| Surface | ||||
| Text | ||||
| Accent | ||||
| Second accent |
Usage example
04 / 10
light · calm · classic
When to use Investment, private schools, consulting, sustainable brands.
Tip The background is a cool ivory, not a yellow cream: green needs a light base without yellowness.
| Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Background | ||||
| Surface | ||||
| Text | ||||
| Accent | ||||
| Second accent |
Usage example
05 / 10
light · strict · noble
When to use Law firms, universities, auction houses, publishers.
Tip Burgundy on a cool grey looks noble; on a warm one it turns cosy and winey. Keep the background cool.
| Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Background | ||||
| Surface | ||||
| Text | ||||
| Accent | ||||
| Second accent |
Usage example
06 / 10
dark · deep · business
When to use Fintech, investment platforms, analytics dashboards.
Tip A dark theme on navy rather than black is just as strict, but has depth.
| Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Background | ||||
| Surface | ||||
| Text | ||||
| Accent | ||||
| Second accent |
Usage example
07 / 10
dark · cool · technical
When to use Engineering and IT companies, SaaS, industry.
Tip The accent is light steel, not a color: the button stands out by lightness, and that is enough.
| Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Background | ||||
| Surface | ||||
| Text | ||||
| Accent | ||||
| Second accent |
Usage example
08 / 10
dark · contrasting · energetic
When to use Sport, cars, security, events.
Tip Red looks brighter on black than on white — make its area even smaller.
| Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Background | ||||
| Surface | ||||
| Text | ||||
| Accent | ||||
| Second accent |
Usage example
09 / 10
dark · calm · technical
When to use Medicine, engineering, energy, analytics.
Tip Keep every grey in this palette slightly blue-green — a neutral grey looks dirty next to petrol.
| Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Background | ||||
| Surface | ||||
| Text | ||||
| Accent | ||||
| Second accent |
Usage example
10 / 10
dark · classic · metal accent
When to use Private clubs, investment, golf, spirits.
Tip Brass on deep green is the strictness of an English club. The metal is muted, with no shine.
| Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Background | ||||
| Surface | ||||
| Text | ||||
| Accent | ||||
| Second accent |
Usage example
01
White and cool greys take 90% of the screen; one deep color — navy, graphite or bottle green — goes to buttons, headings and the header.
02
Greys with a bluish cast read as business, warm ones as home. For strictness take neutrals from a cool scale and leave warm ones to premium and cosy sites.
03
Strictness is clarity. Body text at 7:1 (AAA), secondary text no lighter than slate #4A5462 on white. Pale grey text “for elegance” hurts a strict palette.
04
Burgundy, bottle green or signal red — only one, on no more than 5% of the screen: a button, a tag, a line. Two accents side by side make a flag, not a strict palette.
05
A strict palette works together with a strict layout: an even grid, 1 px lines, equal spacing. Color marks the structure — headings, sections, actions — rather than decorating.
06
Character comes not from new colors but from a deep color instead of black, large typography and good photography. Navy instead of #000000 already gives a palette its own voice.
A saturated blue like #0066FF looks like a website-builder template. Strict blue is dark and muted — ink-like #1B2B4B.
Light grey captions on a cool grey background look strict in a mockup and are hard to read on a real screen. Secondary text also needs 4.5:1.
Burgundy and green, blue and red in equal shares make a flag or a uniform, not a strict palette. One accent; everything else is neutral.
A beige background with cool grey cards looks dirty. A strict palette stays cool from start to finish.
The strict style is flat: lines, spacing and lightness hold the hierarchy. Gradients and soft shadows make it look like an advert.
Dark, muted ones — black, graphite, navy, bottle green, burgundy, petrol — plus white and cool greys. All have low saturation and a cool or neutral undertone.
A reliable base is navy or graphite on white with cool greys, for example #1B2B4B, #FFFFFF and #E3E7EB. If you need an accent, take one: burgundy, bottle green or a restrained red.
White, cool greys and silver — that is the classic. For an accent, burgundy #5E1F2C or muted brass; for a dark theme, light steel #C7D1E0.
Do not add colors — work with lightness and typography: navy or petrol instead of black, large headings, good photos and one small accent detail.
Dark text on white, headings and panels in navy or graphite, and one accent for the key figure on a chart. The other chart series — steps of one grey scale.
A strict palette is cool and high-contrast: white, bluish greys, navy, graphite. A premium one is warm and soft: milk, greige, taupe, espresso, with contrast built on half-tones.
