
Figma color wheel
Want to find the perfect complementary or analogous colors to match blue?
Skip to main content
Everything you need to know about blue to inspire your next design.
Blue is one of the three primary colors within the RGB color model and can be created by combining cyan and magenta within the CMYK color model. Blue is associated with feelings of calmness and tranquility, reflecting the appearance of the sky and large bodies of water. Designers can utilize blue’s many hues and cool tones to evoke a wide variety of emotions, from serenity to melancholy.

Shades
Tints
Tones
Hues
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Azure Echo
Starry Night
Dreamweaver
Blue is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines.
Here are some ways to use blue in your designs:
Keep in mind that color and its meaning can change from culture to culture—and at any given time. If you are designing for a global audience, research color considerations for your specific regions.
For variations within the same relaxing, professional spectrum as blue, consider:
Utilizing neutral tones, such as white or gray, is a clever choice when you want the full impact of the color blue to stand out in your designs. To make your design pop a bit, implement complementary colors such as orange. You might also consider:
Other colors worth considering include lavender, which adds depth and sophistication to your blue color palette. Another option is mustard, which adds a pop of color that isn’t as vibrant and loud as classic yellow.
While blue is highly adaptable, it may clash with:
Within color theory, blue symbolizes harmony and tranquility. People turn to blue to establish a sense of security and reliability in professional settings. However, blue’s meaning varies among cultures. Ancient Greeks saw it as a color symbolizing the gods and heavens. Indigenous people in the United States continue to view it as a symbol of wisdom, spirituality, and healing.
Blue, as associated with the sky and ocean, evokes feelings of calmness and relaxation. These emotions help connect blue to additional feelings of trust and safety. Designers commonly use blue to help relieve stress, such as hospitals and offices.
Designers also integrate blue when they want to relax viewers. Additionally, because it can impart a feeling of trust and stability to the viewer, blue is an excellent option when creating a corporate brand and identity.
The color blue derives its name from the Old French word “bleu,” which comes from the Proto-Indo-European language. The root “bhel” originally meant “to shine.” During prehistoric times, ancient civilizations created the pigment using minerals like lapis lazuli and azurite.
The ancient Egyptians heavily used the color blue, viewing it as a symbol of the divine. Ancient Egyptian civilization used blue so widely that they invented a hue we continue to reference as Egyptian blue; Egyptians synthesized the color from silica, lime, copper, and alkali. They utilized it in art, jewelry, cosmetics, and to paint the exterior of the pyramids. The ancient Greeks also valued the color blue, working it into art and architecture.
Through the Middle Ages and Renaissance periods, blue became associated with royalty. The pigment was rare and costly, making it more valuable than some precious metals, including gold. By the Industrial Revolution, chemists discovered how to make synthetic blue pigments, making the color more affordable.
Contrast 8.59
#0000FF
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Pass | |
Pass | Pass | |
Pass | Pass |
Contrast 2.44
#0000FF
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Fail | Fail | |
Fail | Fail |
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #0000FF, known as blue, has RGB values of R:0, G:0, B:255 and CMYK values of C:100, M:100, Y:0, K:0.
| VALUE | CSS | |
|---|---|---|
| HEX | #0000FF | #0000FF |
| RGB DECIMAL | 0, 0, 255 | RGB(0, 0, 255) |
| RGB PERCENTAGE | 0, 0, 100 | RGB(0%, 0%, 100%) |
| CMYK | 100, 100, 0, 0 | |
| HSL | 240°, 100, 50 | HSL(240°, 100%, 50%) |
| HSV (OR HSB) | 240°, 100, 100 | |
| WEB SAFE | #0000FF | #0000FF |
| CIE-LAB | 32.299, 79.191, -107.865 | |
| XYZ | 18.046, 7.219, 95.044 | |
| xyY | 0.15, 0.06, 7.219 | |
| CIE-LCH | 32.299, 133.814, 306.285 | |
| CIE-LUV | 32.299, -9.406, -130.352 | |
| HUNTER-LAB | 26.867, 72.878, -190.934 | |
| BINARY | 00000000, 00000000, 11111111 | |
| iOS - SwiftUI | Color(red: 0, green: 0, blue: 1) | |
| iOS - UIKit | UIColor(red: 0, green: 0, blue: 1, alpha: 1) | |
| Android - Compose | Color(0xFF0000FF) |

Want to find the perfect complementary or analogous colors to match blue?

Learn about the regal color of dark blue.

Discover the cool and refreshing color of mint blue.