# Analogous black, teal and light blue linear swatches

Analogous black, teal and light blue linear swatches with 32 colors: #030712, #040917, #050d1d, #071225, #0a172d, #0d1d36, #10233f, #122946, #142f4e, #163556, #173c5e, #184366, #194b6d, #185274, #175a7a, #15617f, #146984, #147189, #167a8e, #1a8395, #1b8d9d, #1a98a6, #1ca4af, #23b0b8, #32bbc1, #47c6ca, #62d1d3, #7fdcdd, #9be7e8, #b5f1f1, #caf9f9, #d9ffff. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYIRS6IRW_bOdPhGITy36g-HuOv8`
- Page: https://grabient.com/kYIRS6IRW_bOdPhGITy36g-HuOv8?style=linearSwatches&steps=32&angle=180
- Drawn as: linear swatches, 32 steps, 180 degrees
- Kinds: dark to light, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 18.8 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 | `#030712` | `oklch(12.99% 0.0276 261.56)` | Narwhal Grey | white, 20.1 to 1 |
| 2 | `#040917` | `oklch(14.33% 0.0310 261.25)` | Narwhal Grey | white, 19.8 to 1 |
| 3 | `#050d1d` | `oklch(16.17% 0.0358 260.92)` | Tristesse | white, 19.3 to 1 |
| 4 | `#071225` | `oklch(18.35% 0.0415 260.49)` | Kuretake Black Manga | white, 18.7 to 1 |
| 5 | `#0a172d` | `oklch(20.73% 0.0475 259.87)` | Liberty Blue | white, 17.8 to 1 |
| 6 | `#0d1d36` | `oklch(23.17% 0.0533 258.95)` | Trapped Darkness | white, 16.8 to 1 |
| 7 | `#10233f` | `oklch(25.53% 0.0584 257.65)` | Dark Eclipse | white, 15.7 to 1 |
| 8 | `#122946` | `oklch(27.79% 0.0625 255.94)` | Eternal Darkness | white, 14.7 to 1 |
| 9 | `#142f4e` | `oklch(30.10% 0.0663 253.93)` | Crow Black Blue | white, 13.6 to 1 |
| 10 | `#163556` | `oklch(32.46% 0.0699 251.62)` | Incremental Blue | white, 12.4 to 1 |
| 11 | `#173c5e` | `oklch(34.84% 0.0731 249.00)` | Poseidon | white, 11.3 to 1 |
| 12 | `#184366` | `oklch(37.23% 0.0761 246.08)` | Lucidity | white, 10.2 to 1 |
| 13 | `#194b6d` | `oklch(39.61% 0.0789 242.86)` | Indigo Cloth | white, 9.2 to 1 |
| 14 | `#185274` | `oklch(41.94% 0.0813 239.23)` | Midnight Sonata | white, 8.3 to 1 |
| 15 | `#175a7a` | `oklch(44.17% 0.0832 234.93)` | Commandes | white, 7.5 to 1 |
| 16 | `#15617f` | `oklch(46.38% 0.0848 230.19)` | Blue Sapphire | white, 6.8 to 1 |
| 17 | `#146984` | `oklch(48.62% 0.0862 225.30)` | Ansel | white, 6.2 to 1 |
| 18 | `#147189` | `oklch(50.97% 0.0878 220.56)` | Waterworld | white, 5.5 to 1 |
| 19 | `#167a8e` | `oklch(53.49% 0.0896 216.26)` | Bimini Blue | white, 5 to 1 |
| 20 | `#1a8395` | `oklch(56.25% 0.0921 212.63)` | Cruising | black, 4.7 to 1 |
| 21 | `#1b8d9d` | `oklch(59.24% 0.0965 209.35)` | Coral Coast | black, 5.3 to 1 |
| 22 | `#1a98a6` | `oklch(62.40% 0.1019 206.35)` | Mediterranean Swirl | black, 6.1 to 1 |
| 23 | `#1ca4af` | `oklch(65.69% 0.1071 203.66)` | Garish Blue | black, 6.9 to 1 |
| 24 | `#23b0b8` | `oklch(69.06% 0.1109 201.33)` | Mermaid Treasure | black, 7.9 to 1 |
| 25 | `#32bbc1` | `oklch(72.47% 0.1121 199.39)` | Montego Bay | black, 9 to 1 |
| 26 | `#47c6ca` | `oklch(75.89% 0.1093 197.90)` | Sea Serpent | black, 10.1 to 1 |
| 27 | `#62d1d3` | `oklch(79.67% 0.1012 197.01)` | Blue Radiance | black, 11.5 to 1 |
| 28 | `#7fdcdd` | `oklch(83.77% 0.0891 196.65)` | Cold Blue | black, 13.1 to 1 |
| 29 | `#9be7e8` | `oklch(87.88% 0.0748 196.65)` | Everest | black, 14.9 to 1 |
| 30 | `#b5f1f1` | `oklch(91.69% 0.0606 196.84)` | Cold Blooded | black, 16.7 to 1 |
| 31 | `#caf9f9` | `oklch(94.92% 0.0483 197.05)` | Tinted Ice | black, 18.4 to 1 |
| 32 | `#d9ffff` | `oklch(97.24% 0.0391 197.08)` | Cold Canada | black, 19.6 to 1 |

## CSS

```css
background: linear-gradient(180deg, #030712 0.000% 3.125%, #040917 3.125% 6.250%, #050d1d 6.250% 9.375%, #071225 9.375% 12.500%, #0a172d 12.500% 15.625%, #0d1d36 15.625% 18.750%, #10233f 18.750% 21.875%, #122946 21.875% 25.000%, #142f4e 25.000% 28.125%, #163556 28.125% 31.250%, #173c5e 31.250% 34.375%, #184366 34.375% 37.500%, #194b6d 37.500% 40.625%, #185274 40.625% 43.750%, #175a7a 43.750% 46.875%, #15617f 46.875% 50.000%, #146984 50.000% 53.125%, #147189 53.125% 56.250%, #167a8e 56.250% 59.375%, #1a8395 59.375% 62.500%, #1b8d9d 62.500% 65.625%, #1a98a6 65.625% 68.750%, #1ca4af 68.750% 71.875%, #23b0b8 71.875% 75.000%, #32bbc1 75.000% 78.125%, #47c6ca 78.125% 81.250%, #62d1d3 81.250% 84.375%, #7fdcdd 84.375% 87.500%, #9be7e8 87.500% 90.625%, #b5f1f1 90.625% 93.750%, #caf9f9 93.750% 96.875%, #d9ffff 96.875% 100.000%);
background: linear-gradient(180deg, oklch(12.99% 0.0276 261.56) 0.000% 3.125%, oklch(14.33% 0.0310 261.25) 3.125% 6.250%, oklch(16.17% 0.0358 260.92) 6.250% 9.375%, oklch(18.35% 0.0415 260.49) 9.375% 12.500%, oklch(20.73% 0.0475 259.87) 12.500% 15.625%, oklch(23.17% 0.0533 258.95) 15.625% 18.750%, oklch(25.53% 0.0584 257.65) 18.750% 21.875%, oklch(27.79% 0.0625 255.94) 21.875% 25.000%, oklch(30.10% 0.0663 253.93) 25.000% 28.125%, oklch(32.46% 0.0699 251.62) 28.125% 31.250%, oklch(34.84% 0.0731 249.00) 31.250% 34.375%, oklch(37.23% 0.0761 246.08) 34.375% 37.500%, oklch(39.61% 0.0789 242.86) 37.500% 40.625%, oklch(41.94% 0.0813 239.23) 40.625% 43.750%, oklch(44.17% 0.0832 234.93) 43.750% 46.875%, oklch(46.38% 0.0848 230.19) 46.875% 50.000%, oklch(48.62% 0.0862 225.30) 50.000% 53.125%, oklch(50.97% 0.0878 220.56) 53.125% 56.250%, oklch(53.49% 0.0896 216.26) 56.250% 59.375%, oklch(56.25% 0.0921 212.63) 59.375% 62.500%, oklch(59.24% 0.0965 209.35) 62.500% 65.625%, oklch(62.40% 0.1019 206.35) 65.625% 68.750%, oklch(65.69% 0.1071 203.66) 68.750% 71.875%, oklch(69.06% 0.1109 201.33) 71.875% 75.000%, oklch(72.47% 0.1121 199.39) 75.000% 78.125%, oklch(75.89% 0.1093 197.90) 78.125% 81.250%, oklch(79.67% 0.1012 197.01) 81.250% 84.375%, oklch(83.77% 0.0891 196.65) 84.375% 87.500%, oklch(87.88% 0.0748 196.65) 87.500% 90.625%, oklch(91.69% 0.0606 196.84) 90.625% 93.750%, oklch(94.92% 0.0483 197.05) 93.750% 96.875%, oklch(97.24% 0.0391 197.08) 96.875% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.13 | 0.028 | 261.6 |
| 2 | 0.26 | 0.059 | 257.3 |
| 3 | 0.406 | 0.08 | 241.5 |
| 4 | 0.551 | 0.091 | 214 |
| 5 | 0.752 | 0.11 | 198.2 |
| 6 | 0.972 | 0.04 | 197.1 |

## In these collections

- [Galaxy gradients](https://grabient.com/galaxy-gradients)

## Other forms

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