# Black, blue and green linear swatches

Black, blue and green linear swatches with 40 colors: #01000c, #010010, #020014, #03001a, #040021, #060028, #080031, #0b003a, #0e0043, #12004d, #150058, #180162, #1b026d, #1e0478, #200782, #200d8c, #201396, #1d199f, #1820a6, #0b28ad, #0038a1, #004395, #004a8d, #005188, #005684, #005b81, #005f7e, #00647b, #006879, #006b77, #006f74, #007271, #00766d, #007969, #007c64, #007f5f, #008258, #1c8352, #30834f, #3b844d. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kSEyHGMMw-MYosm`
- Page: https://grabient.com/kSEyHGMMw-MYosm?style=linearSwatches&steps=40&angle=225
- Drawn as: linear swatches, 40 steps, 225 degrees
- Kinds: dark to light, vivid, cool
- Hues: two-hue
- Contrast of its darkest and lightest colors: 4.5 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 | `#01000c` | `oklch(7.48% 0.0455 278.44)` | Benthic Black | white, 20.8 to 1 |
| 2 | `#010010` | `oklch(8.36% 0.0504 278.14)` | Benthic Black | white, 20.8 to 1 |
| 3 | `#020014` | `oklch(9.43% 0.0568 278.00)` | Benthic Black | white, 20.7 to 1 |
| 4 | `#03001a` | `oklch(10.65% 0.0643 277.97)` | Hadopelagic Water | white, 20.6 to 1 |
| 5 | `#040021` | `oklch(12.02% 0.0729 278.02)` | Hadopelagic Water | white, 20.4 to 1 |
| 6 | `#060028` | `oklch(13.51% 0.0823 278.12)` | Insomnia | white, 20.2 to 1 |
| 7 | `#080031` | `oklch(15.12% 0.0924 278.23)` | Erebus Blue | white, 19.9 to 1 |
| 8 | `#0b003a` | `oklch(16.82% 0.1030 278.31)` | Congressional Navy | white, 19.5 to 1 |
| 9 | `#0e0043` | `oklch(18.59% 0.1139 278.33)` | Floppy Disk | white, 19 to 1 |
| 10 | `#12004d` | `oklch(20.41% 0.1251 278.27)` | Silent Twilight | white, 18.5 to 1 |
| 11 | `#150058` | `oklch(22.24% 0.1364 278.11)` | Scoop of Dark Matter | white, 17.9 to 1 |
| 12 | `#180162` | `oklch(24.11% 0.1473 277.77)` | Darth Torus | white, 17.2 to 1 |
| 13 | `#1b026d` | `oklch(25.98% 0.1580 277.24)` | Bavarian Gentian | white, 16.4 to 1 |
| 14 | `#1e0478` | `oklch(27.84% 0.1681 276.48)` | Child of the Night | white, 15.6 to 1 |
| 15 | `#200782` | `oklch(29.65% 0.1775 275.46)` | Orbital Kingdom | white, 14.8 to 1 |
| 16 | `#200d8c` | `oklch(31.41% 0.1861 274.14)` | Nightly Expedition | white, 13.9 to 1 |
| 17 | `#201396` | `oklch(33.10% 0.1937 272.50)` | Blue Beetle | white, 13.1 to 1 |
| 18 | `#1d199f` | `oklch(34.70% 0.2000 270.49)` | Deepsea Kraken | white, 12.3 to 1 |
| 19 | `#1820a6` | `oklch(36.19% 0.2050 268.08)` | City Hunter Blue | white, 11.6 to 1 |
| 20 | `#0b28ad` | `oklch(37.56% 0.2084 265.24)` | International Blue | white, 10.9 to 1 |
| 21 | `#0038a1` | `oklch(38.80% 0.1785 261.93)` | Philippine Blue | white, 10.1 to 1 |
| 22 | `#004395` | `oklch(39.99% 0.1471 257.85)` | Fright Night | white, 9.4 to 1 |
| 23 | `#004a8d` | `oklch(41.16% 0.1272 253.08)` | Lady of the Night | white, 8.8 to 1 |
| 24 | `#005188` | `oklch(42.29% 0.1130 247.69)` | Snorkel Blue | white, 8.3 to 1 |
| 25 | `#005684` | `oklch(43.39% 0.1026 241.79)` | Beyond the Sea | white, 7.8 to 1 |
| 26 | `#005b81` | `oklch(44.45% 0.0949 235.45)` | Whale’s Tale | white, 7.4 to 1 |
| 27 | `#005f7e` | `oklch(45.48% 0.0894 228.76)` | Back of Beyond | white, 7.1 to 1 |
| 28 | `#00647b` | `oklch(46.48% 0.0858 221.81)` | Jamaican Dream | white, 6.7 to 1 |
| 29 | `#006879` | `oklch(47.44% 0.0837 214.69)` | Teal With It | white, 6.4 to 1 |
| 30 | `#006b77` | `oklch(48.35% 0.0830 207.47)` | Mary Blue | white, 6.2 to 1 |
| 31 | `#006f74` | `oklch(49.23% 0.0837 200.26)` | Active Turquoise | white, 5.9 to 1 |
| 32 | `#007271` | `oklch(50.07% 0.0857 193.12)` | Boating Green | white, 5.7 to 1 |
| 33 | `#00766d` | `oklch(50.86% 0.0891 186.16)` | Mermaid Harbour | white, 5.5 to 1 |
| 34 | `#007969` | `oklch(51.61% 0.0940 179.46)` | Shady Glade | white, 5.3 to 1 |
| 35 | `#007c64` | `oklch(52.32% 0.1004 173.10)` | Turquoise Cyan | white, 5.1 to 1 |
| 36 | `#007f5f` | `oklch(52.98% 0.1083 167.18)` | Spanish Viridian | white, 4.9 to 1 |
| 37 | `#008258` | `oklch(53.59% 0.1179 161.77)` | Irish Beauty | white, 4.8 to 1 |
| 38 | `#1c8352` | `oklch(54.15% 0.1188 156.97)` | Bold Irish | white, 4.7 to 1 |
| 39 | `#30834f` | `oklch(54.66% 0.1147 152.86)` | Monster Monstera | white, 4.6 to 1 |
| 40 | `#3b844d` | `oklch(55.12% 0.1116 149.51)` | Green Grass | white, 4.5 to 1 |

## CSS

```css
background: linear-gradient(225deg, #01000c 0.000% 2.500%, #010010 2.500% 5.000%, #020014 5.000% 7.500%, #03001a 7.500% 10.000%, #040021 10.000% 12.500%, #060028 12.500% 15.000%, #080031 15.000% 17.500%, #0b003a 17.500% 20.000%, #0e0043 20.000% 22.500%, #12004d 22.500% 25.000%, #150058 25.000% 27.500%, #180162 27.500% 30.000%, #1b026d 30.000% 32.500%, #1e0478 32.500% 35.000%, #200782 35.000% 37.500%, #200d8c 37.500% 40.000%, #201396 40.000% 42.500%, #1d199f 42.500% 45.000%, #1820a6 45.000% 47.500%, #0b28ad 47.500% 50.000%, #0038a1 50.000% 52.500%, #004395 52.500% 55.000%, #004a8d 55.000% 57.500%, #005188 57.500% 60.000%, #005684 60.000% 62.500%, #005b81 62.500% 65.000%, #005f7e 65.000% 67.500%, #00647b 67.500% 70.000%, #006879 70.000% 72.500%, #006b77 72.500% 75.000%, #006f74 75.000% 77.500%, #007271 77.500% 80.000%, #00766d 80.000% 82.500%, #007969 82.500% 85.000%, #007c64 85.000% 87.500%, #007f5f 87.500% 90.000%, #008258 90.000% 92.500%, #1c8352 92.500% 95.000%, #30834f 95.000% 97.500%, #3b844d 97.500% 100.000%);
background: linear-gradient(225deg, oklch(7.48% 0.0455 278.44) 0.000% 2.500%, oklch(8.36% 0.0504 278.14) 2.500% 5.000%, oklch(9.43% 0.0568 278.00) 5.000% 7.500%, oklch(10.65% 0.0643 277.97) 7.500% 10.000%, oklch(12.02% 0.0729 278.02) 10.000% 12.500%, oklch(13.51% 0.0823 278.12) 12.500% 15.000%, oklch(15.12% 0.0924 278.23) 15.000% 17.500%, oklch(16.82% 0.1030 278.31) 17.500% 20.000%, oklch(18.59% 0.1139 278.33) 20.000% 22.500%, oklch(20.41% 0.1251 278.27) 22.500% 25.000%, oklch(22.24% 0.1364 278.11) 25.000% 27.500%, oklch(24.11% 0.1473 277.77) 27.500% 30.000%, oklch(25.98% 0.1580 277.24) 30.000% 32.500%, oklch(27.84% 0.1681 276.48) 32.500% 35.000%, oklch(29.65% 0.1775 275.46) 35.000% 37.500%, oklch(31.41% 0.1861 274.14) 37.500% 40.000%, oklch(33.10% 0.1937 272.50) 40.000% 42.500%, oklch(34.70% 0.2000 270.49) 42.500% 45.000%, oklch(36.19% 0.2050 268.08) 45.000% 47.500%, oklch(37.56% 0.2084 265.24) 47.500% 50.000%, oklch(38.80% 0.1785 261.93) 50.000% 52.500%, oklch(39.99% 0.1471 257.85) 52.500% 55.000%, oklch(41.16% 0.1272 253.08) 55.000% 57.500%, oklch(42.29% 0.1130 247.69) 57.500% 60.000%, oklch(43.39% 0.1026 241.79) 60.000% 62.500%, oklch(44.45% 0.0949 235.45) 62.500% 65.000%, oklch(45.48% 0.0894 228.76) 65.000% 67.500%, oklch(46.48% 0.0858 221.81) 67.500% 70.000%, oklch(47.44% 0.0837 214.69) 70.000% 72.500%, oklch(48.35% 0.0830 207.47) 72.500% 75.000%, oklch(49.23% 0.0837 200.26) 75.000% 77.500%, oklch(50.07% 0.0857 193.12) 77.500% 80.000%, oklch(50.86% 0.0891 186.16) 80.000% 82.500%, oklch(51.61% 0.0940 179.46) 82.500% 85.000%, oklch(52.32% 0.1004 173.10) 85.000% 87.500%, oklch(52.98% 0.1083 167.18) 87.500% 90.000%, oklch(53.59% 0.1179 161.77) 90.000% 92.500%, oklch(54.15% 0.1188 156.97) 92.500% 95.000%, oklch(54.66% 0.1147 152.86) 95.000% 97.500%, oklch(55.12% 0.1116 149.51) 97.500% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.075 | 0.045 | 278.4 |
| 2 | 0.382 | 0.209 | 263.6 |
| 3 | 0.551 | 0.112 | 149.5 |

## In these collections

- [Dark gradients](https://grabient.com/dark-gradients)

## Other forms

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