Back to palettes

Palette

Fiery Sunstone Gleam

Radiant oranges and yellows mimic the warm, captivating glow and energetic sparkle of a polished sunstone.

warmenergetic5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Fiery Sunstone Gleam 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 Fiery Sunstone Gleam.

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

Data visualization

#FFFAF0#FEEFD2#FFDBA8#FFBF70#FFA338

Palette guide

How to use Fiery Sunstone Gleam

Overview

The Fiery Sunstone Gleam palette radiates warmth and energy, mimicking the captivating glow of a polished sunstone. Featuring a luminous progression from near-white #FFFAF0 to the intense orange #FFA338, this palette is ideal for designers seeking to convey radiance, optimism, and natural beauty. Its harmonious blend of light and vibrant hues allows for sophisticated visual storytelling, perfect for digital and print media. Developers can leverage these hex codes to craft inviting user interfaces, energetic brand experiences, or stunning background visuals that evoke a sense of warmth and clarity, appealing to audiences seeking a bright and positive aesthetic.

Best used for

  • wellness and lifestyle brands
  • jewelry and accessory e-commerce
  • summer event promotions
  • eco-friendly product packaging
  • personal development websites
  • natural beauty blogs

Suggested color roles

primary

#FFBF70 - A warm, inviting orange, excellent for main headings, calls to action, or key graphical elements that need to feel bright and approachable.

secondary

#FFDBA8 - A softer, golden orange, suitable for subheadings, navigation, or as a gentle accent color, providing warmth and clarity.

accent

#FFA338 - Use this intense orange for powerful highlights, interactive states, or small, impactful details that require a strong, energetic pop.

background

#FFFAF0 - A delicate, near-white cream that serves as a luminous and elegant base, allowing the warmer hues to truly shine and provide excellent contrast.

text

For text on lighter backgrounds like #FFFAF0, use a dark charcoal or black. On darker shades like #FFA338, white or a very light cream is recommended for readability.

Accessibility notes

  • Ensure sufficient contrast between text and background colors, especially for #FFDBA8 and #FFBF70 when used for text.
  • The lightest colors, particularly #FFFAF0 and #FEEFD2, will require very dark text (e.g., black) to meet WCAG AA contrast standards.
  • Avoid using adjacent light colors (e.g., #FEEFD2 on #FFFAF0) for critical text to prevent readability issues.
  • Always test contrast ratios for WCAG AA compliance, especially for body text and interactive elements to ensure inclusivity.

Recommended combinations

Radiant Glow

Creates a soft, luminous gradient perfect for backgrounds or delicate illustrations, mimicking a gentle, ethereal glow.

#FFFAF0 · #FEEFD2 · #FFDBA8

Sunstone Energy

Ideal for striking calls to action or distinguishing key sections, using the vibrant orange against the light cream for impact and warmth.

#FFBF70 · #FFA338 · #FFFAF0

Warm Depth

Suitable for creating depth in illustrations or secondary UI elements, offering a harmonious and energetic transition from light to deep orange.

#FFDBA8 · #FFBF70 · #FFA338

CSS variables

:root {
  --fiery-sunstone-gleam-1: #FFFAF0;
  --fiery-sunstone-gleam-2: #FEEFD2;
  --fiery-sunstone-gleam-3: #FFDBA8;
  --fiery-sunstone-gleam-4: #FFBF70;
  --fiery-sunstone-gleam-5: #FFA338;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fiery-sunstone-gleam": {
        1: "#FFFAF0",
        2: "#FEEFD2",
        3: "#FFDBA8",
        4: "#FFBF70",
        5: "#FFA338",
      }
    }
  }
}

Related searches

radiant orange color palettesunstone inspired hueswarm optimistic brandingglowing UI designbright natural colors

Palette colors

Hex values

Color 1#FFFAF0
·
Color 2#FEEFD2
·
Color 3#FFDBA8
·
Color 4#FFBF70
·
Color 5#FFA338
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.3:1Fail
1.6:1Fail
1.9:1Fail
2
1.1:1Fail
1.2:1Fail
1.4:1Fail
1.8:1Fail
3
1.3:1Fail
1.2:1Fail
1.2:1Fail
1.5:1Fail
4
1.6:1Fail
1.4:1Fail
1.2:1Fail
1.2:1Fail
5
1.9:1Fail
1.8:1Fail
1.5:1Fail
1.2:1Fail

Similar palettes

More like Fiery Sunstone Gleam

View all warm