# Gold, gray and navy coastal palette

The Gold, gray and navy coastal palette brings together light orange, orange, gray, teal, and dark blue. The colors span a broad lightness range, combining moderate color with clear contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is light orange.

- Also called: Complementary tan, gray and navy angular swatches
- Seed: `kY2EU126g_kwOv6-BMqLaDHpwbQk`
- Page: https://grabient.com/kY2EU126g_kwOv6-BMqLaDHpwbQk?style=angularSwatches&steps=6&angle=220
- Drawn as: angular swatches, 6 steps, 220 degrees
- Kinds: light to dark
- Hues: complementary
- Contrast of its darkest and lightest colors: 10.8 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 | `#f2c586` | `oklch(85.04% 0.0951 75.23)` | Pollen Grains | black, 13.1 to 1 |
| 2 | `#cf9951` | `oklch(72.05% 0.1102 72.06)` | Bales of Brown | black, 8.3 to 1 |
| 3 | `#907c66` | `oklch(59.84% 0.0400 69.95)` | Resort Tan | black, 5.2 to 1 |
| 4 | `#5a625d` | `oklch(48.82% 0.0124 159.77)` | Charcoal Briquette | white, 6.2 to 1 |
| 5 | `#004458` | `oklch(35.83% 0.0681 225.35)` | Crab Nebula | white, 10.7 to 1 |
| 6 | `#001c33` | `oklch(22.07% 0.0563 245.67)` | Oxford by Night | white, 17.2 to 1 |

## CSS

```css
background: conic-gradient(from 220deg, #f2c586 0.000% 16.667%, #cf9951 16.667% 33.333%, #907c66 33.333% 50.000%, #5a625d 50.000% 66.667%, #004458 66.667% 83.333%, #001c33 83.333% 100.000%);
background: conic-gradient(from 220deg, oklch(85.04% 0.0951 75.23) 0.000% 16.667%, oklch(72.05% 0.1102 72.06) 16.667% 33.333%, oklch(59.84% 0.0400 69.95) 33.333% 50.000%, oklch(48.82% 0.0124 159.77) 50.000% 66.667%, oklch(35.83% 0.0681 225.35) 66.667% 83.333%, oklch(22.07% 0.0563 245.67) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.85 | 0.095 | 75.2 |
| 2 | 0.72 | 0.11 | 72.1 |
| 3 | 0.598 | 0.04 | 70 |
| 4 | 0.488 | 0.012 | 159.8 |
| 5 | 0.358 | 0.09 | 225.3 |
| 6 | 0.22 | 0.074 | 245.4 |

## In these collections

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

## Other forms

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