# Butterfly patina to cream

Tritone navy, teal and beige linear gradient with 32 colors: #001927, #001d2b, #002331, #002a38, #00313f, #003a47, #00434e, #004c55, #00555b, #005d61, #006666, #006f6a, #00786e, #008270, #198b71, #349272, #489a73, #5ba274, #6ea975, #81b076, #93b778, #a4be7c, #b3c381, #c1c987, #cdcd90, #d7d29a, #e0d7a6, #e6dbb2, #ebe0be, #efe4c9, #f2e7d2, #f4ead9. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Tritone navy, teal and beige linear gradient
- Seed: `kWMy-nMyg8c2kuxoHznd4k8Y`
- Page: https://grabient.com/kWMy-nMyg8c2kuxoHznd4k8Y?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: dark to light, vivid, multicolor
- Hues: wide
- Contrast of its darkest and lightest colors: 15.1 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 | `#001927` | `oklch(20.10% 0.0428 235.23)` | Creeping Death | white, 17.9 to 1 |
| 2 | `#001d2b` | `oklch(21.70% 0.0447 232.86)` | Oxford by Night | white, 17.3 to 1 |
| 3 | `#002331` | `oklch(23.83% 0.0474 229.81)` | Midnight Dreams | white, 16.4 to 1 |
| 4 | `#002a38` | `oklch(26.37% 0.0505 226.23)` | Murky Depths | white, 15.2 to 1 |
| 5 | `#00313f` | `oklch(29.19% 0.0540 222.21)` | Nordic Noir | white, 13.8 to 1 |
| 6 | `#003a47` | `oklch(32.17% 0.0578 217.88)` | Natural Indigo | white, 12.3 to 1 |
| 7 | `#00434e` | `oklch(35.18% 0.0617 213.35)` | Crab Nebula | white, 10.9 to 1 |
| 8 | `#004c55` | `oklch(38.10% 0.0656 208.73)` | Watercolour Blue | white, 9.7 to 1 |
| 9 | `#00555b` | `oklch(40.82% 0.0696 204.12)` | Deep Teal | white, 8.6 to 1 |
| 10 | `#005d61` | `oklch(43.48% 0.0739 199.39)` | Enamelled Jewel | white, 7.6 to 1 |
| 11 | `#006666` | `oklch(46.16% 0.0788 194.46)` | Sci-fi Petrol | white, 6.8 to 1 |
| 12 | `#006f6a` | `oklch(48.86% 0.0846 189.33)` | Tide Pools | white, 6 to 1 |
| 13 | `#00786e` | `oklch(51.56% 0.0913 184.02)` | Pond Moss | white, 5.3 to 1 |
| 14 | `#008270` | `oklch(54.27% 0.0995 178.52)` | Tropical Green | white, 4.7 to 1 |
| 15 | `#198b71` | `oklch(56.97% 0.1036 172.86)` | Industrial Turquoise | black, 4.9 to 1 |
| 16 | `#349272` | `oklch(59.68% 0.1015 167.02)` | Illuminating Emerald | black, 5.5 to 1 |
| 17 | `#489a73` | `oklch(62.39% 0.0999 160.96)` | Dancing Jewel | black, 6.1 to 1 |
| 18 | `#5ba274` | `oklch(65.19% 0.0987 154.35)` | Great Gazoo | black, 6.8 to 1 |
| 19 | `#6ea975` | `oklch(68.06% 0.0977 147.34)` | Dusty Green | black, 7.6 to 1 |
| 20 | `#81b076` | `oklch(70.93% 0.0967 140.13)` | Sage | black, 8.4 to 1 |
| 21 | `#93b778` | `oklch(73.75% 0.0953 132.95)` | Uran Mica | black, 9.3 to 1 |
| 22 | `#a4be7c` | `oklch(76.47% 0.0933 125.99)` | Margarita | black, 10.1 to 1 |
| 23 | `#b3c381` | `oklch(79.02% 0.0905 119.47)` | Everglade Glen | black, 11 to 1 |
| 24 | `#c1c987` | `oklch(81.35% 0.0866 113.60)` | Apple II Beige | black, 11.9 to 1 |
| 25 | `#cdcd90` | `oklch(83.46% 0.0811 108.40)` | Corn Husk Green | black, 12.7 to 1 |
| 26 | `#d7d29a` | `oklch(85.47% 0.0736 103.49)` | Misty Bead | black, 13.5 to 1 |
| 27 | `#e0d7a6` | `oklch(87.36% 0.0648 98.92)` | Buckwheat Groats | black, 14.4 to 1 |
| 28 | `#e6dbb2` | `oklch(89.09% 0.0554 94.73)` | Rainforest Dew | black, 15.1 to 1 |
| 29 | `#ebe0be` | `oklch(90.66% 0.0460 90.95)` | Beurre Blanc | black, 15.9 to 1 |
| 30 | `#efe4c9` | `oklch(92.03% 0.0373 87.66)` | Putting Bench | black, 16.5 to 1 |
| 31 | `#f2e7d2` | `oklch(93.18% 0.0300 84.88)` | Crackled | black, 17.1 to 1 |
| 32 | `#f4ead9` | `oklch(94.09% 0.0248 82.67)` | Saltbox | black, 17.6 to 1 |

## CSS

```css
background: linear-gradient(135deg, #001927 0.0%, #001d2b 3.2%, #002331 6.5%, #002a38 9.7%, #00313f 12.9%, #003a47 16.1%, #00434e 19.4%, #004c55 22.6%, #00555b 25.8%, #005d61 29.0%, #006666 32.3%, #006f6a 35.5%, #00786e 38.7%, #008270 41.9%, #198b71 45.2%, #349272 48.4%, #489a73 51.6%, #5ba274 54.8%, #6ea975 58.1%, #81b076 61.3%, #93b778 64.5%, #a4be7c 67.7%, #b3c381 71.0%, #c1c987 74.2%, #cdcd90 77.4%, #d7d29a 80.6%, #e0d7a6 83.9%, #e6dbb2 87.1%, #ebe0be 90.3%, #efe4c9 93.5%, #f2e7d2 96.8%, #f4ead9 100.0%);
background: linear-gradient(135deg in oklch, oklch(20.10% 0.0428 235.23) 0.0%, oklch(21.70% 0.0447 232.86) 3.2%, oklch(23.83% 0.0474 229.81) 6.5%, oklch(26.37% 0.0505 226.23) 9.7%, oklch(29.19% 0.0540 222.21) 12.9%, oklch(32.17% 0.0578 217.88) 16.1%, oklch(35.18% 0.0617 213.35) 19.4%, oklch(38.10% 0.0656 208.73) 22.6%, oklch(40.82% 0.0696 204.12) 25.8%, oklch(43.48% 0.0739 199.39) 29.0%, oklch(46.16% 0.0788 194.46) 32.3%, oklch(48.86% 0.0846 189.33) 35.5%, oklch(51.56% 0.0913 184.02) 38.7%, oklch(54.27% 0.0995 178.52) 41.9%, oklch(56.97% 0.1036 172.86) 45.2%, oklch(59.68% 0.1015 167.02) 48.4%, oklch(62.39% 0.0999 160.96) 51.6%, oklch(65.19% 0.0987 154.35) 54.8%, oklch(68.06% 0.0977 147.34) 58.1%, oklch(70.93% 0.0967 140.13) 61.3%, oklch(73.75% 0.0953 132.95) 64.5%, oklch(76.47% 0.0933 125.99) 67.7%, oklch(79.02% 0.0905 119.47) 71.0%, oklch(81.35% 0.0866 113.60) 74.2%, oklch(83.46% 0.0811 108.40) 77.4%, oklch(85.47% 0.0736 103.49) 80.6%, oklch(87.36% 0.0648 98.92) 83.9%, oklch(89.09% 0.0554 94.73) 87.1%, oklch(90.66% 0.0460 90.95) 90.3%, oklch(92.03% 0.0373 87.66) 93.5%, oklch(93.18% 0.0300 84.88) 96.8%, oklch(94.09% 0.0248 82.67) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.201 | 0.065 | 234.8 |
| 2 | 0.402 | 0.11 | 205.3 |
| 3 | 0.61 | 0.101 | 164 |
| 4 | 0.819 | 0.085 | 112.3 |
| 5 | 0.941 | 0.025 | 82.7 |

## In these collections

- [Wilderkind](https://grabient.com/wilderkind)

## Other forms

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