# Near-black and tan rainbow loop palette

The Near-black and tan rainbow loop palette brings together dark blue, black, dark red, orange, yellow, teal, and blue. The colors span a broad lightness range, combining moderate color with clear contrast. Its dark and grounded character suits travel posters and environmental mood boards. Its darkest tone is black, and its lightest tone is yellow.

- Also called: Seamless black, red, brown and teal angular gradient
- Seed: `kcFim3AABPqSsP9CNEE1w5IlKjyw0IUMiRjEw`
- Page: https://grabient.com/kcFim3AABPqSsP9CNEE1w5IlKjyw0IUMiRjEw?style=angularGradient&steps=34&angle=180
- Drawn as: angular gradient, 34 steps, 180 degrees
- Kinds: light center, vivid, seamless
- Hues: complementary
- Contrast of its darkest and lightest colors: 7.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 | `#00020d` | `oklch(8.78% 0.0381 261.05)` | Ninja | white, 20.7 to 1 |
| 2 | `#01000a` | `oklch(7.02% 0.0430 278.37)` | Benthic Black | white, 20.8 to 1 |
| 3 | `#000001` | `oklch(4.15% 0.0213 307.28)` | Black | white, 20.9 to 1 |
| 4 | `#000000` | `oklch(1.07% 0.0044 355.71)` | Black | white, 20.9 to 1 |
| 5 | `#000000` | `oklch(0.00% 0.0000 0.00)` | Black | white, 21 to 1 |
| 6 | `#000000` | `oklch(0.75% 0.0028 33.21)` | Black | white, 20.9 to 1 |
| 7 | `#020000` | `oklch(5.34% 0.0219 29.23)` | Binary Black | white, 20.9 to 1 |
| 8 | `#120100` | `oklch(11.88% 0.0419 34.79)` | Dark Matter | white, 20.3 to 1 |
| 9 | `#2d0300` | `oklch(19.25% 0.0720 32.51)` | Sepia Black | white, 18.6 to 1 |
| 10 | `#4c0000` | `oklch(26.20% 0.1071 29.35)` | Dried Blood | white, 16 to 1 |
| 11 | `#650200` | `oklch(31.86% 0.1292 29.63)` | Red Blood | white, 13.4 to 1 |
| 12 | `#7a0f07` | `oklch(37.14% 0.1407 29.79)` | Demonic Presence | white, 11 to 1 |
| 13 | `#8c1e12` | `oklch(42.17% 0.1474 30.33)` | Minotaurus Brown | white, 9 to 1 |
| 14 | `#9d2f1a` | `oklch(46.93% 0.1490 32.85)` | Dragon Dance | white, 7.3 to 1 |
| 15 | `#a9421d` | `oklch(51.36% 0.1445 38.79)` | Donkey Kong | white, 6 to 1 |
| 16 | `#ae5822` | `oklch(55.65% 0.1298 49.18)` | Autumnal | white, 4.9 to 1 |
| 17 | `#ab7138` | `oklch(59.91% 0.1035 63.22)` | Byzantine Copper | black, 5.1 to 1 |
| 18 | `#a38756` | `oklch(63.76% 0.0739 79.74)` | Banner Gold | black, 6.1 to 1 |
| 19 | `#9d9573` | `oklch(66.81% 0.0494 97.53)` | California Roll | black, 6.9 to 1 |
| 20 | `#999e83` | `oklch(68.69% 0.0381 115.50)` | Fennelly | black, 7.5 to 1 |
| 21 | `#91a389` | `oklch(69.50% 0.0430 135.73)` | Sonoma Sage | black, 7.8 to 1 |
| 22 | `#7ea88f` | `oklch(69.40% 0.0582 157.99)` | Catnip | black, 7.8 to 1 |
| 23 | `#60a99b` | `oklch(68.40% 0.0769 179.77)` | Dragon Bay | black, 7.6 to 1 |
| 24 | `#3fa5a9` | `oklch(66.48% 0.0927 198.55)` | Modal Blue | black, 7.1 to 1 |
| 25 | `#2b9bae` | `oklch(63.58% 0.0998 211.92)` | Pelorus | black, 6.3 to 1 |
| 26 | `#1d8ca8` | `oklch(59.50% 0.1011 219.76)` | Mediterranean Sea | black, 5.3 to 1 |
| 27 | `#0e7c9b` | `oklch(54.46% 0.0994 224.27)` | Turkish Tile | white, 4.8 to 1 |
| 28 | `#00698a` | `oklch(48.76% 0.0949 227.79)` | Techno Blue | white, 6.1 to 1 |
| 29 | `#005677` | `oklch(42.70% 0.0877 232.57)` | Studer Blue | white, 8 to 1 |
| 30 | `#004264` | `oklch(36.03% 0.0831 240.41)` | Lush Aqua | white, 10.7 to 1 |
| 31 | `#002a4e` | `oklch(27.94% 0.0797 250.30)` | Royal Blue Metallic | white, 14.6 to 1 |
| 32 | `#011237` | `oklch(19.58% 0.0767 260.36)` | Infinite Night | white, 18.3 to 1 |
| 33 | `#010121` | `oklch(12.21% 0.0712 269.39)` | Hadopelagic Water | white, 20.3 to 1 |
| 34 | `#01000d` | `oklch(7.49% 0.0471 274.95)` | Benthic Black | white, 20.8 to 1 |

## CSS

```css
background: conic-gradient(from 180deg, #00020d 0.0%, #01000a 3.0%, #000001 6.1%, #000000 9.1%, #000000 12.1%, #000000 15.2%, #020000 18.2%, #120100 21.2%, #2d0300 24.2%, #4c0000 27.3%, #650200 30.3%, #7a0f07 33.3%, #8c1e12 36.4%, #9d2f1a 39.4%, #a9421d 42.4%, #ae5822 45.5%, #ab7138 48.5%, #a38756 51.5%, #9d9573 54.5%, #999e83 57.6%, #91a389 60.6%, #7ea88f 63.6%, #60a99b 66.7%, #3fa5a9 69.7%, #2b9bae 72.7%, #1d8ca8 75.8%, #0e7c9b 78.8%, #00698a 81.8%, #005677 84.8%, #004264 87.9%, #002a4e 90.9%, #011237 93.9%, #010121 97.0%, #01000d 100.0%);
background: conic-gradient(from 180deg in oklch, oklch(8.78% 0.0381 261.05) 0.0%, oklch(7.02% 0.0430 278.37) 3.0%, oklch(4.15% 0.0213 307.28) 6.1%, oklch(1.07% 0.0044 355.71) 9.1%, oklch(0.00% 0.0000 0.00) 12.1%, oklch(0.75% 0.0028 33.21) 15.2%, oklch(5.34% 0.0219 29.23) 18.2%, oklch(11.88% 0.0419 34.79) 21.2%, oklch(19.25% 0.0720 32.51) 24.2%, oklch(26.20% 0.1071 29.35) 27.3%, oklch(31.86% 0.1292 29.63) 30.3%, oklch(37.14% 0.1407 29.79) 33.3%, oklch(42.17% 0.1474 30.33) 36.4%, oklch(46.93% 0.1490 32.85) 39.4%, oklch(51.36% 0.1445 38.79) 42.4%, oklch(55.65% 0.1298 49.18) 45.5%, oklch(59.91% 0.1035 63.22) 48.5%, oklch(63.76% 0.0739 79.74) 51.5%, oklch(66.81% 0.0494 97.53) 54.5%, oklch(68.69% 0.0381 115.50) 57.6%, oklch(69.50% 0.0430 135.73) 60.6%, oklch(69.40% 0.0582 157.99) 63.6%, oklch(68.40% 0.0769 179.77) 66.7%, oklch(66.48% 0.0927 198.55) 69.7%, oklch(63.58% 0.0998 211.92) 72.7%, oklch(59.50% 0.1011 219.76) 75.8%, oklch(54.46% 0.0994 224.27) 78.8%, oklch(48.76% 0.0949 227.79) 81.8%, oklch(42.70% 0.0877 232.57) 84.8%, oklch(36.03% 0.0831 240.41) 87.9%, oklch(27.94% 0.0797 250.30) 90.9%, oklch(19.58% 0.0767 260.36) 93.9%, oklch(12.21% 0.0712 269.39) 97.0%, oklch(7.49% 0.0471 274.95) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.087 | 0.056 | 257.3 |
| 2 | 0 | 0 | 390.5 |
| 3 | 0.287 | 0.121 | 389.4 |
| 4 | 0.52 | 0.143 | 400 |
| 5 | 0.685 | 0.039 | 472.9 |
| 6 | 0.65 | 0.098 | 567 |
| 7 | 0.409 | 0.091 | 594.4 |
| 8 | 0.071 | 0.068 | 635.7 |

## In these collections

- [Rainbow loop gradients](https://grabient.com/rainbow-loop-gradients)

## Other forms

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