Back to palettes

Palette

Magma Flow Veins

Intense reds and fiery oranges contrasting with deep, cool greys, representing flowing magma within volcanic rock.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Magma Flow Veins 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 Magma Flow Veins.

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

Data visualization

#8B0000#FF4500#FF8C00#36454F#2F4F4F

Palette guide

How to use Magma Flow Veins

Overview

The Magma Flow Veins palette uniquely combines intense reds and fiery oranges with deep, cool greys, representing flowing magma within volcanic rock. This scheme offers a compelling contrast between heat and stability, making it versatile for dynamic yet grounded designs. Key colors include the powerful `#8B0000`, the vibrant `#FF4500`, and the cool, stable `#36454F`. It's ideal for projects that need to convey both energy and robustness, such as industrial or geological themes. Designers can leverage this palette for impactful visual storytelling, while developers will appreciate the clear differentiation for status indicators and interactive components.

Best used for

  • Geological data visualization and mapping
  • Rugged outdoor gear branding and websites
  • Industrial website design and heavy machinery UI
  • Fantasy map creation and world-building
  • Tech interfaces with warning states or heat indicators
  • Dark mode themes requiring vibrant accents

Suggested color roles

primary

Utilize `#8B0000` as the deep, powerful red, perfect for primary branding, critical warnings, or significant headings.

secondary

Employ `#FF4500` for energetic elements, call-to-action buttons, or to signify active molten flow and intense heat.

accent

Apply `#FF8C00` as a bright, fiery highlight, ideal for small icons, interactive elements, or to draw attention to crucial information.

background

Designate `#36454F` as a cool, stable dark grey-blue background, providing a solid, contrasting base for the fiery colors.

text

For optimal readability on dark backgrounds like `#36454F` or `#2F4F4F`, use white or a bright accent like `#FF8C00`. On brighter elements, use black or dark charcoal.

Accessibility notes

  • Ensure `#FF4500` and `#FF8C00` have sufficient contrast against `#36454F` and `#2F4F4F` for text and interactive elements.
  • White or very light grey text is recommended on `#8B0000` to meet WCAG AA standards.
  • The deep cool greys provide good contrast for the fiery colors, but ensure text contrast on the lighter orange is also checked.
  • Avoid using `#2F4F4F` as text on `#36454F` due to insufficient contrast.

Recommended combinations

Molten Rock

Ideal for hero sections, combining the deep red and cool grey with a vibrant orange accent to represent magma within rock.

#8B0000 · #36454F · #FF4500

Glowing Veins

Excellent for highlighting dynamic elements or progress indicators, showing a radiant glow against a dark, stable base.

#FF4500 · #FF8C00 · #2F4F4F

Deep Core

Perfect for dark mode interfaces, using the cool greys for structure and the deep red for essential branding or alerts.

#36454F · #2F4F4F · #8B0000

CSS variables

:root {
  --magma-flow-veins-1: #8B0000;
  --magma-flow-veins-2: #FF4500;
  --magma-flow-veins-3: #FF8C00;
  --magma-flow-veins-4: #36454F;
  --magma-flow-veins-5: #2F4F4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "magma-flow-veins": {
        1: "#8B0000",
        2: "#FF4500",
        3: "#FF8C00",
        4: "#36454F",
        5: "#2F4F4F",
      }
    }
  }
}

Related searches

volcanic rock colorsmagma and grey palettefiery tech uigeological color schemedark mode red orange

Palette colors

Hex values

Color 1#8B0000
·
Color 2#FF4500
·
Color 3#FF8C00
·
Color 4#36454F
·
Color 5#2F4F4F
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.9:1Fail
4.3:1AA18
1:1Fail
1.1:1Fail
2
2.9:1Fail
1.5:1Fail
2.9:1Fail
2.6:1Fail
3
4.3:1AA18
1.5:1Fail
4.2:1AA18
3.8:1AA18
4
1:1Fail
2.9:1Fail
4.2:1AA18
1.1:1Fail
5
1.1:1Fail
2.6:1Fail
3.8:1AA18
1.1:1Fail

Similar palettes

More like Magma Flow Veins

View all dark
Volcanic Earth Glow
Volcanic Ember Flow
Deep Sea Volcanic Vent
Ember Glow
Fiery Volcanic Ash
Magma Current Glow