# Amber black to ivory

Black, brown, gray and white linear gradient with 32 colors: #0e0a05, #110c06, #140e07, #181108, #1c140a, #21180d, #271d10, #2e2214, #36291a, #3f3120, #493a28, #544431, #604f3a, #6c5b45, #786750, #84745b, #908067, #9d8c74, #aa9a82, #b7a891, #c3b59f, #cfc2ad, #daceba, #e4d8c6, #ebe0cf, #f1e7d6, #f5ecdc, #f8f0e1, #faf3e5, #fcf5e8, #fdf7eb, #fff9ee. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Black, brown, gray and white linear gradient
- Seed: `kWJgo3JAu_EqPQNxikBfQZAY`
- Page: https://grabient.com/kWJgo3JAu_EqPQNxikBfQZAY?steps=32&angle=120
- Drawn as: linear gradient, 32 steps, 120 degrees
- Kinds: dark to light, neutral, warm
- 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 | `#0e0a05` | `oklch(14.96% 0.0138 77.34)` | Smoky Black | white, 19.6 to 1 |
| 2 | `#110c06` | `oklch(15.91% 0.0153 76.64)` | Balsam of Peru | white, 19.4 to 1 |
| 3 | `#140e07` | `oklch(17.05% 0.0173 75.59)` | Balsamico | white, 19.1 to 1 |
| 4 | `#181108` | `oklch(18.39% 0.0198 74.34)` | Black Raspberry | white, 18.6 to 1 |
| 5 | `#1c140a` | `oklch(19.97% 0.0225 73.02)` | Soulless | white, 18.1 to 1 |
| 6 | `#21180d` | `oklch(21.80% 0.0252 71.78)` | Noir Mystique | white, 17.4 to 1 |
| 7 | `#271d10` | `oklch(23.91% 0.0279 70.76)` | Burnt Coffee | white, 16.5 to 1 |
| 8 | `#2e2214` | `oklch(26.33% 0.0302 70.11)` | Coffee Grounds | white, 15.4 to 1 |
| 9 | `#36291a` | `oklch(29.07% 0.0321 69.96)` | Cocoa Brown | white, 14.1 to 1 |
| 10 | `#3f3120` | `oklch(32.27% 0.0340 70.35)` | Iroko | white, 12.6 to 1 |
| 11 | `#493a28` | `oklch(35.90% 0.0358 71.14)` | Harpy Brown | white, 10.9 to 1 |
| 12 | `#544431` | `oklch(39.84% 0.0375 72.22)` | Old Treasure Chest | white, 9.3 to 1 |
| 13 | `#604f3a` | `oklch(44.00% 0.0390 73.46)` | Oak Plank | white, 7.8 to 1 |
| 14 | `#6c5b45` | `oklch(48.26% 0.0403 74.75)` | Cummings Oak | white, 6.5 to 1 |
| 15 | `#786750` | `oklch(52.51% 0.0411 75.95)` | Crater | white, 5.4 to 1 |
| 16 | `#84745b` | `oklch(56.66% 0.0414 76.96)` | Natural Habitat | black, 4.6 to 1 |
| 17 | `#908067` | `oklch(60.67% 0.0411 77.67)` | Sandalwood Tan | black, 5.4 to 1 |
| 18 | `#9d8c74` | `oklch(64.91% 0.0401 78.21)` | Archivist | black, 6.4 to 1 |
| 19 | `#aa9a82` | `oklch(69.30% 0.0385 78.64)` | Wooden Peg | black, 7.6 to 1 |
| 20 | `#b7a891` | `oklch(73.71% 0.0366 79.00)` | Universal Khaki | black, 8.9 to 1 |
| 21 | `#c3b59f` | `oklch(78.00% 0.0343 79.33)` | Basic Khaki | black, 10.4 to 1 |
| 22 | `#cfc2ad` | `oklch(82.03% 0.0321 79.64)` | Merino Wool | black, 12 to 1 |
| 23 | `#daceba` | `oklch(85.64% 0.0299 79.99)` | Toasted Almond | black, 13.5 to 1 |
| 24 | `#e4d8c6` | `oklch(88.71% 0.0280 80.40)` | Sandcastle | black, 14.9 to 1 |
| 25 | `#ebe0cf` | `oklch(91.14% 0.0263 80.90)` | Crispy Crust | black, 16.1 to 1 |
| 26 | `#f1e7d6` | `oklch(93.06% 0.0247 81.48)` | Chenille Spread | black, 17.1 to 1 |
| 27 | `#f5ecdc` | `oklch(94.55% 0.0230 82.11)` | Modern Ivory | black, 17.8 to 1 |
| 28 | `#f8f0e1` | `oklch(95.69% 0.0214 82.75)` | Lemon Sponge Cake | black, 18.5 to 1 |
| 29 | `#faf3e5` | `oklch(96.57% 0.0199 83.36)` | Milk Moustache | black, 19 to 1 |
| 30 | `#fcf5e8` | `oklch(97.27% 0.0185 83.92)` | Old Lace | black, 19.4 to 1 |
| 31 | `#fdf7eb` | `oklch(97.86% 0.0174 84.39)` | Pearl Necklace | black, 19.7 to 1 |
| 32 | `#fff9ee` | `oklch(98.42% 0.0164 84.78)` | Satin Purse | black, 20 to 1 |

## CSS

```css
background: linear-gradient(120deg, #0e0a05 0.0%, #110c06 3.2%, #140e07 6.5%, #181108 9.7%, #1c140a 12.9%, #21180d 16.1%, #271d10 19.4%, #2e2214 22.6%, #36291a 25.8%, #3f3120 29.0%, #493a28 32.3%, #544431 35.5%, #604f3a 38.7%, #6c5b45 41.9%, #786750 45.2%, #84745b 48.4%, #908067 51.6%, #9d8c74 54.8%, #aa9a82 58.1%, #b7a891 61.3%, #c3b59f 64.5%, #cfc2ad 67.7%, #daceba 71.0%, #e4d8c6 74.2%, #ebe0cf 77.4%, #f1e7d6 80.6%, #f5ecdc 83.9%, #f8f0e1 87.1%, #faf3e5 90.3%, #fcf5e8 93.5%, #fdf7eb 96.8%, #fff9ee 100.0%);
background: linear-gradient(120deg in oklch, oklch(14.96% 0.0138 77.34) 0.0%, oklch(15.91% 0.0153 76.64) 3.2%, oklch(17.05% 0.0173 75.59) 6.5%, oklch(18.39% 0.0198 74.34) 9.7%, oklch(19.97% 0.0225 73.02) 12.9%, oklch(21.80% 0.0252 71.78) 16.1%, oklch(23.91% 0.0279 70.76) 19.4%, oklch(26.33% 0.0302 70.11) 22.6%, oklch(29.07% 0.0321 69.96) 25.8%, oklch(32.27% 0.0340 70.35) 29.0%, oklch(35.90% 0.0358 71.14) 32.3%, oklch(39.84% 0.0375 72.22) 35.5%, oklch(44.00% 0.0390 73.46) 38.7%, oklch(48.26% 0.0403 74.75) 41.9%, oklch(52.51% 0.0411 75.95) 45.2%, oklch(56.66% 0.0414 76.96) 48.4%, oklch(60.67% 0.0411 77.67) 51.6%, oklch(64.91% 0.0401 78.21) 54.8%, oklch(69.30% 0.0385 78.64) 58.1%, oklch(73.71% 0.0366 79.00) 61.3%, oklch(78.00% 0.0343 79.33) 64.5%, oklch(82.03% 0.0321 79.64) 67.7%, oklch(85.64% 0.0299 79.99) 71.0%, oklch(88.71% 0.0280 80.40) 74.2%, oklch(91.14% 0.0263 80.90) 77.4%, oklch(93.06% 0.0247 81.48) 80.6%, oklch(94.55% 0.0230 82.11) 83.9%, oklch(95.69% 0.0214 82.75) 87.1%, oklch(96.57% 0.0199 83.36) 90.3%, oklch(97.27% 0.0185 83.92) 93.5%, oklch(97.86% 0.0174 84.39) 96.8%, oklch(98.42% 0.0164 84.78) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.15 | 0.014 | 77.3 |
| 2 | 0.283 | 0.032 | 69.9 |
| 3 | 0.587 | 0.041 | 77.3 |
| 4 | 0.894 | 0.028 | 80.5 |
| 5 | 0.984 | 0.017 | 84.7 |

## In these collections

- [Black and white gradients](https://grabient.com/black-and-white-gradients)

## Other forms

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