Palette

Sunstone Solstice

A radiant palette evoking the serene golden hour glow over ancient desert landscapes.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#CC7722#E8B40A#F5DEB3#7D4028#4D3425

Palette guide

How to use Sunstone Solstice

Overview

The Sunstone Solstice palette evokes the serene golden hour glow over ancient desert landscapes, offering a rich and earthy collection of warm tones. Featuring the vibrant orange of #CC7722, the bright gold of #E8B40A, and the sandy beige of #F5DEB3, this palette creates a sense of natural radiance and timelessness. Designers can leverage these colors to infuse projects with an authentic, grounded feel, whether for web design, branding, or editorial content. The deep browns, #7D4028 and #4D3425, provide excellent anchors and contrast, making this palette versatile for projects requiring both luminous warmth and robust depth, from outdoor gear branding to cultural heritage sites.

Best used for

Desert-themed branding
Outdoor adventure and exploration websites
Natural and organic product packaging
Cultural heritage site design
Rustic home decor aesthetics
Autumn collection marketing

Suggested color roles

primary

#CC7722 - This vibrant, earthy orange serves as a powerful primary, ideal for impactful headlines, brand logos, and key call-to-action buttons.

secondary

#7D4028 - A deep, rich brown that provides excellent grounding, perfect for subheadings, navigation, or as a strong background for content sections.

accent

#E8B40A - Use this bright, sunny gold for luminous highlights, interactive elements, or small details that require a radiant pop.

background

#F5DEB3 - This soft, sandy beige offers a warm, neutral background that allows the richer colors to stand out beautifully.

text

A deep, dark brown like #4D3425 or classic black will provide optimal readability against the lighter background shades.

Accessibility notes

Ensure sufficient contrast for text against #F5DEB3; darker palette colors like #7D4028 or #4D3425 are recommended for body text.
Avoid pairing #E8B40A with #F5DEB3 for small text or icons due to potential low contrast.
Test interactive elements like buttons using #CC7722 on #F5DEB3 to ensure they meet WCAG contrast guidelines.
For headings and crucial information, prioritize the use of #7D4028 or #4D3425.

Recommended combinations

Golden Desert

Creates a radiant, inviting aesthetic: #CC7722 for main titles, #E8B40A for luminous accents, and #F5DEB3 as a soft, warm background.

#CC7722 · #E8B40A · #F5DEB3

Solstice Depth

Use #7D4028 for strong visual anchors, #CC7722 for supporting text, and #F5DEB3 for soft highlights or secondary backgrounds.

#7D4028 · #CC7722 · #F5DEB3

Earthy Horizon

Ideal for strong branding: #4D3425 for bold statements, #CC7722 for vibrant graphics, and #E8B40A for captivating details.

#4D3425 · #CC7722 · #E8B40A

CSS variables

:root {
  --sunstone-solstice-1: #CC7722;
  --sunstone-solstice-2: #E8B40A;
  --sunstone-solstice-3: #F5DEB3;
  --sunstone-solstice-4: #7D4028;
  --sunstone-solstice-5: #4D3425;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sunstone-solstice": {
        1: "#CC7722",
        2: "#E8B40A",
        3: "#F5DEB3",
        4: "#7D4028",
        5: "#4D3425",
      }
    }
  }
}

Hex values

Color 1#CC7722

Color 2#E8B40A

Color 3#F5DEB3

Color 4#7D4028

Color 5#4D3425

Accessibility

Contrast checker

1.8:1Fail

2.6:1Fail

2.4:1Fail

3.4:1AA18

1.8:1Fail

1.5:1Fail

4.2:1AA18

6:1AA

2.6:1Fail

1.5:1Fail

6.1:1AA

8.7:1AAA

2.4:1Fail

4.2:1AA18

6.1:1AA

1.4:1Fail

3.4:1AA18

6:1AA

8.7:1AAA

1.4:1Fail

Similar palettes

More like Sunstone Solstice