# Seamless gray, brown, black and blue linear gradient

Seamless gray, brown, black and blue linear gradient with 34 colors: #d2d7c8, #d0d3be, #d0ceaf, #d2c59d, #d2b98b, #ceab7a, #c49966, #b78651, #a6723c, #955e2a, #834c1d, #6c3a13, #542a0c, #401c08, #311008, #28080d, #1f0514, #17051d, #0e0826, #070f2f, #041a3d, #042952, #0d3a6b, #1b4c83, #285e96, #3c71a6, #5484b5, #6b97c2, #7da9cb, #8bb8d0, #9ac5cf, #accecd, #bdd4ce, #c9d8d1. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kc3Q9WYhs6sCjvecFDzFxcxbknPdcmD57oc24`
- Page: https://grabient.com/kc3Q9WYhs6sCjvecFDzFxcxbknPdcmD57oc24?steps=34
- Drawn as: linear gradient, 34 steps, 90 degrees
- Kinds: dark center, seamless
- Hues: complementary
- Contrast of its darkest and lightest colors: 13.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 | `#d2d7c8` | `oklch(87.01% 0.0207 120.94)` | September Song | black, 14.2 to 1 |
| 2 | `#d0d3be` | `oklch(85.86% 0.0291 113.96)` | Soft Kind | black, 13.7 to 1 |
| 3 | `#d0ceaf` | `oklch(84.38% 0.0413 103.81)` | Longbeard Grey | black, 13 to 1 |
| 4 | `#d2c59d` | `oklch(82.38% 0.0548 92.54)` | Champagne Beige | black, 12.2 to 1 |
| 5 | `#d2b98b` | `oklch(79.65% 0.0674 82.21)` | Buckskin | black, 11 to 1 |
| 6 | `#ceab7a` | `oklch(76.01% 0.0768 74.81)` | Golden Age | black, 9.6 to 1 |
| 7 | `#c49966` | `oklch(71.23% 0.0848 70.22)` | Chalet | black, 8.1 to 1 |
| 8 | `#b78651` | `oklch(65.58% 0.0917 67.16)` | Sand Mountain | black, 6.5 to 1 |
| 9 | `#a6723c` | `oklch(59.48% 0.0966 64.59)` | Splinter | black, 5 to 1 |
| 10 | `#955e2a` | `oklch(53.34% 0.0983 61.44)` | Chilli Con Carne | white, 5.3 to 1 |
| 11 | `#834c1d` | `oklch(47.25% 0.0954 57.51)` | Milk Chocolate | white, 6.9 to 1 |
| 12 | `#6c3a13` | `oklch(40.46% 0.0866 55.11)` | Philippine Bronze | white, 9.2 to 1 |
| 13 | `#542a0c` | `oklch(33.57% 0.0748 52.27)` | Fudge Brownie | white, 12.2 to 1 |
| 14 | `#401c08` | `oklch(27.34% 0.0634 46.53)` | Bath in Chocolate | white, 15.1 to 1 |
| 15 | `#311008` | `oklch(22.57% 0.0557 35.40)` | Black Rooster | white, 17.3 to 1 |
| 16 | `#28080d` | `oklch(19.41% 0.0530 15.38)` | Sepia Black | white, 18.5 to 1 |
| 17 | `#1f0514` | `oklch(17.26% 0.0530 346.97)` | Crow | white, 19.2 to 1 |
| 18 | `#17051d` | `oklch(16.27% 0.0551 315.89)` | Election Night | white, 19.5 to 1 |
| 19 | `#0e0826` | `oklch(16.62% 0.0590 287.87)` | Mysterious Depths | white, 19.3 to 1 |
| 20 | `#070f2f` | `oklch(18.48% 0.0642 268.61)` | Squid’s Ink | white, 18.7 to 1 |
| 21 | `#041a3d` | `oklch(22.44% 0.0735 258.89)` | Maastricht Blue | white, 17.2 to 1 |
| 22 | `#042952` | `oklch(28.14% 0.0858 255.11)` | Dark Tyrian Blue | white, 14.6 to 1 |
| 23 | `#0d3a6b` | `oklch(34.73% 0.0978 254.40)` | Ateneo Blue | white, 11.4 to 1 |
| 24 | `#1b4c83` | `oklch(41.38% 0.1059 253.93)` | Classic Blue | white, 8.7 to 1 |
| 25 | `#285e96` | `oklch(47.43% 0.1070 251.57)` | Lapis Lazuli Blue | white, 6.6 to 1 |
| 26 | `#3c71a6` | `oklch(53.71% 0.1014 250.48)` | Flat Blue | white, 5.1 to 1 |
| 27 | `#5484b5` | `oklch(60.10% 0.0917 249.91)` | Hideout | black, 5.3 to 1 |
| 28 | `#6b97c2` | `oklch(66.17% 0.0801 247.89)` | Windstorm | black, 6.8 to 1 |
| 29 | `#7da9cb` | `oklch(71.51% 0.0689 242.45)` | Mirror Lake | black, 8.3 to 1 |
| 30 | `#8bb8d0` | `oklch(75.87% 0.0589 231.19)` | Mountain Main | black, 9.8 to 1 |
| 31 | `#9ac5cf` | `oklch(79.60% 0.0475 213.80)` | Alluring Blue | black, 11.2 to 1 |
| 32 | `#accecd` | `oklch(82.71% 0.0362 194.13)` | Baroque Chalk Soft Blue | black, 12.4 to 1 |
| 33 | `#bdd4ce` | `oklch(85.18% 0.0262 176.17)` | Quaver | black, 13.5 to 1 |
| 34 | `#c9d8d1` | `oklch(87.01% 0.0193 163.91)` | Soft Haze | black, 14.2 to 1 |

## CSS

```css
background: linear-gradient(90deg, #d2d7c8 0.0%, #d0d3be 3.0%, #d0ceaf 6.1%, #d2c59d 9.1%, #d2b98b 12.1%, #ceab7a 15.2%, #c49966 18.2%, #b78651 21.2%, #a6723c 24.2%, #955e2a 27.3%, #834c1d 30.3%, #6c3a13 33.3%, #542a0c 36.4%, #401c08 39.4%, #311008 42.4%, #28080d 45.5%, #1f0514 48.5%, #17051d 51.5%, #0e0826 54.5%, #070f2f 57.6%, #041a3d 60.6%, #042952 63.6%, #0d3a6b 66.7%, #1b4c83 69.7%, #285e96 72.7%, #3c71a6 75.8%, #5484b5 78.8%, #6b97c2 81.8%, #7da9cb 84.8%, #8bb8d0 87.9%, #9ac5cf 90.9%, #accecd 93.9%, #bdd4ce 97.0%, #c9d8d1 100.0%);
background: linear-gradient(90deg in oklch, oklch(87.01% 0.0207 120.94) 0.0%, oklch(85.86% 0.0291 113.96) 3.0%, oklch(84.38% 0.0413 103.81) 6.1%, oklch(82.38% 0.0548 92.54) 9.1%, oklch(79.65% 0.0674 82.21) 12.1%, oklch(76.01% 0.0768 74.81) 15.2%, oklch(71.23% 0.0848 70.22) 18.2%, oklch(65.58% 0.0917 67.16) 21.2%, oklch(59.48% 0.0966 64.59) 24.2%, oklch(53.34% 0.0983 61.44) 27.3%, oklch(47.25% 0.0954 57.51) 30.3%, oklch(40.46% 0.0866 55.11) 33.3%, oklch(33.57% 0.0748 52.27) 36.4%, oklch(27.34% 0.0634 46.53) 39.4%, oklch(22.57% 0.0557 35.40) 42.4%, oklch(19.41% 0.0530 15.38) 45.5%, oklch(17.26% 0.0530 346.97) 48.5%, oklch(16.27% 0.0551 315.89) 51.5%, oklch(16.62% 0.0590 287.87) 54.5%, oklch(18.48% 0.0642 268.61) 57.6%, oklch(22.44% 0.0735 258.89) 60.6%, oklch(28.14% 0.0858 255.11) 63.6%, oklch(34.73% 0.0978 254.40) 66.7%, oklch(41.38% 0.1059 253.93) 69.7%, oklch(47.43% 0.1070 251.57) 72.7%, oklch(53.71% 0.1014 250.48) 75.8%, oklch(60.10% 0.0917 249.91) 78.8%, oklch(66.17% 0.0801 247.89) 81.8%, oklch(71.51% 0.0689 242.45) 84.8%, oklch(75.87% 0.0589 231.19) 87.9%, oklch(79.60% 0.0475 213.80) 90.9%, oklch(82.71% 0.0362 194.13) 93.9%, oklch(85.18% 0.0262 176.17) 97.0%, oklch(87.01% 0.0193 163.91) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.87 | 0.021 | 120.9 |
| 2 | 0.772 | 0.074 | 76.6 |
| 3 | 0.508 | 0.098 | 59.6 |
| 4 | 0.22 | 0.055 | 33.2 |
| 5 | 0.181 | 0.063 | -89.4 |
| 6 | 0.449 | 0.107 | -107.3 |
| 7 | 0.728 | 0.066 | -120 |
| 8 | 0.87 | 0.019 | -196.1 |

## In these collections

- [Navy and gold](https://grabient.com/navy-and-gold)
- [Muted rainbow gradients](https://grabient.com/muted-rainbow-gradients)

## Other forms

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