# Blue and black linear gradient

Blue and black linear gradient with 32 colors: #496da1, #2c6589, #085564, #06403b, #11291a, #101607, #0d0a02, #0d0802, #140903, #200d08, #2e1415, #3a1b24, #422233, #41263c, #3b283d, #342939, #2e2933, #2b292f, #2d2c30, #343439, #3f4450, #475b6f, #4a788f, #4594a9, #3dabba, #38b6c5, #3cb3ce, #4ea5d1, #6390c9, #727bb6, #796aa0, #7b6190. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYh0O3EgesqcUMongrl2qc2cQczA`
- Page: https://grabient.com/kYh0O3EgesqcUMongrl2qc2cQczA?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: dark center, dark
- Hues: wide
- Contrast of its darkest and lightest colors: 8.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 | `#496da1` | `oklch(53.15% 0.0923 257.34)` | San Marino | white, 5.2 to 1 |
| 2 | `#2c6589` | `oklch(48.47% 0.0837 239.79)` | Drake’s Neck | white, 6.3 to 1 |
| 3 | `#085564` | `oklch(41.50% 0.0708 215.14)` | Rainy Morning | white, 8.4 to 1 |
| 4 | `#06403b` | `oklch(33.45% 0.0559 186.09)` | Botanical Night | white, 11.6 to 1 |
| 5 | `#11291a` | `oklch(25.49% 0.0412 155.29)` | Deep Slate Olive | white, 15.5 to 1 |
| 6 | `#101607` | `oklch(18.81% 0.0289 125.43)` | Pinch of Pepper | white, 18.4 to 1 |
| 7 | `#0d0a02` | `oklch(14.61% 0.0214 99.19)` | Blackout | white, 19.7 to 1 |
| 8 | `#0d0802` | `oklch(13.71% 0.0205 77.16)` | Blackout | white, 19.9 to 1 |
| 9 | `#140903` | `oklch(15.40% 0.0254 56.41)` | Asphalt | white, 19.6 to 1 |
| 10 | `#200d08` | `oklch(18.77% 0.0336 36.92)` | Bighorn Sheep | white, 18.6 to 1 |
| 11 | `#2e1415` | `oklch(22.93% 0.0429 18.80)` | Dark Danger | white, 17.1 to 1 |
| 12 | `#3a1b24` | `oklch(26.97% 0.0508 2.15)` | Bruised Plum | white, 15.3 to 1 |
| 13 | `#422233` | `oklch(29.99% 0.0550 347.09)` | Soft Red | white, 13.9 to 1 |
| 14 | `#41263c` | `oklch(31.22% 0.0531 334.03)` | Profound Mauve | white, 13.3 to 1 |
| 15 | `#3b283d` | `oklch(30.97% 0.0449 323.85)` | Spinel Violet | white, 13.4 to 1 |
| 16 | `#342939` | `oklch(29.98% 0.0331 315.67)` | Obsidian Red | white, 13.8 to 1 |
| 17 | `#2e2933` | `oklch(28.95% 0.0208 308.45)` | Black Safflower | white, 14.2 to 1 |
| 18 | `#2b292f` | `oklch(28.58% 0.0108 301.13)` | Jaguar | white, 14.3 to 1 |
| 19 | `#2d2c30` | `oklch(29.56% 0.0060 292.65)` | Caviar | white, 13.8 to 1 |
| 20 | `#343439` | `oklch(32.68% 0.0094 281.76)` | Dark Kettle Black | white, 12.3 to 1 |
| 21 | `#3f4450` | `oklch(38.62% 0.0221 266.55)` | Dark Crypt | white, 9.7 to 1 |
| 22 | `#475b6f` | `oklch(46.41% 0.0410 248.94)` | Motor City Blue | white, 6.9 to 1 |
| 23 | `#4a788f` | `oklch(54.83% 0.0625 231.54)` | Moody Teal | white, 4.8 to 1 |
| 24 | `#4594a9` | `oklch(62.64% 0.0833 216.98)` | Alpine Lake | black, 6 to 1 |
| 25 | `#3dabba` | `oklch(68.62% 0.0998 207.87)` | Explore Blue | black, 7.7 to 1 |
| 26 | `#38b6c5` | `oklch(71.55% 0.1085 206.86)` | Utopia Beckons | black, 8.6 to 1 |
| 27 | `#3cb3ce` | `oklch(71.21% 0.1096 216.15)` | Santorini | black, 8.5 to 1 |
| 28 | `#4ea5d1` | `oklch(68.53% 0.1056 233.30)` | Mystic Blue | black, 7.5 to 1 |
| 29 | `#6390c9` | `oklch(64.47% 0.0985 254.73)` | Cobalt Glow | black, 6.3 to 1 |
| 30 | `#727bb6` | `oklch(59.99% 0.0903 276.85)` | Ontario Violet | black, 5.2 to 1 |
| 31 | `#796aa0` | `oklch(56.03% 0.0830 296.06)` | Reign Over Me | white, 4.7 to 1 |
| 32 | `#7b6190` | `oklch(53.54% 0.0785 308.77)` | Super Violet | white, 5.3 to 1 |

## CSS

```css
background: linear-gradient(135deg, #496da1 0.0%, #2c6589 3.2%, #085564 6.5%, #06403b 9.7%, #11291a 12.9%, #101607 16.1%, #0d0a02 19.4%, #0d0802 22.6%, #140903 25.8%, #200d08 29.0%, #2e1415 32.3%, #3a1b24 35.5%, #422233 38.7%, #41263c 41.9%, #3b283d 45.2%, #342939 48.4%, #2e2933 51.6%, #2b292f 54.8%, #2d2c30 58.1%, #343439 61.3%, #3f4450 64.5%, #475b6f 67.7%, #4a788f 71.0%, #4594a9 74.2%, #3dabba 77.4%, #38b6c5 80.6%, #3cb3ce 83.9%, #4ea5d1 87.1%, #6390c9 90.3%, #727bb6 93.5%, #796aa0 96.8%, #7b6190 100.0%);
background: linear-gradient(135deg in oklch, oklch(53.15% 0.0923 257.34) 0.0%, oklch(48.47% 0.0837 239.79) 3.2%, oklch(41.50% 0.0708 215.14) 6.5%, oklch(33.45% 0.0559 186.09) 9.7%, oklch(25.49% 0.0412 155.29) 12.9%, oklch(18.81% 0.0289 125.43) 16.1%, oklch(14.61% 0.0214 99.19) 19.4%, oklch(13.71% 0.0205 77.16) 22.6%, oklch(15.40% 0.0254 56.41) 25.8%, oklch(18.77% 0.0336 36.92) 29.0%, oklch(22.93% 0.0429 18.80) 32.3%, oklch(26.97% 0.0508 2.15) 35.5%, oklch(29.99% 0.0550 347.09) 38.7%, oklch(31.22% 0.0531 334.03) 41.9%, oklch(30.97% 0.0449 323.85) 45.2%, oklch(29.98% 0.0331 315.67) 48.4%, oklch(28.95% 0.0208 308.45) 51.6%, oklch(28.58% 0.0108 301.13) 54.8%, oklch(29.56% 0.0060 292.65) 58.1%, oklch(32.68% 0.0094 281.76) 61.3%, oklch(38.62% 0.0221 266.55) 64.5%, oklch(46.41% 0.0410 248.94) 67.7%, oklch(54.83% 0.0625 231.54) 71.0%, oklch(62.64% 0.0833 216.98) 74.2%, oklch(68.62% 0.0998 207.87) 77.4%, oklch(71.55% 0.1085 206.86) 80.6%, oklch(71.21% 0.1096 216.15) 83.9%, oklch(68.53% 0.1056 233.30) 87.1%, oklch(64.47% 0.0985 254.73) 90.3%, oklch(59.99% 0.0903 276.85) 93.5%, oklch(56.03% 0.0830 296.06) 96.8%, oklch(53.54% 0.0785 308.77) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.531 | 0.092 | 257.3 |
| 2 | 0.142 | 0.021 | 94.6 |
| 3 | 0.307 | 0.055 | -18.5 |
| 4 | 0.311 | 0.007 | -73.4 |
| 5 | 0.713 | 0.107 | -153.7 |
| 6 | 0.535 | 0.079 | -51.2 |

## Other forms

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