# Amber into Slate

This palette moves from light orange through orange to gray. It darkens and then lightens across a moderate lightness range, combining moderate color with gentle contrast. Its balanced and composed character suits brand mood boards and social graphics, especially compositions that need closely related light and dark areas.

- Also called: Analogous orange, brown and gray linear gradient
- Seed: `kWtV8yzCw-TsePwzhDxuogs4`
- Page: https://grabient.com/kWtV8yzCw-TsePwzhDxuogs4?steps=32&angle=180
- Drawn as: linear gradient, 32 steps, 180 degrees
- Kinds: warm
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 3.4 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 | `#d59338` | `oklch(71.26% 0.1309 71.02)` | Hint of Caramel | black, 8 to 1 |
| 2 | `#d38f36` | `oklch(70.36% 0.1303 69.87)` | Fuel Yellow | black, 7.7 to 1 |
| 3 | `#d08b34` | `oklch(69.17% 0.1298 68.29)` | Opulent | black, 7.4 to 1 |
| 4 | `#cc8632` | `oklch(67.76% 0.1292 66.41)` | Pumpkin Squash | black, 7 to 1 |
| 5 | `#c88030` | `oklch(66.18% 0.1284 64.35)` | Mulberry Thorn | black, 6.5 to 1 |
| 6 | `#c47a2e` | `oklch(64.50% 0.1272 62.24)` | Maine Coon Orange | black, 6.1 to 1 |
| 7 | `#bf742d` | `oklch(62.78% 0.1256 60.22)` | Sudan Brown | black, 5.7 to 1 |
| 8 | `#b96f2c` | `oklch(61.07% 0.1234 58.42)` | Brown Alpaca | black, 5.3 to 1 |
| 9 | `#b36a2c` | `oklch(59.44% 0.1205 56.95)` | Reno Sand | black, 5 to 1 |
| 10 | `#ad652b` | `oklch(57.71% 0.1170 55.97)` | Autumn Surprise | black, 4.6 to 1 |
| 11 | `#a6602a` | `oklch(55.88% 0.1132 55.33)` | Scarecrow Frown | white, 4.8 to 1 |
| 12 | `#9e5b29` | `oklch(53.99% 0.1088 54.86)` | Bright Bronze | white, 5.2 to 1 |
| 13 | `#975728` | `oklch(52.10% 0.1040 54.37)` | Ethiopian Wolf | white, 5.6 to 1 |
| 14 | `#8f5328` | `oklch(50.29% 0.0986 53.69)` | Caramel Café | white, 6.1 to 1 |
| 15 | `#884f29` | `oklch(48.61% 0.0927 52.61)` | Chestnut Glaze | white, 6.5 to 1 |
| 16 | `#814c2b` | `oklch(47.11% 0.0862 50.97)` | Mummy Brown | white, 7 to 1 |
| 17 | `#7b492e` | `oklch(45.84% 0.0788 48.85)` | Urban Auburn | white, 7.3 to 1 |
| 18 | `#744831` | `oklch(44.67% 0.0696 47.53)` | Cape Palliser | white, 7.7 to 1 |
| 19 | `#6d4735` | `oklch(43.60% 0.0591 46.60)` | Satin Soil | white, 8 to 1 |
| 20 | `#654739` | `oklch(42.64% 0.0479 45.35)` | Copra | white, 8.3 to 1 |
| 21 | `#5e463d` | `oklch(41.84% 0.0369 43.10)` | Northern Territory | white, 8.6 to 1 |
| 22 | `#584640` | `oklch(41.21% 0.0268 39.13)` | Mystic Taupe | white, 8.8 to 1 |
| 23 | `#534643` | `oklch(40.77% 0.0183 32.74)` | Railroad Ties | white, 8.9 to 1 |
| 24 | `#504746` | `oklch(40.57% 0.0121 23.24)` | Espresso Macchiato | white, 9 to 1 |
| 25 | `#4e4848` | `oklch(40.66% 0.0089 9.24)` | Private Black | white, 9 to 1 |
| 26 | `#4e494b` | `oklch(41.13% 0.0081 349.72)` | Emperor | white, 8.8 to 1 |
| 27 | `#504b4f` | `oklch(41.89% 0.0093 326.45)` | Noblesse | white, 8.5 to 1 |
| 28 | `#504e55` | `oklch(42.82% 0.0117 301.31)` | Blackened Pearl | white, 8.2 to 1 |
| 29 | `#50515a` | `oklch(43.81% 0.0148 276.18)` | Water Ouzel | white, 7.8 to 1 |
| 30 | `#4e555f` | `oklch(44.75% 0.0179 252.95)` | Dark Sea | white, 7.5 to 1 |
| 31 | `#4c5961` | `oklch(45.54% 0.0206 233.48)` | Fiord | white, 7.2 to 1 |
| 32 | `#4b5b61` | `oklch(46.06% 0.0220 219.67)` | Fiord | white, 7 to 1 |

## CSS

```css
background: linear-gradient(180deg, #d59338 0.0%, #d38f36 3.2%, #d08b34 6.5%, #cc8632 9.7%, #c88030 12.9%, #c47a2e 16.1%, #bf742d 19.4%, #b96f2c 22.6%, #b36a2c 25.8%, #ad652b 29.0%, #a6602a 32.3%, #9e5b29 35.5%, #975728 38.7%, #8f5328 41.9%, #884f29 45.2%, #814c2b 48.4%, #7b492e 51.6%, #744831 54.8%, #6d4735 58.1%, #654739 61.3%, #5e463d 64.5%, #584640 67.7%, #534643 71.0%, #504746 74.2%, #4e4848 77.4%, #4e494b 80.6%, #504b4f 83.9%, #504e55 87.1%, #50515a 90.3%, #4e555f 93.5%, #4c5961 96.8%, #4b5b61 100.0%);
background: linear-gradient(180deg in oklch, oklch(71.26% 0.1309 71.02) 0.0%, oklch(70.36% 0.1303 69.87) 3.2%, oklch(69.17% 0.1298 68.29) 6.5%, oklch(67.76% 0.1292 66.41) 9.7%, oklch(66.18% 0.1284 64.35) 12.9%, oklch(64.50% 0.1272 62.24) 16.1%, oklch(62.78% 0.1256 60.22) 19.4%, oklch(61.07% 0.1234 58.42) 22.6%, oklch(59.44% 0.1205 56.95) 25.8%, oklch(57.71% 0.1170 55.97) 29.0%, oklch(55.88% 0.1132 55.33) 32.3%, oklch(53.99% 0.1088 54.86) 35.5%, oklch(52.10% 0.1040 54.37) 38.7%, oklch(50.29% 0.0986 53.69) 41.9%, oklch(48.61% 0.0927 52.61) 45.2%, oklch(47.11% 0.0862 50.97) 48.4%, oklch(45.84% 0.0788 48.85) 51.6%, oklch(44.67% 0.0696 47.53) 54.8%, oklch(43.60% 0.0591 46.60) 58.1%, oklch(42.64% 0.0479 45.35) 61.3%, oklch(41.84% 0.0369 43.10) 64.5%, oklch(41.21% 0.0268 39.13) 67.7%, oklch(40.77% 0.0183 32.74) 71.0%, oklch(40.57% 0.0121 23.24) 74.2%, oklch(40.66% 0.0089 9.24) 77.4%, oklch(41.13% 0.0081 349.72) 80.6%, oklch(41.89% 0.0093 326.45) 83.9%, oklch(42.82% 0.0117 301.31) 87.1%, oklch(43.81% 0.0148 276.18) 90.3%, oklch(44.75% 0.0179 252.95) 93.5%, oklch(45.54% 0.0206 233.48) 96.8%, oklch(46.06% 0.0220 219.67) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.713 | 0.131 | 71 |
| 2 | 0.598 | 0.121 | 57.3 |
| 3 | 0.465 | 0.083 | 49.9 |
| 4 | 0.406 | 0.011 | 20.3 |
| 5 | 0.461 | 0.022 | -140.3 |

## In these collections

- [Orange gradients](https://grabient.com/orange-gradients)
- [Amber beer hall](https://grabient.com/amber-beer-hall)

## Other forms

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