Blue color meaning: symbolism, psychology and how to use it
#0000FF
oklch(0.452 0.313 264.1)
What blue symbolizes
Blue is the colour of the sky and the sea, so it carries the meanings of space, depth and calm. In much of the world it is associated with trust, stability, loyalty, intelligence and professionalism. It is also the colour of sadness ("feeling blue", the blues), of cold, and, in some contexts, of distance or aloofness. Because it is the colour of ordinary background scenery, it rarely feels aggressive.
A telling fact is that blue is often the colour people name when asked about their favourite, in surveys in many countries, and it is one of the most common corporate colours. That popularity has nothing to do with a magic property of the wavelength; it is a mix of nature, convention and safety. Blue is the colour designers reach for when they want to avoid risk.
Blue color psychology: what the research says
The best-supported statement on blue is about preference: across many surveys it is among the most commonly reported favourite colours, in both men and women, and in many countries. Beyond preference, the usual claims (blue lowers heart rate, boosts productivity, calms people) come from small studies of mixed quality, and replications have often failed to show strong effects. Treat them as tendencies at best.
Related research on light is real but easy to misread. Short-wavelength blue light influences the body clock and alertness, which is why daytime light is bluish and why evening screen filters reduce it. That is a physiological effect of light, not evidence that a blue interface makes users trust you more.
What can reasonably be said is that blue works well as a neutral, low-risk accent. It contrasts with warm colours, stays readable as text and as background, and offers a stable base on which other colours can be added. Users also now associate blue underlined text with hyperlinks, which is a learned convention that works precisely because it has been used for so long.
Cultural meanings of blue
- Western countries. Trust, authority, calm, loyalty and conservatism; also sadness ("feeling blue"), and "something blue" in wedding tradition. Political meanings differ: blue is the colour of conservative parties in the United Kingdom, while in the United States it is used for the Democratic party.
- Hinduism and India. Several important deities, including Krishna and Vishnu, are traditionally depicted with blue skin, linking the colour with the infinite, the sky and the divine.
- Turkey, Greece and the Mediterranean. Blue glass eye charms (nazar) are used to ward off the evil eye.
- Iran and Central Asia. Deep blue and turquoise tiles decorate mosques and palaces, and blue is associated with the heavens.
- Judaism and Israel. Blue (tekhelet) has religious significance, and blue and white are the colours of the Israeli flag.
- Ancient Egypt. Blue pigments were among the first synthetic ones and were used in tomb painting and amulets, symbolising life, protection and the Nile.
Blue in branding and marketing
Blue is by far the most common brand colour in technology, finance, healthcare, insurance and government. Facebook, IBM, Ford, PayPal and LinkedIn all use it, and it is a natural fit where the brand needs to say "you can rely on us". The caveat is that if everybody uses blue, blue alone does not set you apart.
Hue and lightness steer the message. Navy and dark blue feel established, formal and secure, which is why it is common in banking and law. Mid blue feels friendly and approachable, which is common in social and productivity software. Bright electric blue feels energetic and modern, while a pale blue feels calm and clean, popular in health and hygiene.
Blue is rare in food. The common explanation is that few natural foods are blue, so blue can suppress appetite in packaging, though that claim is more widely repeated than tested. Brands in food usually use blue as a secondary colour or in beverages like water and sports drinks.
Blue in UI and web design
Blue is the default colour for links, primary actions, selection and information. It is the safest choice for a primary accent because it is clearly different from the semantic red, green and orange. If you use blue for a primary button, reserve a different tone for informational banners so the two do not blur.
Pure blue #0000ff is a good example of why OKLCH matters. It has a high chroma of about 0.31 but a low lightness of 0.45, with a WCAG ratio of about 8.6:1 on white, but only about 2.4:1 on black. A blue that looks "equally bright" as a yellow in HSL is far darker in perception. In OKLCH you can set lightness explicitly, keep hue near 264, and generate a scale where each step has predictable contrast.
On dark surfaces, saturated mid-blue text is hard to read, so raise the lightness and lower the chroma a little for links and icons. Very saturated blues also sit at the edge of the sRGB gamut, so wide-gamut displays can show richer blues than the HEX you export. Avoid pairing blue and purple of similar lightness for status states, since many people find them hard to separate.
Blue hex code and color values
- HEX
- #0000ff
- RGB
- rgb(0 0 255)
- HSL
- hsl(240 100% 50%)
- OKLCH
- oklch(0.452 0.313 264.1)
This is the standard CSS value for blue. See the full set of conversions, tints, shades and harmonies on its #0000ff color page.
CSS custom property
:root {
--color-blue: #0000ff; /* fallback */
}
@supports (color: oklch(0 0 0)) {
:root {
--color-blue: oklch(0.452 0.313 264.1);
}
}Shades and tones of blue
Pale blues such as baby blue, powder and sky are gentle, airy and soothing. Bright blues like cobalt, azure and royal blue are energetic, confident and a little sporty. Medium blues are friendly and are the default for interface links and buttons. Navy, midnight and indigo are deep, formal and authoritative, and are the staple of uniforms and corporate identity.
Hue leaning matters: green-leaning blues (cyan, teal-blue) feel fresh and watery; purple-leaning blues (indigo, periwinkle) feel creative and slightly mystical; grey-leaning blues (slate, steel, denim) feel calm, practical and understated. Saturation turns the dial between corporate and playful: muted blues are professional, and electric blues are lively.
Popular named shades, light to dark
- AADDFF
Droplet
- 87CEFA
Drift on the Sea
- B0C4DE
Light Steel Blue
- ACB9E8
Perano
- 00BFFF
Capri
- 66B7E1
Malibu
- 6495ED
Guilliman Blue
- 7197CB
Razee
- 1E90FF
Clear Chill
- 5B89C0
Danube
- 4682B4
Steel Blue
- 4579AC
Sleep
- 4169E1
Royal Blue
- 1D5DEC
Azul
- 536078
Nightly
- 365D73
Brigade
- 0000FF
Blue
- 105673
Tardis
- 0000CD
Medium Blue
- 2D3C54
Madison
- 191970
20000 Leagues Under the Sea
- 00008B
Yves Klein Blue
- 000080
Navy Blue
- 050D25
Void
The colour library has 2,415 named colours in the blue family. Browse all blue colors.
Contrast and accessibility
Blue (#0000ff) has a WCAG contrast ratio of 8.59:1 against white and 2.44:1 against black. Normal-size text needs 4.5:1 for level AA and 3:1 is enough for large text and UI components.
Test any other combination in the contrast checker.
Blue color palettes
Colors that go with blue
The complement of blue in OKLCH is near hue 84, in the orange and yellow range. Blue and orange is the most reliable complementary pairing in design, because the two sit at opposite ends of both hue and typical lightness. Navy with a warm accent such as amber or coral is a formula used in countless brand systems.
Analogous colours are purple and teal, which produce calm, cool palettes. Blue with white is the classic clean, trustworthy look; blue with grey is the corporate standard; blue with yellow is bold and graphic. Blue with red is patriotic and energetic but needs a lightness difference to avoid vibration at the edges. Blue with green is natural but can feel flat if the lightness is similar.
Frequently asked questions
- What does the color blue symbolize?
- Blue is associated with trust, calm, stability and intelligence, and also with sadness and coldness. In Hinduism it is linked with deities such as Krishna, and around the Mediterranean it is used against the evil eye.
- What is the hex code for blue?
- Pure blue is #0000ff: rgb(0 0 255), hsl(240 100% 50%) and oklch(0.452 0.313 264.1). Many brands use a more moderate blue, like #2563eb, for readability.
- Why do so many brands use blue?
- Blue is widely liked in surveys, rarely offends, contrasts well with warm accents and is associated with trust and reliability. It is common in technology and finance, though that also makes it harder to stand out with it.
- What colors go with blue?
- Orange and amber are the complement. White, grey and yellow are classic partners, and purple and teal are analogous neighbours.
- Does blue reduce stress?
- Blue is often described as calming, but studies on the colour alone are mixed. Time in nature, light and context probably matter more than the hue.