What blue goes with, a ready shade scale and ten palettes with roles, HEX / RGB / HSL / OKLCH codes and contrast checks.
Blue works best with white and warm neutrals (sand, beige, light warm gray), with navy and graphite when you need it strict, and with coral, orange or yellow when you need an accent — those sit opposite blue on the color wheel. In an interface, keep blue for the accent on about 10% of the screen, and hold the background near-white or, in a dark theme, a deep blue-black. Below: a shade scale, seven proven pairings and ten ready palettes with codes and contrast.
Light blue is the upper part of the blue family — from icy tints to azure; navy and cobalt sit at the bottom. These are the named shades you meet most often in interfaces. Where a shade has a CSS keyword, it is shown too: you can type it straight into a style sheet.
Alice blue
Page backgrounds: white with a cold cast
Powder blue
Soft surfaces, pastel brands
Sky blue
Illustrations and tags, never text on white
Light blue
The classic light blue: accents on dark backgrounds
Cornflower
A friendly accent with a violet tint
Azure
Bright calls to action, charts
Dodger blue
Links and focus rings on dark themes
Steel blue
Calm, technical interfaces
Royal blue
Confident buttons with white text
Denim
Primary color for fintech and SaaS
Cobalt
Headings and strict corporate accents
Midnight blue
Dark backgrounds and text instead of black
Eleven steps from 50 to 950, built in OKLCH: the steps are even in perceived lightness, so the scale behaves predictably in both themes. The numbers under each step are its contrast with white and with black — for body text on white, take 700 and darker.
□ — contrast with white · ■ — with black. Text needs 4.5 and above
A pairing holds on contrast of one kind: lightness, temperature or position on the color wheel. Each pair below works on one of these.
The safest pair: clean and airy. Blue is the only color here, so it becomes the accent by itself. Good for medicine, SaaS and services where clarity matters.
Monochrome: one hue at different lightness. Looks composed and expensive, but needs a warm neutral or a bright accent, or the palette turns gloomy.
Opposites on the color wheel: blue calms, coral pulls the eye. Keep coral for the main action only — 5–10% of the screen.
An energetic pair for tech and young products. Yellow on white does not read as text (1.4:1) — use it for badges, highlights and illustrations.
The warmth of sand balances the cold of blue: calm, but not sterile. Works for travel, interiors and wellness.
A strict technical pair: graphite carries text and structure, blue marks what is interactive. A classic of developer tools.
Neighbors on the color wheel: soft and fresh. To keep them apart, separate them by lightness.
Every color has a role: the page background, card surfaces, text, the main accent for buttons and a second one for tags and highlights. Click a swatch to copy its code; the CSS button copies all variables at once; the card can be saved as an image. Contrast is checked by WCAG: AA is the norm for text, AAA is with margin.
01 / 10
light · cool · calm
When to use SaaS, dashboards, clinics — anywhere order and clarity sell.
Tip Keep the pale #BFD9EC off text: it is for tags, highlights and active table rows.
| Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Background | ||||
| Surface | ||||
| Text | ||||
| Accent | ||||
| Second accent |
Usage example
02 / 10
strict · businesslike · light
When to use Finance, law, consulting, B2B — where reliability is the product.
Tip Steel gray #8A99AD is for secondary text, icons and borders; the button stays navy.
| Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Background | ||||
| Surface | ||||
| Text | ||||
| Accent | ||||
| Second accent |
Usage example
03 / 10
warm base · soft · natural
When to use Travel, architecture, interiors, wellness.
Tip Sand #D9B48F is the second accent: quote backgrounds, illustrations. Text on it is always dark.
| Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Background | ||||
| Surface | ||||
| Text | ||||
| Accent | ||||
| Second accent |
Usage example
04 / 10
contrasting · energetic · light
When to use Consumer apps, education, events, marketplaces.
Tip Coral is for the main action and notifications only. Paint half the screen with it and the blue disappears.
| Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Background | ||||
| Surface | ||||
| Text | ||||
| Accent | ||||
| Second accent |
Usage example
05 / 10
dark theme · technical · focused
When to use Developer tools, dashboards, fintech in a dark theme.
Tip The accent is lighter and softer than in a light theme: saturated blue hums on a dark background. The button label is dark.
| Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Background | ||||
| Surface | ||||
| Text | ||||
| Accent | ||||
| Second accent |
Usage example
06 / 10
pastel · gentle · light
When to use Beauty, kids’ products, weddings, personal brands.
Tip The accent is pastel: white text on it is unreadable. Keep the button label dark and set the button apart by shape or outline.
| Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Background | ||||
| Surface | ||||
| Text | ||||
| Accent | ||||
| Second accent |
Usage example
07 / 10
strict · technical · muted
When to use Manufacturing, engineering, logistics, industrial equipment.
Tip Amber #F2A93B is a signal color: warnings and the main call to action. Nowhere else.
| Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Background | ||||
| Surface | ||||
| Text | ||||
| Accent | ||||
| Second accent |
Usage example
08 / 10
bright · tech · light
When to use Startups, AI products, marketing sites.
Tip Lime #D6F35B is a marker: highlighted words, badges, charts. As text on white it does not work.
| Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Background | ||||
| Surface | ||||
| Text | ||||
| Accent | ||||
| Second accent |
Usage example
09 / 10
premium · dark · warm accent
When to use Premium services, real estate, hotels, private clubs.
Tip Gold goes on buttons and thin lines, not on fills. Soft blue #8FB1D6 is for links and secondary accents.
| Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Background | ||||
| Surface | ||||
| Text | ||||
| Accent | ||||
| Second accent |
Usage example
10 / 10
fresh · calm · light
When to use Healthcare, ecology, water, sport.
Tip Blue and teal are close in hue — split them by role: blue for actions, teal for statuses and charts.
| Role | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Background | ||||
| Surface | ||||
| Text | ||||
| Accent | ||||
| Second accent |
Usage example
01
60% of the area is a neutral background, 30% is surfaces and text, 10% is the blue accent. Once blue takes more than a third of the screen it stops being an accent, and buttons get lost.
02
Body text needs at least 4.5:1 (WCAG AA). Light blue text on white almost always fails: #87CEEB on white is 1.7:1. For text on white, take blue from step 700 of the scale above — #0F68A2 gives 6.0:1.
03
When links, buttons, icons and headings share one blue, people cannot tell what is clickable. Reserve blue for interactive elements and keep the rest neutral.
04
On a dark background the accent gets lighter and less saturated (steps 300–400), and the background is not black but a deep blue-black: contrast stays softer and eyes tire less.
05
An all-cold palette looks sterile. One warm neutral — sand, beige or warm gray — brings it to life without changing its character.
06
Fintech, healthcare, SaaS, B2B services, education — fields where trust and clarity matter. Food, fashion and entertainment usually need a warm accent next to it.
The “computer” blue hurts the eyes and looks like a 1998 link. Shift it toward azure or mute it.
A popular button nobody can read: white on #87CEEB is 1.7:1. Either darken the button or make the text dark.
Shades picked by eye argue with each other. Take them from one scale — then they differ only in lightness.
Large fields of saturated blue are tiring. Backgrounds take steps 50–100; saturated blue is for accents.
Grays with a cold cast plus blue make a “hospital” palette. Add one warm neutral.
White and warm neutrals for a calm base; navy and graphite for a strict look; coral, orange or yellow for a bright accent. Coral and orange sit opposite blue on the color wheel, so they give the most noticeable contrast.
One where white text gets at least 4.5:1 contrast: on the scale above that is 700 and darker, for example #0F68A2. Keep the light steps 300–500 for backgrounds, tags and the dark theme.
In English both are blue, and lighter ones get a qualifier: light blue, sky blue. Russian even has two separate words. In design it is one scale anyway: light blues are its upper steps, navy the lower ones.
Cool. But blue has warmer shades leaning green (teal) and cooler ones leaning violet (cornflower). A palette gets warmer not through the blue itself but through the neutrals next to it — sand, beige, warm gray.
On light blue (steps 50–300) — dark text: near-black with a blue cast, such as #0F2233. On saturated and dark blue (700+) — white. Check the contrast: 4.5:1 and above for regular text.
Add a complementary accent — coral, orange or lime — on 5–10% of the area, and one warm neutral for the background. Another way is to play with lightness: a very light background, a saturated accent and deep navy text.
