Back to palettes

Palette

Royal Peacock Plume

A dazzling array of blues and greens, inspired by the iridescent splendor of a peacock's feather.

vibrantelegant5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Royal Peacock Plume reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Royal Peacock Plume.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#003844#01724C#2B9F87#3C8DAD#5CB8CC

Palette guide

How to use Royal Peacock Plume

Overview

The Royal Peacock Plume palette captures the mesmerizing iridescence of a peacock's feather, offering a vibrant yet elegant spectrum of blues and greens. Starting with a deep teal #003844, moving through a lush forest green #01724C, a bright emerald #2B9F87, a serene steel blue #3C8DAD, and culminating in a clear sky blue #5CB8CC. This palette is perfect for designs that aim to be sophisticated, natural, and visually captivating. Designers can create dynamic layouts, while developers can implement these hex codes to build interfaces that feel refreshing and luxurious.

Best used for

  • Nature-inspired branding
  • Eco-luxury product design
  • Travel and hospitality websites
  • Art and cultural institution branding
  • Fashion and accessory design
  • Digital interfaces requiring a calming yet vibrant feel

Suggested color roles

primary

#003844 - A grounding, deep teal ideal for main navigation, footers, or large background sections.

secondary

#01724C - Use this rich green for supporting elements, sub-headers, or call-to-action buttons.

accent

#2B9F87 - A bright, energetic emerald perfect for highlighting key information, interactive elements, or illustrations.

background

#5CB8CC - A light, airy blue that works well for main content areas, card backgrounds, or as a subtle brand backdrop.

text

#3C8DAD - Can be used for headings or decorative text on light backgrounds. For body text on #5CB8CC, a dark charcoal or #003844 provides best readability.

Accessibility notes

  • Ensure adequate contrast for text using #3C8DAD on #5CB8CC; it might require larger font sizes.
  • #003844 offers strong contrast for light text (e.g., white or #5CB8CC), making it suitable for primary text on dark elements.
  • Avoid using #2B9F87 for small body text on light backgrounds due to potential readability issues.
  • When placing #01724C text on #5CB8CC, verify WCAG AA compliance for readability.

Recommended combinations

Deep Ocean

#003844 as a dominant background, #5CB8CC for content areas, and #2B9F87 for vibrant accents.

#003844 · #5CB8CC · #2B9F87

Forest & Sky

#01724C for main blocks, #3C8DAD for secondary elements, and #5CB8CC for backgrounds or light text.

#01724C · #3C8DAD · #5CB8CC

Iridescent Glow

Light background with emerald highlights and deep teal text or icons.

#5CB8CC · #2B9F87 · #003844

CSS variables

:root {
  --royal-peacock-plume-1: #003844;
  --royal-peacock-plume-2: #01724C;
  --royal-peacock-plume-3: #2B9F87;
  --royal-peacock-plume-4: #3C8DAD;
  --royal-peacock-plume-5: #5CB8CC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "royal-peacock-plume": {
        1: "#003844",
        2: "#01724C",
        3: "#2B9F87",
        4: "#3C8DAD",
        5: "#5CB8CC",
      }
    }
  }
}

Related searches

peacock color schemejewel tone blues greenselegant nature palettevibrant teal green colorsluxury blue green design

Palette colors

Hex values

Color 1#003844
·
Color 2#01724C
·
Color 3#2B9F87
·
Color 4#3C8DAD
·
Color 5#5CB8CC
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.1:1Fail
3.9:1AA18
3.4:1AA18
5.6:1AA
2
2.1:1Fail
1.8:1Fail
1.6:1Fail
2.6:1Fail
3
3.9:1AA18
1.8:1Fail
1.1:1Fail
1.4:1Fail
4
3.4:1AA18
1.6:1Fail
1.1:1Fail
1.6:1Fail
5
5.6:1AA
2.6:1Fail
1.4:1Fail
1.6:1Fail

Similar palettes

More like Royal Peacock Plume

View all vibrant