# Sea Glass Shoreline

Blue, tan, green and navy linear swatches with 5 colors: #7898b5, #2f9c9f, #f2d29a, #a7d8b8, #113b4a. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Blue, tan, green and navy linear swatches
- Seed: `kWqSmwUKK6G-dMjqmMjKhNIA`
- Page: https://grabient.com/kWqSmwUKK6G-dMjqmMjKhNIA?style=linearSwatches&steps=5&angle=225
- Drawn as: linear swatches, 5 steps, 225 degrees
- Kinds: light center, multicolor
- Hues: wide
- Contrast of its darkest and lightest colors: 8.2 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 | `#7898b5` | `oklch(66.54% 0.0565 247.50)` | Splendid Blue | black, 6.9 to 1 |
| 2 | `#2f9c9f` | `oklch(63.39% 0.0951 197.83)` | Empress Envy | black, 6.3 to 1 |
| 3 | `#f2d29a` | `oklch(87.80% 0.0799 81.59)` | Sunbeam Yellow | black, 14.4 to 1 |
| 4 | `#a7d8b8` | `oklch(83.86% 0.0675 156.62)` | Shanghai Jade | black, 13.1 to 1 |
| 5 | `#113b4a` | `oklch(33.07% 0.0524 225.31)` | Subterranean River | white, 12 to 1 |

## CSS

```css
background: linear-gradient(225deg, #7898b5 0.000% 20.000%, #2f9c9f 20.000% 40.000%, #f2d29a 40.000% 60.000%, #a7d8b8 60.000% 80.000%, #113b4a 80.000% 100.000%);
background: linear-gradient(225deg, oklch(66.54% 0.0565 247.50) 0.000% 20.000%, oklch(63.39% 0.0951 197.83) 20.000% 40.000%, oklch(87.80% 0.0799 81.59) 40.000% 60.000%, oklch(83.86% 0.0675 156.62) 60.000% 80.000%, oklch(33.07% 0.0524 225.31) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.665 | 0.056 | 247.5 |
| 2 | 0.634 | 0.095 | 197.8 |
| 3 | 0.878 | 0.08 | 81.6 |
| 4 | 0.839 | 0.068 | 156.6 |
| 5 | 0.331 | 0.052 | 225.3 |

## In these collections

- [Coastal rockpool spring](https://grabient.com/coastal-rockpool-spring)

## Other forms

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