# Orange tint palette

The Orange tint palette brings together orange, light orange, pale orange, and off-white. The colors span a moderate lightness range, combining strong color with gentle contrast. Its light and open character suits brand mood boards and editorial graphics. Its darkest tone is orange, and its lightest tone is off-white.

- Also called: Monochrome orange and white linear swatches
- Seed: `kWqIMm3jS_-gmP_yl7__Ie_4`
- Page: https://grabient.com/kWqIMm3jS_-gmP_yl7__Ie_4?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: dark to light, vivid, light, warm
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 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 | `#dd7100` | `oklch(66.14% 0.1655 54.12)` | Gold Orange | black, 6.4 to 1 |
| 2 | `#f08f49` | `oklch(74.02% 0.1447 54.14)` | Melon Orange | black, 8.7 to 1 |
| 3 | `#f9b182` | `oklch(81.89% 0.1047 54.14)` | Autumn Mist | black, 11.6 to 1 |
| 4 | `#ffd5ba` | `oklch(90.16% 0.0595 54.15)` | Mom’s Love | black, 15.4 to 1 |
| 5 | `#fff7f2` | `oklch(98.03% 0.0112 54.18)` | Sugar Milk | black, 19.7 to 1 |

## CSS

```css
background: linear-gradient(90deg, #dd7100 0.000% 20.000%, #f08f49 20.000% 40.000%, #f9b182 40.000% 60.000%, #ffd5ba 60.000% 80.000%, #fff7f2 80.000% 100.000%);
background: linear-gradient(90deg, oklch(66.14% 0.1655 54.12) 0.000% 20.000%, oklch(74.02% 0.1447 54.14) 20.000% 40.000%, oklch(81.89% 0.1047 54.14) 40.000% 60.000%, oklch(90.16% 0.0595 54.15) 60.000% 80.000%, oklch(98.03% 0.0112 54.18) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.661 | 0.181 | 54.1 |
| 2 | 0.74 | 0.145 | 54.1 |
| 3 | 0.819 | 0.105 | 54.1 |
| 4 | 0.902 | 0.065 | 54.1 |
| 5 | 0.98 | 0.021 | 54.1 |

## In these collections

- [Tint swatches](https://grabient.com/tint-swatches)

## Other forms

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