Misty blue is a soft and hazy shade positioned toward the lighter end of the blue spectrum, with subtle purple undertones. Its blue hue brings a sense of tranquility, while its muted quality captures its soothing essence.
Misty blue is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- HEX code: #B5C7EB
- RGB value: 71% red, 78% green, and 92.2% blue
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 incorporate misty blue into your UI designs:
- Create a calming interface. Use misty blue as a background color to create an inviting and calming interface. Its soft, muted hue also helps reduce eye strain.
- Highlight less critical actions. While bold colors are typically used to highlight important buttons and information, misty blue is a great color for secondary buttons that perform less critical actions. Its muted tone is still noticeable but doesn’t take the attention away from the primary buttons.
- Convey trust. Misty blue and other muted blue shades are often associated with trust. Its subdued hue makes it a suitable color for health care and wellness industries, as well as productivity tools, where trust and peacefulness are top of mind for 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 pale blue spectrum as misty blue, consider:
- Light blue (#90D5FF) brings a brighter and more vibrant touch with a more prominent blue tone.
- Periwinkle (#CCCCFF) radiates a similar softness with its lavender undertones shining through.
- Slate blue (#5B7C99) is slightly cooler and darker but shares a similar muted hue.
- Blue-gray (#6A89A7) appears darker, with traces of gray complementing its blue undertones.
To complement misty blue, consider pairing it with:
- Champagne (#F7E6CA) enhances misty blue’s softness, creating a cozy and inviting color scheme.
- Celadon (#A8DCAB) has a muted green appearance, creating a serene and lush color palette when used with misty blue.
- Puce (#E491A6) adds a touch of romance for a delicate color combination.
- Cornflower blue (#6395EE) creates a subtle visual contrast in a monochromatic palette.
Other colors that pair well with misty blue include sage for a natural and earthy color palette, ivory for a touch of brightness, and taupe for a sophisticated contrast.
While misty blue is serene and muted, it may clash with:
- Fuchsia (#FE3894) can overpower misty blue’s softness, creating an inharmonious color combination.
- Charcoal (#4A4A4A) may create a dark and dreary look, diminishing misty blue’s tranquil qualities.
- Chartreuse (#CCFF00) may clash with misty blue due to its contrasting yellow-green undertones.
- Red-orange (#FF4D00) can create a stark contrast next to misty blue’s cool hue.
Misty blue symbolizes tranquility and elegance. Its soft and muted hue adds to its calming state, while its timelessness conveys an elegant and sophisticated feel. Like other shades of blue, misty blue also connotes trustworthiness and reliability.
Misty blue evokes a sense of calmness and peace, similar to a serene morning sky or a still body of water.
Today, it’s used in UI design to create an inviting and trustworthy palette, leading to a calming user experience. Its muted hue also makes it easy on the eyes.
Ancient Egyptians created the first blue pigment around 2,200 B.C. from the prized gemstone lapis lazuli. This blue pigment was used in jewelry, artwork, and tomb paintings, often associated with royalty and spirituality.
The introduction of muted blue hues, like misty blue, evolved as more pigments developed. Muted colors became more prominent in modern design in the 1900s, as calm and clean aesthetics became a priority. For example, in the 1950s, Scandinavian design used muted hues to promote a functional and modern style.
With the development of digital design tools, subtle variations of muted blue shades, like misty blue, have become easier to create.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Soft Whisper
Evening Hues
Lavender Lullaby
Contrast checker
Contrast 1.7
- Large Text
#B5C7EB
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Fail | Fail | |
Fail | Fail |
Contrast 12.33
- Large Text
#B5C7EB
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Pass | |
Pass | Pass | |
Pass | Pass |
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #B5C7EB, known as misty blue, has RGB values of R:181, G:199, B:235 and CMYK values of C:23, M:15, Y:0, K:8.
| VALUE | CSS | |
|---|---|---|
| HEX | #B5C7EB | #B5C7EB |
| RGB DECIMAL | 181, 199, 235 | RGB(181, 199, 235) |
| RGB PERCENTAGE | 71, 78, 92.2 | RGB(71%, 78%, 92.2%) |
| CMYK | 23, 15, 0, 8 | |
| HSL | 220°, 57.4, 81.6 | HSL(220°, 57.4%, 81.6%) |
| HSV (OR HSB) | 220°, 23, 92.2 | |
| WEB SAFE | #CCCCFF | #CCCCFF |
| CIE-LAB | 79.992, 1.558, -19.842 | |
| XYZ | 54.472, 56.668, 86.661 | |
| xyY | 0.275, 0.286, 56.668 | |
| CIE-LCH | 79.992, 19.903, 274.49 | |
| CIE-LUV | 79.992, -11.155, -31.572 | |
| HUNTER-LAB | 75.278, -2.572, -15.561 | |
| BINARY | 10110101, 11000111, 11101011 | |
| iOS - SwiftUI | Color(red: 0.71, green: 0.78, blue: 0.922, alpha: 1) | |
| iOS - UIKit | UIColor(red: 0.71, green: 0.78, blue: 0.922, alpha: 1) | |
| Android - Compose | Color(0xFFB5C7EB) |
