# Coral blue green contrast

Warm red and coral sit opposite clear blue and green across clean horizontal swatches, creating a readable split-complementary tension with medium strength. The mood is confident, colorful, and structured. Use it for infographics, classroom materials, brand systems, and searches for split complementary colors, coral blue palettes, or balanced contrast swatches.

- Also called: Maroon, salmon, blue and green linear swatches
- Seed: `kUcFgQ0zTBNGlLDVq7ZA`
- Page: https://grabient.com/kUcFgQ0zTBNGlLDVq7ZA?style=linearSwatches&steps=4&angle=180
- Drawn as: linear swatches, 4 steps, 180 degrees
- Kinds: multicolor
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 2.9 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 | `#893131` | `oklch(44.09% 0.1213 23.20)` | Planet of the Apes | white, 8.2 to 1 |
| 2 | `#da6b52` | `oklch(65.35% 0.1447 33.77)` | Barely Brown | black, 6.1 to 1 |
| 3 | `#3a99bc` | `oklch(64.17% 0.1020 226.80)` | Fairy Tale Blue | black, 6.4 to 1 |
| 4 | `#63aa67` | `oklch(67.32% 0.1199 145.43)` | Deep Mint | black, 7.4 to 1 |

## CSS

```css
background: linear-gradient(180deg, #893131 0.000% 25.000%, #da6b52 25.000% 50.000%, #3a99bc 50.000% 75.000%, #63aa67 75.000% 100.000%);
background: linear-gradient(180deg, oklch(44.09% 0.1213 23.20) 0.000% 25.000%, oklch(65.35% 0.1447 33.77) 25.000% 50.000%, oklch(64.17% 0.1020 226.80) 50.000% 75.000%, oklch(67.32% 0.1199 145.43) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.441 | 0.121 | 23.2 |
| 2 | 0.654 | 0.145 | 33.8 |
| 3 | 0.642 | 0.102 | -133.2 |
| 4 | 0.673 | 0.12 | -214.6 |

## In these collections

- [Split complementary swatches](https://grabient.com/split-complementary-swatches)

## Other forms

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