# Powder Navy Sand Bands

These four diagonal bands move from powder blue through deep navy, warm sand, and pale shell. The route shifts cleanly from water and shadow into two sunlit shore neutrals, giving both dark and light foreground options. Use them for coastal editorial layouts, beach lodging graphics, travel stationery, or seaside packaging that needs a classic, restrained color sequence.

- Also called: Blue, navy and beige linear swatches
- Seed: `kUqimrqRa_-IkLP5k8Dg`
- Page: https://grabient.com/kUqimrqRa_-IkLP5k8Dg?style=linearSwatches&steps=4&angle=305
- Drawn as: linear swatches, 4 steps, 305 degrees
- Kinds: dark center
- Hues: complementary
- Contrast of its darkest and lightest colors: 10.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 | `#769ab5` | `oklch(66.93% 0.0565 241.17)` | Walden Pond | black, 7 to 1 |
| 2 | `#103750` | `oklch(32.28% 0.0620 241.17)` | Gibraltar Sea | white, 12.4 to 1 |
| 3 | `#d6ae69` | `oklch(77.17% 0.0992 80.55)` | Butterscotch Bliss | black, 10.1 to 1 |
| 4 | `#fff0c9` | `oklch(95.67% 0.0528 89.01)` | Vanilla Cake | black, 18.5 to 1 |

## CSS

```css
background: linear-gradient(305deg, #769ab5 0.000% 25.000%, #103750 25.000% 50.000%, #d6ae69 50.000% 75.000%, #fff0c9 75.000% 100.000%);
background: linear-gradient(305deg, oklch(66.93% 0.0565 241.17) 0.000% 25.000%, oklch(32.28% 0.0620 241.17) 25.000% 50.000%, oklch(77.17% 0.0992 80.55) 50.000% 75.000%, oklch(95.67% 0.0528 89.01) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.669 | 0.056 | 241.2 |
| 2 | 0.323 | 0.062 | 241.2 |
| 3 | 0.772 | 0.099 | 80.5 |
| 4 | 0.957 | 0.054 | 89 |

## In these collections

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

## Other forms

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