Back to palettes

Palette

Volcanic Glass Gleam

A searing collection of reds, oranges, and golds, reminiscent of molten rock and glimmering volcanic glass.

Warmenergetic5 colors
More Warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Volcanic Glass 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 Volcanic Glass Gleam.

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

Data visualization

#CC0000#FF4500#FF8C00#FFA500#FFD700

Palette guide

How to use Volcanic Glass Gleam

Overview

The Volcanic Glass Gleam palette is a searing collection of reds, oranges, and golds, reminiscent of molten rock and glimmering volcanic glass. With a strong base of #CC0000 transitioning through vibrant oranges like #FF4500 and #FF8C00, it culminates in the bright, energetic #FFD700. This palette is designed for projects demanding high energy, intensity, and a touch of brilliance. Designers can use this fiery gradient for captivating visuals, while developers can leverage the bright, distinct hues for highly visible interactive elements and calls-to-action, ensuring a dynamic user experience.

Best used for

  • High-energy gaming content
  • Luxury automotive branding
  • Event and festival marketing
  • Food and beverage packaging (e.g., hot sauces)
  • Fashion and beauty for bold statements
  • Interactive digital art installations

Suggested color roles

primary

#CC0000 - A rich, deep red, perfect for main headings, powerful backgrounds, or foundational branding elements.

secondary

#FF4500 - A vibrant red-orange, excellent for subheadings, navigation, or secondary graphic elements.

accent

#FFD700 - The brightest, most luminous gold, ideal for critical calls-to-action, awards, or urgent notifications.

background

#CC0000 - A powerful, energetic background; pair with white or a very light text for contrast.

text

#FFA500 - Suitable for large, bold text on very dark backgrounds (e.g., black) or as a highlight on other reds. For body text, use white or charcoal.

Accessibility notes

  • Ensure #FFD700 or #FFA500 text has sufficient contrast against darker reds like #CC0000 for readability.
  • Avoid using adjacent hues like #CC0000 and #FF4500 for text/background pairings in small font sizes.
  • For primary body text, white or a very dark neutral (e.g., black or charcoal) is recommended on these vibrant colors.
  • Test all interactive elements for clear visual feedback and contrast.

Recommended combinations

Molten Gleam

Creates a fiery, intensifying gradient for hero sections or dynamic backgrounds.

#CC0000 · #FF4500 · #FF8C00

Golden Spark

Ideal for highlighting key features, achievements, or premium content against a deep red.

#CC0000 · #FFD700 · #FFA500

Radiant Flow

Excellent for progress bars, data visualizations, or animated elements showing energy flow.

#FF4500 · #FF8C00 · #FFD700

CSS variables

:root {
  --volcanic-glass-gleam-1: #CC0000;
  --volcanic-glass-gleam-2: #FF4500;
  --volcanic-glass-gleam-3: #FF8C00;
  --volcanic-glass-gleam-4: #FFA500;
  --volcanic-glass-gleam-5: #FFD700;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "volcanic-glass-gleam": {
        1: "#CC0000",
        2: "#FF4500",
        3: "#FF8C00",
        4: "#FFA500",
        5: "#FFD700",
      }
    }
  }
}

Related searches

fiery red orange goldvolcanic vibrant paletteenergetic warm colorsmolten rock aestheticglowing color scheme

Palette colors

Hex values

Color 1#CC0000
·
Color 2#FF4500
·
Color 3#FF8C00
·
Color 4#FFA500
·
Color 5#FFD700
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.5:1Fail
3:1Fail
4.2:1AA18
2
1.7:1Fail
1.5:1Fail
1.7:1Fail
2.5:1Fail
3
2.5:1Fail
1.5:1Fail
1.2:1Fail
1.7:1Fail
4
3:1Fail
1.7:1Fail
1.2:1Fail
1.4:1Fail
5
4.2:1AA18
2.5:1Fail
1.7:1Fail
1.4:1Fail

Similar palettes

More like Volcanic Glass Gleam

View all Warm