# Sand Beige Deep Ocean Blue Pale Gold

These angular swatch wedges move through sand beige, deep ocean blue, pale gold, coastal blue, and coral orange in its saved order. The complete composition keeps the lighter and darker areas distinct while preserving a balanced route through the named palette.

- Also called: Tritone tan, blue and peach angular swatches
- Seed: `kW0Dc-tpbQvEcLpYGFAW7ArY`
- Page: https://grabient.com/kW0Dc-tpbQvEcLpYGFAW7ArY?style=angularSwatches&steps=5&angle=225
- Drawn as: angular swatches, 5 steps, 225 degrees
- Kinds: multicolor
- Hues: wide
- Contrast of its darkest and lightest colors: 5.7 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 | `#d8c28b` | `oklch(81.89% 0.0758 87.89)` | Honey Tea | black, 11.9 to 1 |
| 2 | `#26566b` | `oklch(42.91% 0.0620 229.50)` | Newport Grey | white, 8 to 1 |
| 3 | `#f4d7a0` | `oklch(88.98% 0.0772 82.61)` | Splash | black, 15 to 1 |
| 4 | `#6ca6b8` | `oklch(69.29% 0.0661 218.93)` | Blue Chiffon | black, 7.8 to 1 |
| 5 | `#e8885a` | `oklch(72.05% 0.1323 45.62)` | Indiana Clay | black, 8.1 to 1 |

## CSS

```css
background: conic-gradient(from 225deg, #d8c28b 0.000% 20.000%, #26566b 20.000% 40.000%, #f4d7a0 40.000% 60.000%, #6ca6b8 60.000% 80.000%, #e8885a 80.000% 100.000%);
background: conic-gradient(from 225deg, oklch(81.89% 0.0758 87.89) 0.000% 20.000%, oklch(42.91% 0.0620 229.50) 20.000% 40.000%, oklch(88.98% 0.0772 82.61) 40.000% 60.000%, oklch(69.29% 0.0661 218.93) 60.000% 80.000%, oklch(72.05% 0.1323 45.62) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.819 | 0.076 | 87.9 |
| 2 | 0.429 | 0.062 | 229.5 |
| 3 | 0.89 | 0.077 | 82.6 |
| 4 | 0.693 | 0.066 | 218.9 |
| 5 | 0.72 | 0.132 | 45.6 |

## In these collections

- [Beach swatches](https://grabient.com/beach-swatches)

## Other forms

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