Skip to main content

Peacock Blue

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

Pick a palette type

What color is peacock blue?

Peacock blue is a calming color that blends the tranquility of blue with the renewing energy of green. This cool-toned shade exudes wisdom and luxury, similar to peacock feathers, and can give off a vibrant and energetic feel.

peacock blue colorpeacock blue color

What does peacock blue look like on digital screens?

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

  • HEX code: #096C6C
  • RGB value: 3.5% red, 42.4% green, and 42.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 peacock blue in UI design?

Here are some ways to use peacock blue in your designs:

  • Evoke sophistication. Peacock blue’s connection to luxury makes it a strong color choice for brands selling high-end products or services, like fashion, jewelry, or other expensive goods.
  • Make CTAs pop. Peacock blue’s deep, rich hue makes it stand out and draws a user’s eyes to important buttons. Its blue undertones are also associated with reliability, positively influencing user behavior.
  • Convey trust. Peacock blue and other blue shades are trustworthy colors, so they work well for apps in the finance, technology, or healthcare space where users value security.

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 peacock blue?

For variations within the same rich spectrum as peacock blue, consider:

  • Teal (#069494) shares the same tranquil blend of blue and green with a lighter appearance.
  • Blue-green (#00CEC8) leans slightly more toward green with a vibrant hue.
  • Tiffany blue (#81D8D0) is located in the same region on the color wheel but has a bit more brightness.

What colors go with peacock blue?

To complement peacock blue, consider pairing it with:

  • Blood red (#780606) complements peacock blue for a dramatic and passionate contrast.
  • Olive green (#636B2F) creates a cohesive and grounding color palette.
  • Navy blue (#000080) provides a subtle contrast for a monochromatic color pairing.
  • Ivory (#FFFFE3) allows peacock blue to pop while maintaining a peaceful atmosphere.

Other colors worth considering include mocha to add a touch of warmth, gold for a luxurious feel, and lilac for an elegant interface.

What colors conflict with peacock blue?

While peacock blue is cool, it may clash with:

  • Charcoal (#4A4A4A) might create a heavy, somber look next to peacock blue.
  • Lime green (#89F336) can look unbalanced and overshadow peacock blue’s beauty.
  • Neon orange (#FF5C00) can be overpowering and create a visually jarring effect.
  • Red (#FF2C2C) creates too strong of a contrast, disrupting the richness of peacock blue.

What does peacock blue symbolize?

Peacock blue symbolizes wisdom, elegance, and beauty. Like other blue hues, it also carries connotations of security and reliability.

In color psychology, peacock blue promotes feelings of peace and serenity. Its richness can also bring about feelings of confidence and sophistication while stimulating creative thinking due to its unique hue.

In UI design, peacock blue can create a sophisticated user interface and help establish a sense of trust among users.

What’s the history of peacock blue?

Peacock blue is inspired by the captivating blue-green hues found on peacock feathers. Peacocks, also known as peafowls, originated in the Indian subcontinent. Because of their unique and striking beauty, they were often associated with royalty and power.

Peacocks quickly became prized across various cultures, holding similar connotations of wealth and status. Some cultures even associated these birds with protection and good fortune. Today, peacock blue holds similar meanings, with its rich blue-green hue seen in art, textiles, and modern design.

Color variations

Shades

Tints

Tones

Hues

Color Harmonies

Complementary

Split

Monochromatic

Analogous

Triadic

Square

Custom Palettes

Teal Tide

Mosaic

Deep Dive

Accessibility: Contrast Checker

Large Text

Figma

Normal Text

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

This is #096C6C text on a #FFFFFF background.

6.23:1

WCAG 2.2 Simple Contrast

Normal Text

Pass
AA
4.5:1
Fail
AAA
7:1

Large Text

Pass
AA
3:1
Pass
AAA
4.5:1
Large Text

Figma

Normal Text

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

This is #096C6C text on a #000000 background.

3.37:1

WCAG 2.2 Simple Contrast

Normal Text

Fail
AA
4.5:1
Fail
AAA
7:1

Large Text

Pass
AA
3:1
Fail
AAA
4.5:1

Color simulations

Protanopia

Deuteranopia

Tritanopia

Achromatopsia

Color conversion

The hexadecimal color #096C6C, known as peacock blue, has RGB values of R:9, G:108, B:108 and CMYK values of C:0.92, M:0, Y:0, K:0.58.

VALUECSS
HEX096C6C#096C6C
RGB DECIMAL9, 108, 108RGB(9,108,108)
RGB PERCENTAGE3.5, 42.4, 42.4RGB(3.5%,42.4%,42.4%)
CMYK92, 0, 0, 58
HSL180°, 84.6, 22.9HSL(180°,84.6%,22.9%)
HSV (OR HSB)180°, 91.7, 42.4
WEB SAFE006666#006666
CIE-LAB41.001, -24.929, -7.363
XYZ8.181, 11.865, 16.046
xyY0.227, 0.329, 11.865
CIE-LCH41.001, 25.994, 196.454
CIE-LUV41.001, -31.003, -6.694
HUNTER-LAB34.446, -17.885, -3.507
BINARY00001001, 01101100, 01101100
iOS - SwiftUIColor(red: 0.035, green: 0.424, blue: 0.424)
iOS - UIKitUIColor(red: 0.035, green: 0.424, blue: 0.424, alpha: 1)
Android - ComposeColor(0xFF096C6C)