Palette

Crimson Portal

Intense, deep reds to bright scarlet, creating a powerful, almost mystical, and captivating feel.

vibrantdark5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#800000#A52A2A#B22222#DC143C#FF0000

Palette guide

How to use Crimson Portal

Overview

The "Crimson Portal" palette ranges from intense, deep reds to bright scarlet, creating a powerful, almost mystical, and captivating feel. This vibrant collection includes a profound Maroon #800000, a rich Brown #A52A2A, a robust Firebrick #B22222, a striking Crimson #DC143C, and a bold Red #FF0000. Designers can leverage this palette to create dramatic, energetic, and visually commanding aesthetics, perfect for evoking mystery, power, or urgency. Its strong progression from deep, dark reds to a vivid, pure red allows for impactful visual statements and dynamic compositions. Developers will find these hex codes ideal for gaming interfaces, action-oriented branding, or any design requiring a powerful, intense, and visually striking appeal.

Best used for

Gaming UI/UX (fantasy, action, horror)
Dramatic website hero sections
Action-oriented branding and logos
Movie posters and theatrical designs
Event promotion (high-energy concerts)
Dark mode interfaces with intense accents

Suggested color roles

primary

Use #800000 (Maroon) for main backgrounds, navigation, or strong brand elements, establishing a profound, anchoring presence.

secondary

Apply #A52A2A (Brown) or #B22222 (Firebrick) for supporting content, subheadings, or borders, providing depth and warmth.

accent

Feature #FF0000 (Red) for vibrant highlights, interactive elements, or calls to action, drawing immediate and strong attention.

background

Employ #DC143C (Crimson) for content areas or cards, offering a bold and energetic backdrop that maintains readability with light text.

text

For dark backgrounds like #800000, #A52A2A, #B22222, or #DC143C, use white or a very light off-white. For elements on very light backgrounds, a deep charcoal or black is suitable.

Accessibility notes

Ensure sufficient contrast for light text (e.g., white) on #800000 (Maroon), #A52A2A (Brown), #B22222 (Firebrick), and #DC143C (Crimson).
Avoid using #FF0000 (Red) as a background for extensive body text; it's best for accents or large, high-contrast headings due to its intensity.
Test all combinations for WCAG 2.1 AA compliance, especially for interactive elements and small text, as vibrant reds can sometimes be challenging.
Consider using a slightly desaturated white for text on the darkest reds to prevent visual vibration and improve comfort.

Recommended combinations

Portal Depth

Creating rich, layered backgrounds or sophisticated gradients that evoke depth and power, moving from deep maroon to vibrant crimson.

#800000 · #B22222 · #DC143C

Scarlet Flash

Highlighting key information or calls to action, combining rich brown with a pure red and vibrant crimson for maximum impact.

#A52A2A · #FF0000 · #DC143C

Dramatic Shift

Establishing a powerful visual hierarchy, using firebrick for primary elements, pure red for highlights, and maroon for grounding.

#B22222 · #FF0000 · #800000

CSS variables

:root {
  --crimson-portal-1: #800000;
  --crimson-portal-2: #A52A2A;
  --crimson-portal-3: #B22222;
  --crimson-portal-4: #DC143C;
  --crimson-portal-5: #FF0000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "crimson-portal": {
        1: "#800000",
        2: "#A52A2A",
        3: "#B22222",
        4: "#DC143C",
        5: "#FF0000",
      }
    }
  }
}

Hex values

Color 1#800000

Color 2#A52A2A

Color 3#B22222

Color 4#DC143C

Color 5#FF0000

Accessibility

Contrast checker

1.5:1Fail

1.6:1Fail

2.2:1Fail

2.7:1Fail

1.5:1Fail

1.1:1Fail

1.4:1Fail

1.8:1Fail

1.6:1Fail

1.1:1Fail

1.3:1Fail

1.7:1Fail

2.2:1Fail

1.4:1Fail

1.3:1Fail

1.2:1Fail

2.7:1Fail

1.8:1Fail

1.7:1Fail

1.2:1Fail

Similar palettes

More like Crimson Portal

Celestial Nebula Glow

Cosmic Dust Shimmer

Crimson Star Dust