# Coral color palette

The Coral color palette brings together red and light red. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits brand mood boards and editorial graphics. Its darkest tone is red, and its lightest tone is light red.

- Also called: Vivid analogous pink and red angular swatches
- Seed: `kWr20NxcfACgnvw9vkCa5a_I`
- Page: https://grabient.com/kWr20NxcfACgnvw9vkCa5a_I?style=angularSwatches&steps=5&angle=315
- Drawn as: angular swatches, 5 steps, 315 degrees
- Kinds: dark center, vivid, warm
- Hues: analogous
- Contrast of its darkest and lightest colors: 8.2 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 | `#e97075` | `oklch(68.90% 0.1502 18.98)` | Pastrami | black, 7 to 1 |
| 2 | `#ca263d` | `oklch(54.72% 0.1970 20.04)` | Sovereign Red | white, 5.4 to 1 |
| 3 | `#5c0f22` | `oklch(31.50% 0.1089 12.64)` | Chocolate Cosmos | white, 13.5 to 1 |
| 4 | `#aa2138` | `oklch(48.43% 0.1709 17.93)` | Scarlet Sage | white, 7 to 1 |
| 5 | `#f2bdc2` | `oklch(84.65% 0.0620 11.59)` | Petals Unfolding | black, 12.8 to 1 |

## CSS

```css
background: conic-gradient(from 315deg, #e97075 0.000% 20.000%, #ca263d 20.000% 40.000%, #5c0f22 40.000% 60.000%, #aa2138 60.000% 80.000%, #f2bdc2 80.000% 100.000%);
background: conic-gradient(from 315deg, oklch(68.90% 0.1502 18.98) 0.000% 20.000%, oklch(54.72% 0.1970 20.04) 20.000% 40.000%, oklch(31.50% 0.1089 12.64) 40.000% 60.000%, oklch(48.43% 0.1709 17.93) 60.000% 80.000%, oklch(84.65% 0.0620 11.59) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.689 | 0.15 | 19 |
| 2 | 0.547 | 0.197 | 20 |
| 3 | 0.315 | 0.109 | 12.6 |
| 4 | 0.484 | 0.171 | 17.9 |
| 5 | 0.846 | 0.062 | 11.6 |

## In these collections

- [Warm swatches](https://grabient.com/warm-swatches)
- [Tint swatches](https://grabient.com/tint-swatches)
- [Monochromatic swatches](https://grabient.com/monochromatic-swatches)
- [Red swatches](https://grabient.com/red-swatches)

## Other forms

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