# Vermilion and Jade Contrast

The Near-black, bronze and pale mint color palette brings together dark red, red, green, and pale green. The colors span a very broad lightness range, combining strong color with high contrast. Its bold and dramatic character suits brand mood boards and editorial graphics. Its darkest tone is dark red, and its lightest tone is pale green.

- Also called: Black, red, green and gray linear swatches
- Seed: `kULhYXTFA_87Izn2CT_g`
- Page: https://grabient.com/kULhYXTFA_87Izn2CT_g?style=linearSwatches&steps=4
- Drawn as: linear swatches, 4 steps, 90 degrees
- Kinds: dark to light, vivid, multicolor
- Hues: two-hue
- Contrast of its darkest and lightest colors: 15.4 to 1

## Colors

The name most people give each color, and the text color that reads on it with its contrast.

| Stop | Hex | OKLCH | Name | Text on it |
| --- | --- | --- | --- | --- |
| 1 | `#1d0d09` | `oklch(18.11% 0.0303 32.34)` | Scandinavian Liquorice | white, 18.8 to 1 |
| 2 | `#e52f09` | `oklch(59.84% 0.2205 32.34)` | Vulcan Fire | black, 4.7 to 1 |
| 3 | `#009f5b` | `oklch(61.81% 0.1531 154.92)` | Shamrock | black, 6.1 to 1 |
| 4 | `#dbede0` | `oklch(92.91% 0.0248 154.93)` | Sea Mist | black, 17.1 to 1 |

## CSS

```css
background: linear-gradient(90deg, #1d0d09 0.000% 25.000%, #e52f09 25.000% 50.000%, #009f5b 50.000% 75.000%, #dbede0 75.000% 100.000%);
background: linear-gradient(90deg, oklch(18.11% 0.0303 32.34) 0.000% 25.000%, oklch(59.84% 0.2205 32.34) 25.000% 50.000%, oklch(61.81% 0.1531 154.92) 50.000% 75.000%, oklch(92.91% 0.0248 154.93) 75.000% 100.000%);
```

## Keyframes

4 OKLCH keyframes joined by a Catmull-Rom spline. Hue is unwrapped degrees.

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.181 | 0.03 | 32.3 |
| 2 | 0.598 | 0.22 | 32.3 |
| 3 | 0.618 | 0.2 | 154.9 |
| 4 | 0.929 | 0.025 | 154.9 |

## In these collections

- [Bold swatches](https://grabient.com/bold-swatches)
- [Energetic swatches](https://grabient.com/energetic-swatches)

## Other forms

- [JSON](https://grabient.com/kULhYXTFA_87Izn2CT_g.json?style=linearSwatches&steps=4)
- [PNG](https://grabient.com/kULhYXTFA_87Izn2CT_g.png?style=linearSwatches&steps=4)
- [SVG](https://grabient.com/kULhYXTFA_87Izn2CT_g.svg?style=linearSwatches&steps=4)
- [CSS](https://grabient.com/kULhYXTFA_87Izn2CT_g.css?style=linearSwatches&steps=4)
- [ASE](https://grabient.com/kULhYXTFA_87Izn2CT_g.ase?style=linearSwatches&steps=4)
- [GPL](https://grabient.com/kULhYXTFA_87Izn2CT_g.gpl?style=linearSwatches&steps=4)
- [GRD](https://grabient.com/kULhYXTFA_87Izn2CT_g.grd?style=linearSwatches&steps=4)
- [Design tokens](https://grabient.com/kULhYXTFA_87Izn2CT_g.tokens.json?style=linearSwatches&steps=4)
- [Social card](https://grabient.com/api/og?seed=kULhYXTFA_87Izn2CT_g&style=linearSwatches&steps=4)
- [Palettes like this one](https://grabient.com/palettes?q=kULhYXTFA_87Izn2CT_g)
- [Guide for agents](https://grabient.com/llms.txt)