Palette

Mango Sticky Delight

A sweet, vibrant collection of yellows and oranges, inspired by the delicious Thai dessert, mango sticky rice.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mango Sticky Delight 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 Mango Sticky Delight.

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

Data visualization

#FFA500#FFD700#FFFACD#8B4513#FF8C00

Palette guide

How to use Mango Sticky Delight

Overview

The Mango Sticky Delight palette is a vibrant and playful collection, drawing inspiration from the beloved Thai dessert. It's ideal for designs that aim to evoke warmth, sweetness, and a touch of tropical joy. Featuring bright orange (#FFA500) and sunny yellow (#FFD700), this palette also includes a soft, creamy base of #FFFACD. The rich, earthy brown (#8B4513) provides a grounding contrast, while a slightly deeper orange, #FF8C00, adds further dimension. Designers and developers can leverage these hues for projects requiring an energetic yet comforting aesthetic, perfect for food branding, summer campaigns, or engaging digital interfaces.

Best used for

Food and beverage branding, especially desserts or tropical drinks
Summer event promotions or travel website designs
Children's product packaging or educational apps
Playful website interfaces or mobile app themes
Restaurant menus or cafe interiors seeking a warm ambiance
Creative content for social media campaigns

Suggested color roles

primary

Use #FFA500 (Bright Orange) for main headings, key calls-to-action, or brand logos to convey energy and warmth effectively.

secondary

Employ #FFD700 (Gold) for secondary buttons, highlighted features, or decorative elements, offering a bright, complementary tone.

accent

Apply #FF8C00 (Dark Orange) for small, impactful elements, interactive states, or subtle gradients where a deeper, intense pop is needed.

background

Utilize #FFFACD (Lemon Chiffon) as a soft, inviting background, allowing brighter colors to stand out without overwhelming the user.

text

Choose #8B4513 (Saddle Brown) for body text and important information, ensuring excellent contrast and readability against lighter palette colors.

Accessibility notes

Ensure #8B4513 text on #FFFACD background meets WCAG contrast ratios for optimal readability.
Avoid placing #FFA500 or #FFD700 directly on #FFFACD for small text to prevent insufficient contrast.
Use #8B4513 for crucial text elements against any lighter color in the palette to maintain legibility.
Consider larger font sizes or bolding when using #FF8C00 or #FFA500 for headings to improve visual accessibility.

Recommended combinations

Tropical Sunset

Ideal for vibrant headers, hero sections, or branding for tropical resorts and summer products.

#FFA500 · #FF8C00 · #FFFACD

Dessert Delight

Perfect for food blog layouts, recipe cards, or packaging for baked goods and sweet treats.

#FFD700 · #FFFACD · #8B4513

Playful Contrast

Effective for interactive elements, educational app interfaces, or energetic social media graphics.

#FFA500 · #8B4513 · #FFD700

CSS variables

:root {
  --mango-sticky-delight-1: #FFA500;
  --mango-sticky-delight-2: #FFD700;
  --mango-sticky-delight-3: #FFFACD;
  --mango-sticky-delight-4: #8B4513;
  --mango-sticky-delight-5: #FF8C00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mango-sticky-delight": {
        1: "#FFA500",
        2: "#FFD700",
        3: "#FFFACD",
        4: "#8B4513",
        5: "#FF8C00",
      }
    }
  }
}

Hex values

Color 1#FFA500

Color 2#FFD700

Color 3#FFFACD

Color 4#8B4513

Color 5#FF8C00

Accessibility

Contrast checker

1.4:1Fail

1.9:1Fail

3.6:1AA18

1.2:1Fail

1.4:1Fail

1.3:1Fail

5.1:1AA

1.7:1Fail

1.9:1Fail

1.3:1Fail

6.7:1AA

2.2:1Fail