Back to palettes

Palette

Crimson Tide

A powerful and dramatic collection of reds, mirroring the intense force of a rising crimson tide.

warmenergetic5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B0000#A52A2A#B22222#CD5C5C#DC143C

Palette guide

How to use Crimson Tide

Overview

The Crimson Tide palette delivers a powerful and dramatic collection of reds, mirroring the intense force of a rising crimson tide. Featuring deep maroons like #8B0000 and #A52A2A, transitioning to vibrant hues such as #B22222 and #DC143C, this collection is perfect for projects that demand strong visual impact and passionate energy. Designers can utilize its robust spectrum for impactful branding or dynamic digital interfaces. Developers will find these distinct hex codes valuable for crafting harmonious gradients, defining clear visual hierarchies, and creating an immersive experience that conveys strength and urgency.

Best used for

  • Sports team branding and merchandise
  • Action-oriented video game interfaces
  • Automotive or power tool marketing
  • Dramatic film or theater posters
  • High-intensity event promotions
  • Financial or legal sector branding (with caution)

Suggested color roles

primary

#8B0000 for a deep, powerful base that commands authority and passion.

secondary

#A52A2A to introduce a rich, grounding layer, suitable for headers or main content areas.

accent

#DC143C for bright, energetic calls to action or critical highlights that demand attention.

background

#B22222 provides a strong, warm background that supports the more vibrant accents.

text

A crisp white or light gray against darker reds, or a dark charcoal like #222222 against #CD5C5C for readability.

Accessibility notes

  • Ensure high contrast for text on #8B0000 and #A52A2A backgrounds; white is strongly recommended.
  • Text in #B22222 or #DC143C will likely need a light background for readability.
  • Avoid using #CD5C5C as text on #DC143C due to insufficient contrast.
  • Use sufficient visual cues beyond color to differentiate interactive elements, especially important for strong red palettes.

Recommended combinations

Deep Current

Ideal for creating a powerful, deep gradient in backgrounds or large sections.

#8B0000 · #A52A2A · #B22222

Rising Force

Perfect for energetic calls to action or prominent highlight elements.

#B22222 · #DC143C · #A52A2A

Dynamic Flow

Great for indicating progression or movement in UI elements or data visualizations.

#A52A2A · #CD5C5C · #DC143C

CSS variables

:root {
  --crimson-tide-1: #8B0000;
  --crimson-tide-2: #A52A2A;
  --crimson-tide-3: #B22222;
  --crimson-tide-4: #CD5C5C;
  --crimson-tide-5: #DC143C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "crimson-tide": {
        1: "#8B0000",
        2: "#A52A2A",
        3: "#B22222",
        4: "#CD5C5C",
        5: "#DC143C",
      }
    }
  }
}

Related searches

powerful red color schemedramatic crimson paletteintense red brandingpassionate color combinationsmaroon and red design

Palette colors

Hex values

Color 1#8B0000
·
Color 2#A52A2A
·
Color 3#B22222
·
Color 4#CD5C5C
·
Color 5#DC143C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.5:1Fail
2.5:1Fail
2:1Fail
2
1.4:1Fail
1.1:1Fail
1.8:1Fail
1.4:1Fail
3
1.5:1Fail
1.1:1Fail
1.7:1Fail
1.3:1Fail
4
2.5:1Fail
1.8:1Fail
1.7:1Fail
1.3:1Fail
5
2:1Fail
1.4:1Fail
1.3:1Fail
1.3:1Fail

Similar palettes

More like Crimson Tide

View all warm