# Driftwood and Harbor Blue

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

- Also called: Brown, tan and navy linear swatches
- Seed: `kUcykwVxnBcYkUqqn8Ig`
- Page: https://grabient.com/kUcykwVxnBcYkUqqn8Ig?style=linearSwatches&steps=4&angle=0
- Drawn as: linear swatches, 4 steps, 0 degrees
- Kinds: light center
- Hues: complementary
- Contrast of its darkest and lightest colors: 4.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 | `#6b5033` | `oklch(45.28% 0.0565 67.50)` | Cowboy Boots | white, 7.4 to 1 |
| 2 | `#b19567` | `oklch(68.50% 0.0703 80.18)` | Tangled Twine | black, 7.3 to 1 |
| 3 | `#3079a5` | `oklch(55.12% 0.0992 238.69)` | Taiwan Blue Magpie | white, 4.7 to 1 |
| 4 | `#173662` | `oklch(33.46% 0.0868 257.72)` | Navy Trim | white, 12 to 1 |

## CSS

```css
background: linear-gradient(0deg, #6b5033 0.000% 25.000%, #b19567 25.000% 50.000%, #3079a5 50.000% 75.000%, #173662 75.000% 100.000%);
background: linear-gradient(0deg, oklch(45.28% 0.0565 67.50) 0.000% 25.000%, oklch(68.50% 0.0703 80.18) 25.000% 50.000%, oklch(55.12% 0.0992 238.69) 50.000% 75.000%, oklch(33.46% 0.0868 257.72) 75.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.453 | 0.056 | 67.5 |
| 2 | 0.685 | 0.07 | 80.2 |
| 3 | 0.551 | 0.099 | 238.7 |
| 4 | 0.335 | 0.087 | 257.7 |

## In these collections

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

## Other forms

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