Back to palettes

Palette

Honey Comb

Sweet yellows and golden oranges mimic the rich, inviting warmth of natural honey and a bustling honeycomb.

warmnatural5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Honey Comb 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 Honey Comb.

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

Data visualization

#F4A460#D2B48C#E0B050#FFD700#FFC125

Palette guide

How to use Honey Comb

Overview

The Honey Comb palette offers a delightful array of sweet yellows and golden oranges, perfectly capturing the natural warmth and inviting glow of a bustling honeycomb. With shades like the inviting #F4A460 and the vibrant #FFD700, this palette is ideal for designers and developers aiming to evoke feelings of comfort, natural goodness, and gentle energy. The inclusion of a soft gold like #D2B48C provides a versatile base, while the bright #FFC125 adds a cheerful pop. This collection of hues is designed to create visually appealing and harmonious digital or print designs that feel both rich and approachable.

Best used for

  • Natural product branding
  • Food and beverage packaging
  • Cozy home decor websites
  • Children's educational apps
  • Autumnal event invitations
  • E-commerce for artisanal goods

Suggested color roles

primary

Utilize #FFD700 as a radiant primary color for headings or key UI elements that need to stand out with a bright, luxurious feel.

secondary

Apply #E0B050 for supportive content areas, navigation, or secondary calls to action, offering a slightly deeper warmth.

accent

Employ #FFC125 for vibrant accents like interactive buttons, hover states, or small decorative details, providing a cheerful spark.

background

Use #D2B48C as a soft, neutral background, offering a subtle warmth that allows other colors to shine without overwhelming the design.

text

Choose #F4A460 for body text on lighter backgrounds, or a dark charcoal for optimal readability, ensuring accessibility and clear communication.

Accessibility notes

  • Ensure sufficient contrast when using #FFC125 or #FFD700 for text on very light backgrounds; consider a darker shade for readability.
  • Test interactive elements like buttons to ensure their states (active, hover) are clearly distinguishable.
  • When layering colors, use a tool to check contrast ratios, especially for text over patterned backgrounds.
  • Prioritize #F4A460 or a darker alternative for essential text elements to maintain legibility.

Recommended combinations

Golden Glow

Create smooth, inviting gradients for hero sections or background elements that need a warm, luminous effect.

#FFD700 · #E0B050 · #F4A460

Earthy Comfort

Ideal for establishing a grounded and natural feel in product showcases or informational sections.

#D2B48C · #F4A460 · #E0B050

Cheerful Accent

Perfect for drawing attention to calls to action or playful graphic elements against a softer base.

#FFC125 · #FFD700 · #D2B48C

CSS variables

:root {
  --honey-comb-1: #F4A460;
  --honey-comb-2: #D2B48C;
  --honey-comb-3: #E0B050;
  --honey-comb-4: #FFD700;
  --honey-comb-5: #FFC125;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "honey-comb": {
        1: "#F4A460",
        2: "#D2B48C",
        3: "#E0B050",
        4: "#FFD700",
        5: "#FFC125",
      }
    }
  }
}

Related searches

honey color palettewarm golden tonesnatural UI colorssweet brand colorsearthy orange yellow

Palette colors

Hex values

Color 1#F4A460
·
Color 2#D2B48C
·
Color 3#E0B050
·
Color 4#FFD700
·
Color 5#FFC125
·

Accessibility

Contrast checker

1
2
3
4
5
1
1:1Fail
1:1Fail
1.4:1Fail
1.2:1Fail
2
1:1Fail
1:1Fail
1.4:1Fail
1.2:1Fail
3
1:1Fail
1:1Fail
1.4:1Fail
1.2:1Fail
4
1.4:1Fail
1.4:1Fail
1.4:1Fail
1.2:1Fail
5
1.2:1Fail
1.2:1Fail
1.2:1Fail
1.2:1Fail

Similar palettes

More like Honey Comb

View all warm