# Deep Ocean Blue Pale Gold Coastal Blue

These linear swatch bands move through deep ocean blue, pale gold, coastal blue, coral orange, and sand beige 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: Blue, tan and peach linear swatches
- Seed: `kWbS2j8RwulgYUBbsCt6BvEw`
- Page: https://grabient.com/kWbS2j8RwulgYUBbsCt6BvEw?style=linearSwatches&steps=5&angle=180
- Drawn as: linear swatches, 5 steps, 180 degrees
- Kinds: pastel, multicolor
- Hues: two-hue
- 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 | `#27566b` | `oklch(42.91% 0.0620 229.92)` | Newport Grey | white, 8 to 1 |
| 2 | `#f4d7a0` | `oklch(88.98% 0.0772 83.03)` | Splash | black, 15 to 1 |
| 3 | `#6ca6b8` | `oklch(69.29% 0.0661 219.35)` | Blue Chiffon | black, 7.8 to 1 |
| 4 | `#e8885a` | `oklch(72.05% 0.1323 46.05)` | Indiana Clay | black, 8.1 to 1 |
| 5 | `#d9c18b` | `oklch(81.89% 0.0758 87.26)` | Honey Tea | black, 11.9 to 1 |

## CSS

```css
background: linear-gradient(180deg, #27566b 0.000% 20.000%, #f4d7a0 20.000% 40.000%, #6ca6b8 40.000% 60.000%, #e8885a 60.000% 80.000%, #d9c18b 80.000% 100.000%);
background: linear-gradient(180deg, oklch(42.91% 0.0620 229.92) 0.000% 20.000%, oklch(88.98% 0.0772 83.03) 20.000% 40.000%, oklch(69.29% 0.0661 219.35) 40.000% 60.000%, oklch(72.05% 0.1323 46.05) 60.000% 80.000%, oklch(81.89% 0.0758 87.26) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.429 | 0.062 | 229.9 |
| 2 | 0.89 | 0.077 | 83 |
| 3 | 0.693 | 0.066 | 219.4 |
| 4 | 0.72 | 0.132 | 46 |
| 5 | 0.819 | 0.076 | 87.3 |

## In these collections

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

## Other forms

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