Powder Blue Color: Hex Code, Palettes & Meaning | Figma (2024)

Everything you need to know about powder blue to inspire your next design.

Get color palette

Read about Powder Blue

Pick a palette type

Get color palette

What color is powderblue?

Powder blue is a light and airy shade located in the blue-green region of the color wheel. It promotes relaxing and calming feelings and evokes a sense of cleanliness and freshness, similar to a clear morningsky.

Powder Blue Color: Hex Code, Palettes & Meaning | Figma (1)Powder Blue Color: Hex Code, Palettes & Meaning | Figma (2)

What does powder blue look like on digital screens?

Powder blue is defined by the following color codes and values to ensure consistency across various digital platforms anddevices.

- HEX code: #B8E3E9

- RGB value: 72.2% red, 89% green, and91.4%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.

How should I effectively use powder blue in UIdesign?

Here are some ways to use powder blue in yourdesigns:

  • Promote a calming atmosphere. Powder blue’s soft and serene hue works well for meditation, mindfulness, and mental health apps that require calming visual elements areimportant.
  • Establish visual hierarchy. Paired with contrasting colors like navy blue, powder blue draws users’ attention to important information while maintaining a calming aesthetic.
  • Create user-friendly messages. Powder blue can be used for notifications like error messages, giving users a friendly nudge and reducing their anxiety when receiving apop-uperror.

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.

What are similar colors to powderblue?

For variations within the same soft spectrum as powder blue,consider:

  • Baby blue (#8FD9FB) is a tad more vibrant but shares similar soothing qualities.
  • Light blue (#90D5FF) has less green influence but still has a relaxing and serene presence.
  • Pastel blue (#B3EBF2) shares a similar muted appearance, embodying the same tranquility aspowderblue.
  • Sky blue (#82C8E5) has a slightly deeper hue reminiscent of a bright, clearsky.

What colors go with powderblue?

To complement powder blue, consider pairing itwith:

  • Ecru (#E0CD95) evokes an airy and serene feel with beachyvibes.
  • Blush pink (#E89EB8) complements powder blue with a soft and delicate contrast.
  • Bright yellow (#FFED29) adds a pop of color for a playful and energetic colorpairing.
  • Mocha (#6D3B07) offers warmth to balance powder blue’s coolness.

Other colors worth considering include charcoal to add a sense of sophistication, mint green for a refreshing color palette, or lavender to enhance powder blue’s calmingnature.

What colors conflict with powderblue?

While powder blue is tranquil, it mayclashwith:

  • Dark purple (#341539) has a deep hue that may clash with the delicate nature ofpowderblue.
  • Neon pink (#FF13F0) can disrupt powder blue’s soft and calmingnature.
  • Scarlet (#ED2100) may create a harsh and unbalanced contrast next topowderblue.
  • Lime green (#89F336) can overpower powder blue, creating a visually jarringeffect.

What does powder blue symbolize?

Powder blue symbolizes serenity, peace, and tranquility. Its soft, pastel-like hue also connotes purity and innocence, while its light and airy appeal is associated with freshness and cleanliness.

In color psychology, powder blue promotes feelings of relaxation, creating a calm and inviting atmosphere. Due to its serene nature, it also evokes a sense of trust and reliability du to its serenenature.

In UI design, powder blue is useful for wellness and health apps that want to promote a calming and trustworthy environment.

What’s the history of powderblue?

Powder blue was originally created from smalt, a deep blue glass ground into powder, often used to create a wide range of blue pigments, including lighter shades like powder blue. In 1894, the color name “powder blue” was used to describe the pale blue hue derived fromsmalt.

Powder blue gained popularity in the 1970s and became a favored color worn by sports teams. The Minnesota Twins wore a powder blue uniform from 1973 to 1986, while the Texas Rangers introduced a powder blue uniform in 1977. The Los Angeles Chargers returned their iconic powder blue uniforms in 2019 and still use them as their primary color forhomegames.

Whether used in interior design to create a soothing environment, in spring and summer fashion, or in branding and design to evoke feelings of trust and reliability, powder blue’s versatility is still used in many contextstoday.

Color variations

Shades

Tints

Tones

Hues

Color Harmonies

Complementary

Split

Monochromatic

Analogous

Triadic

Square

Custom Palettes

Winter Chill

Farmhouse Chic

Zephyr

Accessibility: Contrast Checker

Large Text

Figma

Normal Text

How you design, align, and build matters. Do it together with Figma.

1.38:1

WCAG 2.2 Simple Contrast

Normal Text

Fail
AA
4.5:1

Fail
AAA
7:1

Large Text

Fail
AA
3:1

Fail
AAA
4.5:1
Large Text

Figma

Normal Text

How you design, align, and build matters. Do it together with Figma.

15.2:1

WCAG 2.2 Simple Contrast

Normal Text

Pass
AA
4.5:1

Pass
AAA
7:1

Large Text

Pass
AA
3:1

Pass
AAA
4.5:1

Color simulations

Protanopia

Deuteranopia

Tritanopia

Achromatopsia

Color conversion

The hexadecimal color #B8E3E9, known as powder blue, has RGB values of R:184, G:227, B:233 and CMYK values of C:0.21, M:0.03, Y:0,K:0.09.

VALUECSS
HEXB8E3E9#B8E3E9
RGB DECIMAL184, 227, 233RBG(184,227,233)
RGB PERCENTAGE72.2, 89, 91.4RGB(72.2%,89%,91.4%)
CMYK21, 3, 0, 9
HSL187.3°, 52.7, 81.8HSL(187.3°,52.7%,81.8%)
HSV (OR HSB)187.3°, 21, 91.4
WEB SAFECCCCFF#CCCCFF
CIE-LAB87.49, -12.583, -7.533
XYZ61.941, 71.01, 87.529
xyY0.281, 0.322, 71.01
CIE-LCH87.49, 14.665, 210.906
CIE-LUV87.49, -22.237, -9.614
HUNTER-LAB84.267, -16.261, -2.598
BINARY10111000, 11100011, 11101001
iOS - SwiftUIColor(red: 0.722, green: 0.89, blue: 0.914)
iOS - UIKitUIColor(red: 0.722, green: 0.89, blue: 0.914, alpha: 1)
Android - ComposeColor(0xFFB8E3E9)

Keep learning

Figma color wheelWant to find the perfect complementary or analogous colors to match powder blue?Learn moreSky BlueDiscover the calming nature of sky blue.Learn moreMisty BlueEmbrace the gentle calm of misty blue.Learn more
Powder Blue Color: Hex Code, Palettes & Meaning | Figma (2024)
Top Articles
Latest Posts
Recommended Articles
Article information

Author: Neely Ledner

Last Updated:

Views: 5574

Rating: 4.1 / 5 (62 voted)

Reviews: 85% of readers found this page helpful

Author information

Name: Neely Ledner

Birthday: 1998-06-09

Address: 443 Barrows Terrace, New Jodyberg, CO 57462-5329

Phone: +2433516856029

Job: Central Legal Facilitator

Hobby: Backpacking, Jogging, Magic, Driving, Macrame, Embroidery, Foraging

Introduction: My name is Neely Ledner, I am a bright, determined, beautiful, adventurous, adventurous, spotless, calm person who loves writing and wants to share my knowledge and understanding with you.