# Seamless gray, brown, black and blue linear swatches

Seamless gray, brown, black and blue linear swatches 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?style=linearSwatches&steps=34
- Drawn as: linear swatches, 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.000% 2.941%, #d0d3be 2.941% 5.882%, #d0ceaf 5.882% 8.824%, #d2c59d 8.824% 11.765%, #d2b98b 11.765% 14.706%, #ceab7a 14.706% 17.647%, #c49966 17.647% 20.588%, #b78651 20.588% 23.529%, #a6723c 23.529% 26.471%, #955e2a 26.471% 29.412%, #834c1d 29.412% 32.353%, #6c3a13 32.353% 35.294%, #542a0c 35.294% 38.235%, #401c08 38.235% 41.176%, #311008 41.176% 44.118%, #28080d 44.118% 47.059%, #1f0514 47.059% 50.000%, #17051d 50.000% 52.941%, #0e0826 52.941% 55.882%, #070f2f 55.882% 58.824%, #041a3d 58.824% 61.765%, #042952 61.765% 64.706%, #0d3a6b 64.706% 67.647%, #1b4c83 67.647% 70.588%, #285e96 70.588% 73.529%, #3c71a6 73.529% 76.471%, #5484b5 76.471% 79.412%, #6b97c2 79.412% 82.353%, #7da9cb 82.353% 85.294%, #8bb8d0 85.294% 88.235%, #9ac5cf 88.235% 91.176%, #accecd 91.176% 94.118%, #bdd4ce 94.118% 97.059%, #c9d8d1 97.059% 100.000%);
background: linear-gradient(90deg, oklch(87.01% 0.0207 120.94) 0.000% 2.941%, oklch(85.86% 0.0291 113.96) 2.941% 5.882%, oklch(84.38% 0.0413 103.81) 5.882% 8.824%, oklch(82.38% 0.0548 92.54) 8.824% 11.765%, oklch(79.65% 0.0674 82.21) 11.765% 14.706%, oklch(76.01% 0.0768 74.81) 14.706% 17.647%, oklch(71.23% 0.0848 70.22) 17.647% 20.588%, oklch(65.58% 0.0917 67.16) 20.588% 23.529%, oklch(59.48% 0.0966 64.59) 23.529% 26.471%, oklch(53.34% 0.0983 61.44) 26.471% 29.412%, oklch(47.25% 0.0954 57.51) 29.412% 32.353%, oklch(40.46% 0.0866 55.11) 32.353% 35.294%, oklch(33.57% 0.0748 52.27) 35.294% 38.235%, oklch(27.34% 0.0634 46.53) 38.235% 41.176%, oklch(22.57% 0.0557 35.40) 41.176% 44.118%, oklch(19.41% 0.0530 15.38) 44.118% 47.059%, oklch(17.26% 0.0530 346.97) 47.059% 50.000%, oklch(16.27% 0.0551 315.89) 50.000% 52.941%, oklch(16.62% 0.0590 287.87) 52.941% 55.882%, oklch(18.48% 0.0642 268.61) 55.882% 58.824%, oklch(22.44% 0.0735 258.89) 58.824% 61.765%, oklch(28.14% 0.0858 255.11) 61.765% 64.706%, oklch(34.73% 0.0978 254.40) 64.706% 67.647%, oklch(41.38% 0.1059 253.93) 67.647% 70.588%, oklch(47.43% 0.1070 251.57) 70.588% 73.529%, oklch(53.71% 0.1014 250.48) 73.529% 76.471%, oklch(60.10% 0.0917 249.91) 76.471% 79.412%, oklch(66.17% 0.0801 247.89) 79.412% 82.353%, oklch(71.51% 0.0689 242.45) 82.353% 85.294%, oklch(75.87% 0.0589 231.19) 85.294% 88.235%, oklch(79.60% 0.0475 213.80) 88.235% 91.176%, oklch(82.71% 0.0362 194.13) 91.176% 94.118%, oklch(85.18% 0.0262 176.17) 94.118% 97.059%, oklch(87.01% 0.0193 163.91) 97.059% 100.000%);
```

## 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

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

## Other forms

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