Palette

Crimson Star Dust

A vivid spectrum of reds and oranges, mimicking the dramatic expulsion of stardust from distant cosmic events.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Crimson Star Dust 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 Crimson Star Dust.

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

Data visualization

#8B0000#B22222#DC143C#FF6347#F08080

Palette guide

How to use Crimson Star Dust

Overview

The "Crimson Star Dust" palette offers a vivid spectrum of reds and oranges, mimicking the dramatic expulsion of stardust from distant cosmic events. This vibrant collection features a strong Dark Red #8B0000, a robust Firebrick #B22222, a striking Crimson #DC143C, a fiery Tomato #FF6347, and a softer Light Coral #F08080. Designers can leverage this palette to create energetic, dramatic, and visually captivating aesthetics, perfect for evoking excitement and cosmic wonder. Its strong progression from deep reds to bright oranges allows for dynamic visual storytelling and impactful calls to action. Developers will find these hex codes ideal for sci-fi gaming, space exploration themes, or any design requiring a powerful, vibrant, and engaging appeal.

Best used for

Sci-fi and space-themed gaming UI
Dramatic website hero sections (cosmic)
Energetic event promotion
Science and technology branding
Fantasy illustration and digital art
Youth-oriented product marketing

Suggested color roles

primary

Use #8B0000 (Dark Red) for main headings, strong brand elements, or deep background sections, establishing a powerful foundation.

secondary

Apply #B22222 (Firebrick) or #DC143C (Crimson) for supporting content, subheadings, or borders, providing a vibrant, energetic tone.

accent

Feature #FF6347 (Tomato) for vibrant highlights, interactive elements, or calls to action, drawing immediate attention with its fiery hue.

background

Utilize #F08080 (Light Coral) for clean content areas or as a soft, inviting background, ensuring excellent readability with dark text.

text

For dark backgrounds like #8B0000, #B22222, or #DC143C, use white or a very light off-white. For lighter backgrounds like #FF6347 or #F08080, a deep charcoal or black provides optimal readability.

Accessibility notes

Ensure sufficient contrast for dark text on #FF6347 (Tomato) and #F08080 (Light Coral); dark text is crucial.
Pair lighter text (e.g., #FFFFFF) with #8B0000 (Dark Red), #B22222 (Firebrick), and #DC143C (Crimson) for optimal legibility.
Avoid using #FF6347 (Tomato) with #F08080 (Light Coral) for text/background without careful contrast checking due to their similar luminosities.
Test all color combinations against WCAG 2.1 AA standards, especially for interactive elements, as vibrant reds can sometimes be challenging.

Recommended combinations

Cosmic Blaze

Creating high-impact hero sections or calls to action, combining deep red with vibrant crimson and fiery tomato for a dramatic, energetic effect.

#8B0000 · #DC143C · #FF6347

Star Dust Gradient

Smooth, energetic gradients for background elements or content blocks, transitioning from firebrick to light coral and vibrant crimson.

#B22222 · #F08080 · #DC143C

Vibrant Contrast

Highlighting key information, using fiery tomato for emphasis, dark red for grounding, and light coral for readability.

#FF6347 · #8B0000 · #F08080

CSS variables

:root {
  --crimson-star-dust-1: #8B0000;
  --crimson-star-dust-2: #B22222;
  --crimson-star-dust-3: #DC143C;
  --crimson-star-dust-4: #FF6347;
  --crimson-star-dust-5: #F08080;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "crimson-star-dust": {
        1: "#8B0000",
        2: "#B22222",
        3: "#DC143C",
        4: "#FF6347",
        5: "#F08080",
      }
    }
  }
}

Hex values

Color 1#8B0000

Color 2#B22222

Color 3#DC143C

Color 4#FF6347

Color 5#F08080

Accessibility

Contrast checker

1.5:1Fail

2:1Fail

3.4:1AA18

3.9:1AA18

1.5:1Fail

1.3:1Fail

2.3:1Fail

2.6:1Fail

2:1Fail

1.3:1Fail

1.7:1Fail

1.9:1Fail

3.4:1AA18

2.3:1Fail

1.7:1Fail

1.1:1Fail

3.9:1AA18

2.6:1Fail

1.9:1Fail

1.1:1Fail

Similar palettes

More like Crimson Star Dust

View all vibrant

Celestial Firestorm

Galactic Nebula

Celestial Aurora Burst

Cosmic Dawn Hues

Cosmic Dust Trails

Cosmic Nebula Swirl