# Coral and ochre happy palette

The Coral and ochre happy palette brings together red, orange, yellow, and pale yellow. The colors span a moderate lightness range, combining strong color with gentle contrast. Its light and open character suits brand mood boards and editorial graphics. Its darkest tone is orange, and its lightest tone is pale yellow.

- Also called: Salmon, yellow and off-white angular swatches
- Seed: `kUvHsSWUVDPAvRR6CT_g`
- Page: https://grabient.com/kUvHsSWUVDPAvRR6CT_g?style=angularSwatches&steps=4&angle=180
- Drawn as: angular swatches, 4 steps, 180 degrees
- Kinds: vivid, warm, multicolor
- Hues: analogous
- Contrast of its darkest and lightest colors: 2.5 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 | `#ff7e76` | `oklch(74.01% 0.1582 25.31)` | Salmon Sashimi | black, 8.5 to 1 |
| 2 | `#f17800` | `oklch(70.08% 0.1784 52.77)` | Mee-hua Sunset | black, 7.4 to 1 |
| 3 | `#f1d86d` | `oklch(88.19% 0.1295 96.11)` | Mocha Dandelion | black, 14.7 to 1 |
| 4 | `#f7f2e0` | `oklch(96.06% 0.0248 96.11)` | Alhambra Cream | black, 18.7 to 1 |

## CSS

```css
background: conic-gradient(from 180deg, #ff7e76 0.000% 25.000%, #f17800 25.000% 50.000%, #f1d86d 50.000% 75.000%, #f7f2e0 75.000% 100.000%);
background: conic-gradient(from 180deg, oklch(74.01% 0.1582 25.31) 0.000% 25.000%, oklch(70.08% 0.1784 52.77) 25.000% 50.000%, oklch(88.19% 0.1295 96.11) 50.000% 75.000%, oklch(96.06% 0.0248 96.11) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.74 | 0.169 | 25.3 |
| 2 | 0.701 | 0.19 | 52.8 |
| 3 | 0.882 | 0.13 | 96.1 |
| 4 | 0.961 | 0.025 | 96.1 |

## In these collections

- [Happy swatches](https://grabient.com/happy-swatches)

## Other forms

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