# Turquoise Sand Shore Bands

These four diagonal bands move from turquoise through warm sand, driftwood brown, and seafoam. The unusual water-to-shore order keeps the palette visually active while preserving familiar coastal materials. Use them for beach maps, resort branding, travel layouts, or coastal packaging that needs one saturated water accent, two grounded natural tones, and a softer aquatic finish.

- Also called: Teal and tan linear swatches
- Seed: `kUlEOW7yKxDqTPJcntDg`
- Page: https://grabient.com/kUlEOW7yKxDqTPJcntDg?style=linearSwatches&steps=4&angle=240
- Drawn as: linear swatches, 4 steps, 240 degrees
- Hues: wide
- Contrast of its darkest and lightest colors: 4.9 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 | `#22899b` | `oklch(58.27% 0.0923 211.64)` | Waikiki | black, 5.1 to 1 |
| 2 | `#f2d28c` | `oklch(87.40% 0.0951 85.89)` | Sienna Yellow | black, 14.3 to 1 |
| 3 | `#6f513b` | `oklch(46.06% 0.0524 57.35)` | Bison | white, 7.2 to 1 |
| 4 | `#61b7bd` | `oklch(72.83% 0.0841 201.07)` | Dickie Bird | black, 9 to 1 |

## CSS

```css
background: linear-gradient(240deg, #22899b 0.000% 25.000%, #f2d28c 25.000% 50.000%, #6f513b 50.000% 75.000%, #61b7bd 75.000% 100.000%);
background: linear-gradient(240deg, oklch(58.27% 0.0923 211.64) 0.000% 25.000%, oklch(87.40% 0.0951 85.89) 25.000% 50.000%, oklch(46.06% 0.0524 57.35) 50.000% 75.000%, oklch(72.83% 0.0841 201.07) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.583 | 0.092 | 211.6 |
| 2 | 0.874 | 0.095 | 85.9 |
| 3 | 0.461 | 0.052 | 57.4 |
| 4 | 0.728 | 0.084 | 201.1 |

## In these collections

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

## Other forms

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