# Coastal Blue, Library Oak

Complementary blue, gray and brown linear gradient with 32 colors: #357ba3, #3c7fa4, #4785a5, #548ba7, #6192a8, #6c99a8, #759fa7, #7da3a5, #86a7a1, #90a99d, #9aaa9a, #a2ab98, #a9aa96, #ada993, #b0a78f, #b3a488, #b69f81, #b79a79, #b79472, #b48e6d, #af8767, #a87f61, #a0775a, #977054, #8e684e, #856049, #7b5945, #6f5141, #63493d, #58423a, #4f3c36, #493834. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Complementary blue, gray and brown linear gradient
- Seed: `kYjUSpVhC8t0Ks5Wl7rwxW-y2JPe`
- Page: https://grabient.com/kYjUSpVhC8t0Ks5Wl7rwxW-y2JPe?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: light center, muted
- Hues: complementary
- Contrast of its darkest and lightest colors: 4.6 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 | `#357ba3` | `oklch(55.51% 0.0937 237.66)` | Prominent Blue | white, 4.6 to 1 |
| 2 | `#3c7fa4` | `oklch(56.86% 0.0883 235.62)` | Cendre Blue | black, 4.7 to 1 |
| 3 | `#4785a5` | `oklch(58.78% 0.0806 233.55)` | Cornwall | black, 5.1 to 1 |
| 4 | `#548ba7` | `oklch(61.04% 0.0716 230.79)` | Kuta Surf | black, 5.6 to 1 |
| 5 | `#6192a8` | `oklch(63.38% 0.0622 226.74)` | Blue Cruise | black, 6.2 to 1 |
| 6 | `#6c99a8` | `oklch(65.59% 0.0535 220.77)` | Cloudy Sea | black, 6.7 to 1 |
| 7 | `#759fa7` | `oklch(67.42% 0.0466 212.25)` | Reef Waters | black, 7.2 to 1 |
| 8 | `#7da3a5` | `oklch(68.83% 0.0414 200.00)` | Sightful | black, 7.6 to 1 |
| 9 | `#86a7a1` | `oklch(70.12% 0.0368 183.58)` | Scenario | black, 8 to 1 |
| 10 | `#90a99d` | `oklch(71.25% 0.0329 164.69)` | Green Meets Blue | black, 8.3 to 1 |
| 11 | `#9aaa9a` | `oklch(72.17% 0.0301 145.07)` | Scotland Road | black, 8.6 to 1 |
| 12 | `#a2ab98` | `oklch(72.84% 0.0285 126.49)` | Garden | black, 8.8 to 1 |
| 13 | `#a9aa96` | `oklch(73.19% 0.0285 110.70)` | Amazon Vine | black, 8.8 to 1 |
| 14 | `#ada993` | `oklch(73.20% 0.0305 98.87)` | Spartan Stone | black, 8.8 to 1 |
| 15 | `#b0a78f` | `oklch(72.92% 0.0355 89.42)` | Field Khaki | black, 8.7 to 1 |
| 16 | `#b3a488` | `oklch(72.36% 0.0424 81.76)` | Chamois Tan | black, 8.5 to 1 |
| 17 | `#b69f81` | `oklch(71.52% 0.0500 75.52)` | Craft Brown | black, 8.2 to 1 |
| 18 | `#b79a79` | `oklch(70.42% 0.0572 70.33)` | Coffee Clay | black, 7.9 to 1 |
| 19 | `#b79472` | `oklch(69.05% 0.0627 65.83)` | Painted Pony | black, 7.4 to 1 |
| 20 | `#b48e6d` | `oklch(67.41% 0.0656 61.77)` | Poncho | black, 7 to 1 |
| 21 | `#af8767` | `oklch(65.37% 0.0669 59.07)` | Chamois Leather | black, 6.4 to 1 |
| 22 | `#a87f61` | `oklch(62.98% 0.0670 57.57)` | S’mores | black, 5.8 to 1 |
| 23 | `#a0775a` | `oklch(60.37% 0.0660 56.75)` | Chamoisee | black, 5.3 to 1 |
| 24 | `#977054` | `oklch(57.63% 0.0642 56.10)` | Cavern Sand | black, 4.7 to 1 |
| 25 | `#8e684e` | `oklch(54.89% 0.0617 55.13)` | Webcap Brown | white, 4.9 to 1 |
| 26 | `#856049` | `oklch(52.23% 0.0586 53.34)` | Rawhide | white, 5.5 to 1 |
| 27 | `#7b5945` | `oklch(49.32% 0.0539 50.72)` | Burns Cave | white, 6.2 to 1 |
| 28 | `#6f5141` | `oklch(46.18% 0.0478 47.64)` | Rookwood Medium Brown | white, 7.1 to 1 |
| 29 | `#63493d` | `oklch(43.02% 0.0410 44.41)` | Choco Death | white, 8.2 to 1 |
| 30 | `#58423a` | `oklch(40.09% 0.0344 41.34)` | Lava Cake | white, 9.2 to 1 |
| 31 | `#4f3c36` | `oklch(37.61% 0.0287 38.72)` | Royal Brown | white, 10.2 to 1 |
| 32 | `#493834` | `oklch(35.83% 0.0248 36.87)` | Brown Beauty | white, 11 to 1 |

## CSS

```css
background: linear-gradient(135deg, #357ba3 0.0%, #3c7fa4 3.2%, #4785a5 6.5%, #548ba7 9.7%, #6192a8 12.9%, #6c99a8 16.1%, #759fa7 19.4%, #7da3a5 22.6%, #86a7a1 25.8%, #90a99d 29.0%, #9aaa9a 32.3%, #a2ab98 35.5%, #a9aa96 38.7%, #ada993 41.9%, #b0a78f 45.2%, #b3a488 48.4%, #b69f81 51.6%, #b79a79 54.8%, #b79472 58.1%, #b48e6d 61.3%, #af8767 64.5%, #a87f61 67.7%, #a0775a 71.0%, #977054 74.2%, #8e684e 77.4%, #856049 80.6%, #7b5945 83.9%, #6f5141 87.1%, #63493d 90.3%, #58423a 93.5%, #4f3c36 96.8%, #493834 100.0%);
background: linear-gradient(135deg in oklch, oklch(55.51% 0.0937 237.66) 0.0%, oklch(56.86% 0.0883 235.62) 3.2%, oklch(58.78% 0.0806 233.55) 6.5%, oklch(61.04% 0.0716 230.79) 9.7%, oklch(63.38% 0.0622 226.74) 12.9%, oklch(65.59% 0.0535 220.77) 16.1%, oklch(67.42% 0.0466 212.25) 19.4%, oklch(68.83% 0.0414 200.00) 22.6%, oklch(70.12% 0.0368 183.58) 25.8%, oklch(71.25% 0.0329 164.69) 29.0%, oklch(72.17% 0.0301 145.07) 32.3%, oklch(72.84% 0.0285 126.49) 35.5%, oklch(73.19% 0.0285 110.70) 38.7%, oklch(73.20% 0.0305 98.87) 41.9%, oklch(72.92% 0.0355 89.42) 45.2%, oklch(72.36% 0.0424 81.76) 48.4%, oklch(71.52% 0.0500 75.52) 51.6%, oklch(70.42% 0.0572 70.33) 54.8%, oklch(69.05% 0.0627 65.83) 58.1%, oklch(67.41% 0.0656 61.77) 61.3%, oklch(65.37% 0.0669 59.07) 64.5%, oklch(62.98% 0.0670 57.57) 67.7%, oklch(60.37% 0.0660 56.75) 71.0%, oklch(57.63% 0.0642 56.10) 74.2%, oklch(54.89% 0.0617 55.13) 77.4%, oklch(52.23% 0.0586 53.34) 80.6%, oklch(49.32% 0.0539 50.72) 83.9%, oklch(46.18% 0.0478 47.64) 87.1%, oklch(43.02% 0.0410 44.41) 90.3%, oklch(40.09% 0.0344 41.34) 93.5%, oklch(37.61% 0.0287 38.72) 96.8%, oklch(35.83% 0.0248 36.87) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.555 | 0.094 | 237.7 |
| 2 | 0.677 | 0.045 | 210.2 |
| 3 | 0.732 | 0.029 | 105.6 |
| 4 | 0.681 | 0.065 | 63.3 |
| 5 | 0.528 | 0.059 | 53.8 |
| 6 | 0.358 | 0.025 | 36.9 |

## In these collections

- [Color trends 2027 swatches](https://grabient.com/color-trends-2027-swatches)
- [Library card nostalgia](https://grabient.com/library-card-nostalgia)

## Other forms

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