Palette

Desert Jasper Vein

Rich, earthy reds and warm browns found in ancient desert jasper formations.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Desert Jasper Vein 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 Desert Jasper Vein.

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

Data visualization

#9D5B4D#C68977#DEA08B#F6D5CC#7C3B2F

Palette guide

How to use Desert Jasper Vein

Overview

The Desert Jasper Vein palette draws inspiration from the rich, striated patterns of ancient desert jasper, presenting a sophisticated blend of earthy reds and warm browns. With a spectrum ranging from the deep #7C3B2F to the soft #F6D5CC, this palette offers a natural yet refined aesthetic. Designers can leverage the inviting #9D5B4D and the subtle #C68977 to create depth and texture, ideal for projects requiring a sense of natural elegance and rugged beauty. This collection is perfect for branding, web design, or editorial layouts that aim to evoke the timeless quality of minerals and the serene vastness of desert landscapes.

Best used for

Mineral-inspired jewelry brands
Rustic lodge interiors
Geology or nature conservation sites
Masculine product design
Earthy fashion lines
Artisan craft websites

Suggested color roles

primary

Use #9D5B4D as a grounding primary for headers or brand elements, conveying natural strength.

secondary

Employ #C68977 for secondary backgrounds or larger content blocks, offering a warm and inviting feel.

accent

Introduce #7C3B2F as a deep, impactful accent for calls to action or key details, providing strong contrast.

background

Apply #F6D5CC for light, airy backgrounds, ensuring the rich earthy tones stand out with clarity.

text

Utilize #7C3B2F for primary body text, ensuring excellent readability against lighter background shades.

Accessibility notes

Ensure #7C3B2F is used for text against #F6D5CC or #DEA08B for optimal contrast.
Avoid using #C68977 on #DEA08B for small text due to potential low contrast.
The darkest shade, #7C3B2F, provides strong contrast for headings on any lighter palette color.
Always verify contrast ratios for all text elements to maintain readability standards.

Recommended combinations

Jasper Layers

Creates a subtle, natural gradient for backgrounds or layered UI elements.

#F6D5CC · #DEA08B · #C68977

Vein Depth

Effective for strong branding, impactful buttons, or sophisticated data visualizations.

#9D5B4D · #7C3B2F · #C68977

Earth's Core

Provides a balanced, rich aesthetic for content blocks or feature cards.

#DEA08B · #7C3B2F · #F6D5CC

CSS variables

:root {
  --desert-jasper-vein-1: #9D5B4D;
  --desert-jasper-vein-2: #C68977;
  --desert-jasper-vein-3: #DEA08B;
  --desert-jasper-vein-4: #F6D5CC;
  --desert-jasper-vein-5: #7C3B2F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "desert-jasper-vein": {
        1: "#9D5B4D",
        2: "#C68977",
        3: "#DEA08B",
        4: "#F6D5CC",
        5: "#7C3B2F",
      }
    }
  }
}

Hex values

Color 1#9D5B4D

Color 2#C68977

Color 3#DEA08B

Color 4#F6D5CC

Color 5#7C3B2F

Accessibility

Contrast checker

1.8:1Fail

2.4:1Fail

3.8:1AA18

1.6:1Fail

1.8:1Fail

1.3:1Fail

2.1:1Fail

2.9:1Fail

2.4:1Fail

1.3:1Fail

1.6:1Fail

3.8:1AA18

2.1:1Fail

1.6:1Fail

6.1:1AA

1.6:1Fail

2.9:1Fail

3.8:1AA18

6.1:1AA

Similar palettes

More like Desert Jasper Vein

Desert Jasper Vein

See it in context.

Ready when you are.

Built with Desert Jasper Vein.

How to use Desert Jasper Vein

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Jasper Layers

Vein Depth

Earth's Core

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Desert Jasper Vein