# Orange and near-black shade palette

The Orange and near-black shade palette brings together orange and dark orange. The colors span a broad lightness range, combining strong color with clear contrast. Its bold and dramatic character suits brand mood boards and editorial graphics. Its darkest tone is dark orange, and its lightest tone is orange.

- Also called: Analogous orange, brown and black linear swatches
- Seed: `kWt4MpSzo_7qvP-onz_lYy_4`
- Page: https://grabient.com/kWt4MpSzo_7qvP-onz_lYy_4?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: light to dark, vivid, warm
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 7.3 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 | `#f38400` | `oklch(72.05% 0.1731 57.64)` | Tangerine Skin | black, 8 to 1 |
| 2 | `#ba6300` | `oklch(59.06% 0.1419 57.63)` | Camel Fur | black, 4.8 to 1 |
| 3 | `#854500` | `oklch(46.06% 0.1107 57.59)` | Chocolate Pancakes | white, 7.3 to 1 |
| 4 | `#4f2600` | `oklch(31.89% 0.0768 57.47)` | Brown Study | white, 13 to 1 |
| 5 | `#1a0b02` | `oklch(16.93% 0.0344 57.66)` | Soy Sauce | white, 19.2 to 1 |

## CSS

```css
background: linear-gradient(90deg, #f38400 0.000% 20.000%, #ba6300 20.000% 40.000%, #854500 40.000% 60.000%, #4f2600 60.000% 80.000%, #1a0b02 80.000% 100.000%);
background: linear-gradient(90deg, oklch(72.05% 0.1731 57.64) 0.000% 20.000%, oklch(59.06% 0.1419 57.63) 20.000% 40.000%, oklch(46.06% 0.1107 57.59) 40.000% 60.000%, oklch(31.89% 0.0768 57.47) 60.000% 80.000%, oklch(16.93% 0.0344 57.66) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.72 | 0.181 | 57.7 |
| 2 | 0.591 | 0.16 | 57.7 |
| 3 | 0.461 | 0.13 | 57.7 |
| 4 | 0.319 | 0.085 | 57.7 |
| 5 | 0.169 | 0.034 | 57.7 |

## In these collections

- [Shade swatches](https://grabient.com/shade-swatches)

## Other forms

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