# Umber into Ultramarine

Tritone brown, teal and blue linear gradient with 32 colors: #24130a, #27150b, #2b180c, #301b0e, #361e10, #3c2212, #422614, #482b16, #4e3016, #533516, #573b15, #584214, #564916, #51521e, #475b2c, #3a633d, #286a51, #156f65, #097378, #157589, #257696, #3376a1, #3d77ab, #4578b3, #4b79bb, #507ac3, #547aca, #567bd1, #587cd8, #5a7cdd, #5c7de2, #5f7de6. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Tritone brown, teal and blue linear gradient
- Seed: `kUNRgisJhDESiUxOusPA`
- Page: https://grabient.com/kUNRgisJhDESiUxOusPA?steps=32&angle=45
- Drawn as: linear gradient, 32 steps, 45 degrees
- Kinds: dark to light
- Hues: complementary
- Contrast of its darkest and lightest colors: 4.7 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 | `#24130a` | `oklch(20.87% 0.0331 48.52)` | Severely Burnt Toast | white, 17.8 to 1 |
| 2 | `#27150b` | `oklch(21.87% 0.0350 49.46)` | Cannon Black | white, 17.4 to 1 |
| 3 | `#2b180c` | `oklch(23.15% 0.0375 49.92)` | Zinnwaldite Brown | white, 16.9 to 1 |
| 4 | `#301b0e` | `oklch(24.68% 0.0404 50.21)` | Brunneophobia | white, 16.3 to 1 |
| 5 | `#361e10` | `oklch(26.38% 0.0437 50.61)` | Close but No Cigar | white, 15.5 to 1 |
| 6 | `#3c2212` | `oklch(28.23% 0.0473 51.42)` | Délicieux au Chocolat | white, 14.6 to 1 |
| 7 | `#422614` | `oklch(30.15% 0.0510 52.94)` | Night Brown | white, 13.7 to 1 |
| 8 | `#482b16` | `oklch(32.11% 0.0547 55.47)` | Brown Study | white, 12.8 to 1 |
| 9 | `#4e3016` | `oklch(34.04% 0.0584 59.29)` | Bavarian Sweet Mustard | white, 11.9 to 1 |
| 10 | `#533516` | `oklch(35.91% 0.0619 64.71)` | Moelleux au Chocolat | white, 11 to 1 |
| 11 | `#573b15` | `oklch(37.65% 0.0651 72.03)` | Pineapple | white, 10.2 to 1 |
| 12 | `#584214` | `oklch(39.26% 0.0680 81.80)` | Smoked Oak Brown | white, 9.5 to 1 |
| 13 | `#564916` | `oklch(40.90% 0.0705 94.75)` | Bronze Olive | white, 8.8 to 1 |
| 14 | `#51521e` | `oklch(42.56% 0.0727 110.24)` | Private Green | white, 8.1 to 1 |
| 15 | `#475b2c` | `oklch(44.21% 0.0747 127.55)` | Woodman | white, 7.5 to 1 |
| 16 | `#3a633d` | `oklch(45.85% 0.0767 145.98)` | Jurassic Park | white, 6.9 to 1 |
| 17 | `#286a51` | `oklch(47.45% 0.0788 164.79)` | Sparkling Emerald | white, 6.4 to 1 |
| 18 | `#156f65` | `oklch(48.99% 0.0812 183.27)` | Tide Pools | white, 5.9 to 1 |
| 19 | `#097378` | `oklch(50.47% 0.0839 200.71)` | Essential Teal | white, 5.6 to 1 |
| 20 | `#157589` | `oklch(51.86% 0.0870 216.38)` | Glamour Green | white, 5.3 to 1 |
| 21 | `#257696` | `oklch(53.15% 0.0908 229.56)` | Devil Blue | white, 5.1 to 1 |
| 22 | `#3376a1` | `oklch(54.31% 0.0953 239.64)` | Taiwan Blue Magpie | white, 4.9 to 1 |
| 23 | `#3d77ab` | `oklch(55.40% 0.1009 247.39)` | Blue Triumph | white, 4.7 to 1 |
| 24 | `#4578b3` | `oklch(56.40% 0.1076 253.39)` | Viennese Blue | black, 4.5 to 1 |
| 25 | `#4b79bb` | `oklch(57.34% 0.1149 257.88)` | Ashton Blue | black, 4.7 to 1 |
| 26 | `#507ac3` | `oklch(58.20% 0.1226 261.14)` | Parkwater | black, 4.8 to 1 |
| 27 | `#547aca` | `oklch(58.98% 0.1305 263.43)` | Serenity’s Reign | black, 5 to 1 |
| 28 | `#567bd1` | `oklch(59.70% 0.1382 265.00)` | Serenity’s Reign | black, 5.1 to 1 |
| 29 | `#587cd8` | `oklch(60.34% 0.1454 266.12)` | Serenity’s Reign | black, 5.2 to 1 |
| 30 | `#5a7cdd` | `oklch(60.90% 0.1518 267.05)` | Serenity’s Reign | black, 5.3 to 1 |
| 31 | `#5c7de2` | `oklch(61.39% 0.1572 268.04)` | Pan Purple | black, 5.4 to 1 |
| 32 | `#5f7de6` | `oklch(61.81% 0.1612 269.38)` | Pan Purple | black, 5.5 to 1 |

## CSS

```css
background: linear-gradient(45deg, #24130a 0.0%, #27150b 3.2%, #2b180c 6.5%, #301b0e 9.7%, #361e10 12.9%, #3c2212 16.1%, #422614 19.4%, #482b16 22.6%, #4e3016 25.8%, #533516 29.0%, #573b15 32.3%, #584214 35.5%, #564916 38.7%, #51521e 41.9%, #475b2c 45.2%, #3a633d 48.4%, #286a51 51.6%, #156f65 54.8%, #097378 58.1%, #157589 61.3%, #257696 64.5%, #3376a1 67.7%, #3d77ab 71.0%, #4578b3 74.2%, #4b79bb 77.4%, #507ac3 80.6%, #547aca 83.9%, #567bd1 87.1%, #587cd8 90.3%, #5a7cdd 93.5%, #5c7de2 96.8%, #5f7de6 100.0%);
background: linear-gradient(45deg in oklch, oklch(20.87% 0.0331 48.52) 0.0%, oklch(21.87% 0.0350 49.46) 3.2%, oklch(23.15% 0.0375 49.92) 6.5%, oklch(24.68% 0.0404 50.21) 9.7%, oklch(26.38% 0.0437 50.61) 12.9%, oklch(28.23% 0.0473 51.42) 16.1%, oklch(30.15% 0.0510 52.94) 19.4%, oklch(32.11% 0.0547 55.47) 22.6%, oklch(34.04% 0.0584 59.29) 25.8%, oklch(35.91% 0.0619 64.71) 29.0%, oklch(37.65% 0.0651 72.03) 32.3%, oklch(39.26% 0.0680 81.80) 35.5%, oklch(40.90% 0.0705 94.75) 38.7%, oklch(42.56% 0.0727 110.24) 41.9%, oklch(44.21% 0.0747 127.55) 45.2%, oklch(45.85% 0.0767 145.98) 48.4%, oklch(47.45% 0.0788 164.79) 51.6%, oklch(48.99% 0.0812 183.27) 54.8%, oklch(50.47% 0.0839 200.71) 58.1%, oklch(51.86% 0.0870 216.38) 61.3%, oklch(53.15% 0.0908 229.56) 64.5%, oklch(54.31% 0.0953 239.64) 67.7%, oklch(55.40% 0.1009 247.39) 71.0%, oklch(56.40% 0.1076 253.39) 74.2%, oklch(57.34% 0.1149 257.88) 77.4%, oklch(58.20% 0.1226 261.14) 80.6%, oklch(58.98% 0.1305 263.43) 83.9%, oklch(59.70% 0.1382 265.00) 87.1%, oklch(60.34% 0.1454 266.12) 90.3%, oklch(60.90% 0.1518 267.05) 93.5%, oklch(61.39% 0.1572 268.04) 96.8%, oklch(61.81% 0.1612 269.38) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.209 | 0.033 | 48.5 |
| 2 | 0.382 | 0.066 | 74.9 |
| 3 | 0.539 | 0.094 | 236.6 |
| 4 | 0.618 | 0.161 | 269.4 |

## In these collections

- [Afro bohemian](https://grabient.com/afro-bohemian)

## Other forms

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