Back to palettes

Palette

Obsidian Rift Spark

A dramatic palette reflecting the stark contrast between dark volcanic rock and the hidden fiery core beneath.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Obsidian Rift Spark 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 Obsidian Rift Spark.

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

Data visualization

#2F4F4F#4A4A4A#696969#B22222#FF4500

Palette guide

How to use Obsidian Rift Spark

Overview

Obsidian Rift Spark is a dramatic palette reflecting the stark contrast between dark volcanic rock and the hidden fiery core beneath. It features deep, cool grays like #2F4F4F and #4A4A4A, providing a powerful, grounded backdrop. The vibrant, fiery accents of #B22222 and #FF4500 introduce an explosive energy, perfect for highlighting critical information or calls to action. This palette is designed for high-impact, dynamic designs that demand attention and convey a sense of raw, untamed power.

Best used for

  • Action-oriented games and applications
  • High-energy sports brands
  • Warning systems and critical alerts
  • Industrial safety applications
  • Dramatic movie posters and trailers
  • Emergency services branding

Suggested color roles

primary

Utilize #2F4F4F as the dominant background, establishing a deep, cool teal-gray foundation.

secondary

Employ #4A4A4A for secondary content areas, panels, or subtle textural overlays, adding depth.

accent

Apply #FF4500 for critical calls to action, urgent warnings, or key interactive elements to create maximum impact.

background

The powerful #2F4F4F provides an excellent, dramatic backdrop, evoking volcanic rock.

text

For primary body text, #696969 offers good readability on darker backgrounds. Use white or near-white for essential headlines or text over accents.

Accessibility notes

  • Crucial to ensure very high contrast for #FF4500 and #B22222 accents against the dark grays to meet WCAG AAA standards.
  • Avoid using red or orange for large blocks of text; reserve them for highlights, icons, or short, impactful phrases.
  • Provide clear and distinct focus states for all interactive elements, especially those using the fiery accents.
  • Test for color blindness, as red-green deficiencies might affect the perception of the red accents against the dark grays.

Recommended combinations

Fiery Core

A deep teal-gray background with a vibrant orange accent for critical elements and a legible gray for body text.

#2F4F4F · #FF4500 · #696969

Volcanic Glow

Use a dark gray background with a deep red accent for important information or decorative elements, and a mid-gray for text.

#4A4A4A · #B22222 · #696969

Rift Layers

For layered UI, where #2F4F4F is the base, #4A4A4A for panels, and #696969 for primary text, creating subtle depth.

#2F4F4F · #4A4A4A · #696969

CSS variables

:root {
  --obsidian-rift-spark-1: #2F4F4F;
  --obsidian-rift-spark-2: #4A4A4A;
  --obsidian-rift-spark-3: #696969;
  --obsidian-rift-spark-4: #B22222;
  --obsidian-rift-spark-5: #FF4500;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "obsidian-rift-spark": {
        1: "#2F4F4F",
        2: "#4A4A4A",
        3: "#696969",
        4: "#B22222",
        5: "#FF4500",
      }
    }
  }
}

Related searches

volcanic red palettedramatic dark colorsfiery accent schemehigh contrast UIpowerful brand identity

Palette colors

Hex values

Color 1#2F4F4F
·
Color 2#4A4A4A
·
Color 3#696969
·
Color 4#B22222
·
Color 5#FF4500
·

Accessibility

Contrast checker

1
2
3
4
5
1
1:1Fail
1.6:1Fail
1.3:1Fail
2.6:1Fail
2
1:1Fail
1.6:1Fail
1.3:1Fail
2.6:1Fail
3
1.6:1Fail
1.6:1Fail
1.2:1Fail
1.6:1Fail
4
1.3:1Fail
1.3:1Fail
1.2:1Fail
1.9:1Fail
5
2.6:1Fail
2.6:1Fail
1.6:1Fail
1.9:1Fail

Similar palettes

More like Obsidian Rift Spark

View all dark
Obsidian Crater Flow
Volcanic Ash Flow
Volcanic Ash Glaze
Lava Flow Ember
Obsidian Peak Smoke
Volcanic Ash Ember