Back to palettes

Palette

Amber Nectar

A warm, glowing palette inspired by rich honey and a vibrant late afternoon sun.

warmenergetic5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Amber Nectar 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 Amber Nectar.

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

Data visualization

#FFBF00#FFA500#FF8C00#E67300#CC5C00

Palette guide

How to use Amber Nectar

Overview

The "Amber Nectar" palette is a radiant and energetic collection, glowing with the warmth of rich honey and a vibrant late afternoon sun. It features a brilliant #FFBF00 (Amber) and #FFA500 (Orange), transitioning smoothly into the deeper, more intense #FF8C00 (Dark Orange), #E67300 (Deep Orange), and #CC5C00 (Burnt Orange). This palette is saturated and luminous, ideal for designs that aim to convey energy, warmth, and a bold, inviting presence. It's perfect for projects requiring high visibility and a cheerful, optimistic feel.

Best used for

  • High-energy marketing campaigns and promotions
  • Food and beverage branding (e.g., juices, energy drinks)
  • Sports or outdoor adventure websites
  • Call-to-action buttons and interactive UI elements
  • Children's products or educational content
  • Event branding for summer or autumn festivals

Suggested color roles

primary

Use #FFA500 as a bright, inviting orange, excellent for main headings, prominent buttons, or a cheerful brand identity.

secondary

Employ #FF8C00 as a deeper, more intense orange, perfect for subheadings, important information, or secondary interactive elements.

accent

Apply #FFBF00 as a luminous, pure amber, ideal for subtle highlights, icons, or decorative elements that need to pop.

background

A clean, crisp white or a very light cream (e.g., #FFFAE6) to maximize the vibrancy and readability of the palette's rich colors.

text

For primary body text on light backgrounds, use #CC5C00, a deep, robust burnt orange that provides strong contrast and legibility.

Accessibility notes

  • Ensure #CC5C00 text has excellent contrast against white or very light backgrounds (WCAG AA).
  • Avoid using #FFBF00, #FFA500, or #FF8C00 for small text on light backgrounds due to insufficient contrast.
  • These highly saturated colors can cause visual fatigue if used excessively for large blocks of text. Use them for accents and headlines.
  • Always test contrast ratios for interactive elements to ensure they are perceivable by all users.

Recommended combinations

Sunset Glow

A gradient-like progression from deep to bright orange, excellent for banners or dynamic backgrounds.

#CC5C00 · #E67300 · #FFA500

Honey Burst

A vibrant primary, a luminous accent, and a deep grounding color, ideal for a cheerful and legible interface.

#FFA500 · #FFBF00 · #CC5C00

Golden Drop

A trio of warm oranges for creating depth and highlighting different levels of information.

#E67300 · #FF8C00 · #FFA500

CSS variables

:root {
  --amber-nectar-1: #FFBF00;
  --amber-nectar-2: #FFA500;
  --amber-nectar-3: #FF8C00;
  --amber-nectar-4: #E67300;
  --amber-nectar-5: #CC5C00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "amber-nectar": {
        1: "#FFBF00",
        2: "#FFA500",
        3: "#FF8C00",
        4: "#E67300",
        5: "#CC5C00",
      }
    }
  }
}

Related searches

bright amber orange paletteenergetic sunset colorshoney gold color schemevibrant warm brandingdynamic orange yellow design

Palette colors

Hex values

Color 1#FFBF00
·
Color 2#FFA500
·
Color 3#FF8C00
·
Color 4#E67300
·
Color 5#CC5C00
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.4:1Fail
1.9:1Fail
2.5:1Fail
2
1.2:1Fail
1.2:1Fail
1.6:1Fail
2.1:1Fail
3
1.4:1Fail
1.2:1Fail
1.3:1Fail
1.8:1Fail
4
1.9:1Fail
1.6:1Fail
1.3:1Fail
1.3:1Fail
5
2.5:1Fail
2.1:1Fail
1.8:1Fail
1.3:1Fail

Similar palettes

More like Amber Nectar

View all warm