Palette

Monarch Butterfly Wings

Bright and bold oranges and yellows with a touch of brown, mirroring the iconic butterfly's vibrant wings.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Monarch Butterfly Wings 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 Monarch Butterfly Wings.

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

Data visualization

#FF6600#FFA500#FFD700#FF6347#A0522D

Palette guide

How to use Monarch Butterfly Wings

Overview

The Monarch Butterfly Wings palette is a vibrant and energetic collection, perfect for designs that aim to capture attention and evoke warmth. Featuring bold oranges like #FF6600 and #FFA500, a bright yellow #FFD700, and a softer coral #FF6347, it's beautifully grounded by the earthy brown of #A0522D. This selection offers a dynamic range for digital interfaces, branding, and promotional materials. Designers can leverage its high contrast and natural appeal to create engaging user experiences, while developers will find these hex codes easy to implement for striking visual elements that truly pop. It's an ideal choice for projects needing a lively, natural, yet sophisticated touch.

Best used for

Nature-inspired branding and logos
Children's educational apps or websites
Outdoor adventure marketing materials
Food and beverage packaging (e.g., citrus products)
Event posters or festival branding
E-commerce sites for vibrant products

Suggested color roles

primary

Use #FF6600 as a dominant brand color for calls to action or main headings, conveying energy and urgency.

secondary

#FFA500 works well for secondary buttons, navigation elements, or background sections that need warmth without overpowering.

accent

Employ #FFD700 for highlighting key information, interactive elements, or small decorative details to add a bright, cheerful pop.

background

A very light cream or white background would make these colors sing. For a warmer tone, consider a very light tint of #A0522D.

text

Dark charcoal or black text on light backgrounds for readability. For dark backgrounds, #FFD700 or a crisp white provides excellent contrast.

Accessibility notes

Ensure sufficient contrast between #FF6600 and #FFA500 when used together for text or interactive elements.
#FFD700 text requires a dark background (e.g., #A0522D or black) for WCAG AA compliance.
Avoid using #FF6347 text on a #FFA500 background due to low contrast.
Consider a dark brown (#A0522D) or black for body text on light backgrounds for optimal readability.

Recommended combinations

Sunset Glow

Ideal for hero sections or headers, with #FF6600 as a bold statement, #FFD700 for accents, and #A0522D for supporting text or grounding elements.

#FF6600 · #FFD700 · #A0522D

Autumn Fields

Creates a warm, inviting feel suitable for blog posts, product descriptions, or less formal interfaces, using #A0522D for backgrounds.

#FFA500 · #FF6347 · #A0522D

Tropical Burst

A high-energy, cheerful combination perfect for calls to action, festive designs, or youthful branding, with white text.

#FFD700 · #FF6600 · #FF6347

CSS variables

:root {
  --monarch-butterfly-wings-1: #FF6600;
  --monarch-butterfly-wings-2: #FFA500;
  --monarch-butterfly-wings-3: #FFD700;
  --monarch-butterfly-wings-4: #FF6347;
  --monarch-butterfly-wings-5: #A0522D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "monarch-butterfly-wings": {
        1: "#FF6600",
        2: "#FFA500",
        3: "#FFD700",
        4: "#FF6347",
        5: "#A0522D",
      }
    }
  }
}

Hex values

Color 1#FF6600

Color 2#FFA500

Color 3#FFD700

Color 4#FF6347

Color 5#A0522D

Accessibility

Contrast checker

1.5:1Fail

2.1:1Fail

1:1Fail

1.9:1Fail

1.5:1Fail

1.4:1Fail

1.5:1Fail

2.8:1Fail

2.1:1Fail

1.4:1Fail

2.1:1Fail

4:1AA18

1:1Fail

1.5:1Fail

2.1:1Fail

1.9:1Fail

2.8:1Fail

4:1AA18

1.9:1Fail

Similar palettes

More like Monarch Butterfly Wings

Monarch Butterfly Wings

See it in context.

Ready when you are.

Built with Monarch Butterfly Wings.

How to use Monarch Butterfly Wings

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Sunset Glow

Autumn Fields

Tropical Burst

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Monarch Butterfly Wings