All the Colors

Understand. Compare. Create.

Blue: 64 shades, names and colour codes

Explore blue shades, HTML and RGB codes, colour meanings and ideas for combining blue in your projects.

Colour code and CSS reference

The CSS keyword blue corresponds to #0000FF. It represents one specific blue shade, not the entire colour family.

HEX
#0000FF
RGB
0, 0, 255
CMYK ≈
100%, 100%, 0%, 0%
HSL
240°, 100%, 50%

The displayed CMYK values are estimates without a print profile.

Meaning and perception

Blue often recalls sky and water. Light blue can support an airy palette, while navy gives a composition more visual weight. These associations depend on culture and the particular shade.

Which colours go with it?

Before pairing blue, give it a role: pale blue across a large area, navy to establish structure, or a vivid blue to draw attention. Its intensity matters as much as its colour name when choosing a companion. These three approaches offer different starting points.

Blue and off-white: give each surface room

A slightly warm off-white can soften navy without weakening its presence. In a living room, try light walls, a blue sofa and a few echoes in the cushions. On a website, keep the background light and use blue for headings or buttons. If the combination feels too cool, introduce light wood or linen before adding a fourth bright colour.

Blue and terracotta: introduce a controlled contrast

Muted terracotta introduces a visible warm contrast alongside deep or greyed blue. Let one colour dominate and give the other a smaller area: an armchair, illustration or callout panel. Two equally vivid blocks can compete for attention. Reduce the saturation of one before abandoning the combination altogether.

Blue and green: separate their lightness

Petrol blue and sage can form a subtle combination if their surfaces remain distinct. Try petrol on one clearly defined feature and sage in a lighter area. For a poster, separate them with an ecru background and check the lettering: different hues can still be very close in lightness.

Choosing sky blue, navy or electric blue

Sky blue leaves more room for materials and small contrasts; test it with ecru and light brown. Navy can support brighter accents such as ochre. Electric blue benefits from a clearer hierarchy: reserve it for a pattern or an important action. Swapping one of these blues for another calls for a fresh look at the proportions.

Try this palette: navy, linen and terracotta

For a first mock-up, try roughly 65% linen, 25% navy and 10% terracotta. These are starting proportions rather than a rule. Enlarge the accent only if doing so supports the main subject.

Linen#F2EDE4
Navy#203A5F
Terracotta#BB654D

Suggested palette with copyable HEX codes for your own trials. These sRGB previews are not certified paint or textile specifications.

A common trap: several almost-matching blues

Navy fabric, midnight-blue paint and a slightly violet print may look coordinated separately yet disagree side by side. Compare them together. Choose either a close match or a difference large enough to feel deliberate; an accidental near-match can be more distracting than an intentional contrast.

Shades of blue

The names and previews below come from the site’s shade directory. Several codes may share a common name; these shades are not certified RAL or Pantone equivalents.

Blue#0000FF
Aquamarine#79F8F8
Mist blue#F0FFFF
Azure#007FFF
Azure#1E7FCB
Light azure#74D0F1
Azurin#A9EAFE
Light blue#3A8EBA
Slate blue#686F8C
Cornflower blue#5472AE
Cornflower blue#5472AE
Bondi blue#0095B6
Sky blue#26C4EC
Cerulean#0F9DE8
Cerulean#357AB7
Cart blue#8EA2C6
Wheelwright blue#17657D
Wheelwright blue#8EA2C6
Sky blue#77B5FE
Cobalt blue#22427C
Berlin blue#24445C
French blue#318CE7
Midnight Blue#003366
Prussian blue#24445C
Denim blue#1560BD
South Seas blue#00CCCB
Dragée blue#DFF2FF
Egyptian blue#1034A6
Electric blue#2C75FF
Blue woad#56739A
Blue horizon#7F8FA6
Blue majorelle#6050DC
Navy blue#03224C
Maya blue#73C2FB
Mineral blue#24445C
Midnight Blue#0F056B
Ultramarine#1B019B
Ultramarine#2B009A
Peacock#067790
Persian blue#6600FF
Petrol blue#1D4851
Royal blue#318CE7
Sapphire blue#0131B4
Teal#008E8E
Blue smalt#003399
Blue tiffany#0ABAB5
Blue turquin#425B8A
Ceruleum#26C4EC
Duck blue#048B9A
Cerulean#74D0F1
Cyan#00FFFF
Cyan#2BFAFA
Smoke#BBD2E1
Frosted#80D0D0
Indigo#791CF8
Indigo#2E006C
Web indigo#4B0082
Klein#002FA7
Klein#21177D
Lapis-lazuli#26619C
Lavender#9683EC
Pastel#56739A
Periwinkle#CCCCFF
Turquoise#25FDE9
30 palettes. Your next idea starts here.

Get the free colour kit: HEX/RGB codes and a project worksheet.

Get my free kit →

Also discover: Casekit — customer support for online shops.