# Complementary blue, gray and brown linear gradient

Complementary blue, gray and brown linear gradient with 32 colors: #1c317b, #1f3782, #233f8c, #284897, #2e53a2, #355dab, #3e68b4, #4974bb, #5580c2, #618bc6, #7494c9, #879dc9, #96a7c8, #9fb0c7, #a5bac5, #aec1c0, #bcc5bc, #c8c7bb, #d1c8bb, #d9c8b5, #e0c6aa, #e4c39c, #e5c08f, #e5ba85, #e3b47b, #deac71, #d8a467, #d09b5d, #c59052, #b98448, #ad7a3e, #a67237. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kcWF2-PDE_c-lv1gjL8agcsWkcvreJL9y6Q_o`
- Page: https://grabient.com/kcWF2-PDE_c-lv1gjL8agcsWkcvreJL9y6Q_o?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: light center
- Hues: complementary
- Contrast of its darkest and lightest colors: 7.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 | `#1c317b` | `oklch(34.65% 0.1281 267.19)` | Twilight Express | white, 11.8 to 1 |
| 2 | `#1f3782` | `oklch(36.58% 0.1300 266.54)` | Surf the Web | white, 10.9 to 1 |
| 3 | `#233f8c` | `oklch(39.33% 0.1330 265.62)` | Blue Oblivion | white, 9.7 to 1 |
| 4 | `#284897` | `oklch(42.53% 0.1354 264.55)` | Cascade Twilight | white, 8.4 to 1 |
| 5 | `#2e53a2` | `oklch(45.86% 0.1359 263.43)` | Dazzling Blue | white, 7.3 to 1 |
| 6 | `#355dab` | `oklch(49.10% 0.1331 262.35)` | Adventure of the Seas | white, 6.3 to 1 |
| 7 | `#3e68b4` | `oklch(52.57% 0.1282 261.25)` | Dover Straits | white, 5.4 to 1 |
| 8 | `#4974bb` | `oklch(56.16% 0.1212 260.10)` | Sinatra | white, 4.6 to 1 |
| 9 | `#5580c2` | `oklch(59.71% 0.1124 258.85)` | Sea Note | black, 5.2 to 1 |
| 10 | `#618bc6` | `oklch(63.06% 0.1017 257.55)` | Provence | black, 6 to 1 |
| 11 | `#7494c9` | `oklch(66.34% 0.0869 259.83)` | Cool Touch | black, 6.8 to 1 |
| 12 | `#879dc9` | `oklch(69.56% 0.0692 263.81)` | Caribbean Sky | black, 7.7 to 1 |
| 13 | `#96a7c8` | `oklch(72.59% 0.0516 264.08)` | Finesse | black, 8.6 to 1 |
| 14 | `#9fb0c7` | `oklch(75.29% 0.0374 255.24)` | Aerial View | black, 9.5 to 1 |
| 15 | `#a5bac5` | `oklch(77.62% 0.0281 230.82)` | Overcast Sky | black, 10.4 to 1 |
| 16 | `#aec1c0` | `oklch(79.69% 0.0213 190.45)` | Sea Glass | black, 11.2 to 1 |
| 17 | `#bcc5bc` | `oklch(81.44% 0.0173 144.58)` | Three Wishes | black, 11.8 to 1 |
| 18 | `#c8c7bb` | `oklch(82.79% 0.0169 104.05)` | Ghosting | black, 12.3 to 1 |
| 19 | `#d1c8bb` | `oklch(83.66% 0.0211 79.29)` | Fossil Sand | black, 12.6 to 1 |
| 20 | `#d9c8b5` | `oklch(84.08% 0.0322 69.75)` | Clay Pipe | black, 12.8 to 1 |
| 21 | `#e0c6aa` | `oklch(84.07% 0.0478 69.12)` | Larb Gai | black, 12.8 to 1 |
| 22 | `#e4c39c` | `oklch(83.64% 0.0641 72.24)` | Dapper Dingo | black, 12.6 to 1 |
| 23 | `#e5c08f` | `oklch(82.83% 0.0772 73.97)` | Dark Yellow | black, 12.2 to 1 |
| 24 | `#e5ba85` | `oklch(81.59% 0.0855 72.55)` | Cane Sugar | black, 11.7 to 1 |
| 25 | `#e3b47b` | `oklch(79.90% 0.0916 71.47)` | High Plateau | black, 11 to 1 |
| 26 | `#deac71` | `oklch(77.85% 0.0960 70.66)` | Corn Maze | black, 10.2 to 1 |
| 27 | `#d8a467` | `oklch(75.48% 0.0992 69.97)` | Amber Brew | black, 9.4 to 1 |
| 28 | `#d09b5d` | `oklch(72.78% 0.1014 69.28)` | Butternut Tree | black, 8.5 to 1 |
| 29 | `#c59052` | `oklch(69.24% 0.1018 68.66)` | Twine | black, 7.4 to 1 |
| 30 | `#b98448` | `oklch(65.37% 0.1011 68.15)` | Arrakis Spice | black, 6.4 to 1 |
| 31 | `#ad7a3e` | `oklch(61.87% 0.0999 67.75)` | Durian | black, 5.6 to 1 |
| 32 | `#a67237` | `oklch(59.45% 0.0992 67.46)` | Digger’s Gold | black, 5 to 1 |

## CSS

```css
background: linear-gradient(135deg, #1c317b 0.0%, #1f3782 3.2%, #233f8c 6.5%, #284897 9.7%, #2e53a2 12.9%, #355dab 16.1%, #3e68b4 19.4%, #4974bb 22.6%, #5580c2 25.8%, #618bc6 29.0%, #7494c9 32.3%, #879dc9 35.5%, #96a7c8 38.7%, #9fb0c7 41.9%, #a5bac5 45.2%, #aec1c0 48.4%, #bcc5bc 51.6%, #c8c7bb 54.8%, #d1c8bb 58.1%, #d9c8b5 61.3%, #e0c6aa 64.5%, #e4c39c 67.7%, #e5c08f 71.0%, #e5ba85 74.2%, #e3b47b 77.4%, #deac71 80.6%, #d8a467 83.9%, #d09b5d 87.1%, #c59052 90.3%, #b98448 93.5%, #ad7a3e 96.8%, #a67237 100.0%);
background: linear-gradient(135deg in oklch, oklch(34.65% 0.1281 267.19) 0.0%, oklch(36.58% 0.1300 266.54) 3.2%, oklch(39.33% 0.1330 265.62) 6.5%, oklch(42.53% 0.1354 264.55) 9.7%, oklch(45.86% 0.1359 263.43) 12.9%, oklch(49.10% 0.1331 262.35) 16.1%, oklch(52.57% 0.1282 261.25) 19.4%, oklch(56.16% 0.1212 260.10) 22.6%, oklch(59.71% 0.1124 258.85) 25.8%, oklch(63.06% 0.1017 257.55) 29.0%, oklch(66.34% 0.0869 259.83) 32.3%, oklch(69.56% 0.0692 263.81) 35.5%, oklch(72.59% 0.0516 264.08) 38.7%, oklch(75.29% 0.0374 255.24) 41.9%, oklch(77.62% 0.0281 230.82) 45.2%, oklch(79.69% 0.0213 190.45) 48.4%, oklch(81.44% 0.0173 144.58) 51.6%, oklch(82.79% 0.0169 104.05) 54.8%, oklch(83.66% 0.0211 79.29) 58.1%, oklch(84.08% 0.0322 69.75) 61.3%, oklch(84.07% 0.0478 69.12) 64.5%, oklch(83.64% 0.0641 72.24) 67.7%, oklch(82.83% 0.0772 73.97) 71.0%, oklch(81.59% 0.0855 72.55) 74.2%, oklch(79.90% 0.0916 71.47) 77.4%, oklch(77.85% 0.0960 70.66) 80.6%, oklch(75.48% 0.0992 69.97) 83.9%, oklch(72.78% 0.1014 69.28) 87.1%, oklch(69.24% 0.1018 68.66) 90.3%, oklch(65.37% 0.1011 68.15) 93.5%, oklch(61.87% 0.0999 67.75) 96.8%, oklch(59.45% 0.0992 67.46) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.346 | 0.128 | 267.2 |
| 2 | 0.472 | 0.135 | 263 |
| 3 | 0.626 | 0.103 | 257.7 |
| 4 | 0.76 | 0.034 | 250.3 |
| 5 | 0.835 | 0.019 | 84.4 |
| 6 | 0.827 | 0.079 | 73.8 |
| 7 | 0.74 | 0.101 | 69.6 |
| 8 | 0.594 | 0.099 | 67.5 |

## In these collections

- [Runway flash photography](https://grabient.com/runway-flash-photography)

## Other forms

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