#F2EDE4Understand. 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.
#203A5F#BB654DSuggested 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.
#0000FF#79F8F8#F0FFFF#007FFF#1E7FCB#74D0F1#A9EAFE#3A8EBA#686F8C#5472AE#5472AE#0095B6#26C4EC#0F9DE8#357AB7#8EA2C6#17657D#8EA2C6#77B5FE#22427C#24445C#318CE7#003366#24445C#1560BD#00CCCB#DFF2FF#1034A6#2C75FF#56739A#7F8FA6#6050DC#03224C#73C2FB#24445C#0F056B#1B019B#2B009A#067790#6600FF#1D4851#318CE7#0131B4#008E8E#003399#0ABAB5#425B8A#26C4EC#048B9A#74D0F1#00FFFF#2BFAFA#BBD2E1#80D0D0#791CF8#2E006C#4B0082#002FA7#21177D#26619C#9683EC#56739A#CCCCFF#25FDE9Get the free colour kit: HEX/RGB codes and a project worksheet.