# Shell Sand Seafoam Fan

These five angular wedges move from pale shell through warm sand, driftwood brown, misty seafoam, and turquoise. The sequence separates shore materials from water colors while retaining a calm, sunwashed balance. Use them for beach resort graphics, coastal packaging, travel guides, or seaside interiors that need light backgrounds, earthy structure, and a fresh aquatic accent.

- Also called: Beige, tan, light blue and teal angular swatches
- Seed: `kW8yc_7yK_k6evf4hUvXJ7Do`
- Page: https://grabient.com/kW8yc_7yK_k6evf4hUvXJ7Do?style=angularSwatches&steps=5
- Drawn as: angular swatches, 5 steps, 90 degrees
- Kinds: dark center, pastel, light
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 3.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 | `#fff0c9` | `oklch(95.67% 0.0535 89.31)` | Vanilla Cake | black, 18.5 to 1 |
| 2 | `#f1d28c` | `oklch(87.40% 0.0951 86.13)` | Sienna Yellow | black, 14.3 to 1 |
| 3 | `#a77c4b` | `oklch(61.81% 0.0841 69.22)` | Star Anise Scent | black, 5.6 to 1 |
| 4 | `#e6f1ec` | `oklch(94.88% 0.0138 169.61)` | Egyptian White | black, 18.1 to 1 |
| 5 | `#61b7bd` | `oklch(72.83% 0.0841 201.31)` | Dickie Bird | black, 9 to 1 |

## CSS

```css
background: conic-gradient(from 90deg, #fff0c9 0.000% 20.000%, #f1d28c 20.000% 40.000%, #a77c4b 40.000% 60.000%, #e6f1ec 60.000% 80.000%, #61b7bd 80.000% 100.000%);
background: conic-gradient(from 90deg, oklch(95.67% 0.0535 89.31) 0.000% 20.000%, oklch(87.40% 0.0951 86.13) 20.000% 40.000%, oklch(61.81% 0.0841 69.22) 40.000% 60.000%, oklch(94.88% 0.0138 169.61) 60.000% 80.000%, oklch(72.83% 0.0841 201.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.957 | 0.054 | 89.3 |
| 2 | 0.874 | 0.095 | 86.1 |
| 3 | 0.618 | 0.084 | 69.2 |
| 4 | 0.949 | 0.014 | 169.6 |
| 5 | 0.728 | 0.084 | 201.3 |

## In these collections

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

## Other forms

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