# Coastal Blue Coral Orange Sand Beige

These linear swatch bands move through coastal blue, coral orange, sand beige, deep ocean blue, and pale gold 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, peach and tan linear swatches
- Seed: `kWsDCcW7AregbxM2ltC8Rwug`
- Page: https://grabient.com/kWsDCcW7AregbxM2ltC8Rwug?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 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 | `#6ca6b8` | `oklch(69.29% 0.0661 219.37)` | Blue Chiffon | black, 7.8 to 1 |
| 2 | `#e8885a` | `oklch(72.05% 0.1323 46.07)` | Indiana Clay | black, 8.1 to 1 |
| 3 | `#d9c18b` | `oklch(81.89% 0.0758 87.28)` | Honey Tea | black, 11.9 to 1 |
| 4 | `#26566b` | `oklch(42.91% 0.0620 228.89)` | Newport Grey | white, 8 to 1 |
| 5 | `#f4d6a0` | `oklch(88.98% 0.0772 82.00)` | Peach Patch | black, 15 to 1 |

## CSS

```css
background: linear-gradient(90deg, #6ca6b8 0.000% 20.000%, #e8885a 20.000% 40.000%, #d9c18b 40.000% 60.000%, #26566b 60.000% 80.000%, #f4d6a0 80.000% 100.000%);
background: linear-gradient(90deg, oklch(69.29% 0.0661 219.37) 0.000% 20.000%, oklch(72.05% 0.1323 46.07) 20.000% 40.000%, oklch(81.89% 0.0758 87.28) 40.000% 60.000%, oklch(42.91% 0.0620 228.89) 60.000% 80.000%, oklch(88.98% 0.0772 82.00) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.693 | 0.066 | 219.4 |
| 2 | 0.72 | 0.132 | 46.1 |
| 3 | 0.819 | 0.076 | 87.3 |
| 4 | 0.429 | 0.062 | 228.9 |
| 5 | 0.89 | 0.077 | 82 |

## In these collections

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

## Other forms

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