# Crimson and yellow coral palette

The Crimson and yellow coral palette brings together red, light red, light orange, and light yellow. 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 yellow.

- Also called: Warm maroon, pink and beige linear gradient
- Seed: `kWbmsLSb6_9sxwNqG0MchHHg`
- Page: https://grabient.com/kWbmsLSb6_9sxwNqG0MchHHg?steps=5&angle=45
- Drawn as: linear gradient, 5 steps, 45 degrees
- Kinds: dark to light, vivid, warm, multicolor
- Hues: analogous
- Contrast of its darkest and lightest colors: 6.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 | `#901f35` | `oklch(43.31% 0.1474 15.47)` | Thrill Ride | white, 8.6 to 1 |
| 2 | `#cb4257` | `oklch(57.87% 0.1722 15.47)` | New Brick Red | white, 4.7 to 1 |
| 3 | `#ed7e7b` | `oklch(71.65% 0.1364 22.87)` | Meat | black, 7.8 to 1 |
| 4 | `#f2bb9e` | `oklch(83.46% 0.0744 49.28)` | Tan Temptation | black, 12.3 to 1 |
| 5 | `#dce1bd` | `oklch(89.76% 0.0482 113.75)` | Foamy Lime | black, 15.6 to 1 |

## CSS

```css
background: linear-gradient(45deg, #901f35 0.0%, #cb4257 25.0%, #ed7e7b 50.0%, #f2bb9e 75.0%, #dce1bd 100.0%);
background: linear-gradient(45deg in oklch, oklch(43.31% 0.1474 15.47) 0.0%, oklch(57.87% 0.1722 15.47) 25.0%, oklch(71.65% 0.1364 22.87) 50.0%, oklch(83.46% 0.0744 49.28) 75.0%, oklch(89.76% 0.0482 113.75) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.433 | 0.147 | 15.5 |
| 2 | 0.579 | 0.172 | 15.5 |
| 3 | 0.717 | 0.136 | 22.9 |
| 4 | 0.835 | 0.074 | 49.3 |
| 5 | 0.898 | 0.048 | 113.7 |

## In these collections

- [Coral color palette](https://grabient.com/coral-color-palette)

## Other forms

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