# Off-white, sage and orange presentation palette

The Off-white, sage and orange presentation palette brings together off-white, teal, green, red, and orange. The colors span a broad lightness range, combining moderate color with clear contrast. Its balanced and composed character suits presentation backgrounds and section dividers. Its darkest tone is teal, and its lightest tone is off-white.

- Also called: Gray, navy, purple and orange linear swatches
- Seed: `kW7QCjrww-0QUN7HoK2VjRIY`
- Page: https://grabient.com/kW7QCjrww-0QUN7HoK2VjRIY?style=linearSwatches&steps=5&angle=270
- Drawn as: linear swatches, 5 steps, 270 degrees
- Kinds: dark center
- Hues: analogous
- Contrast of its darkest and lightest colors: 8.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 | `#e9e9e9` | `oklch(93.31% 0.0000 89.88)` | Snowbank | black, 17.2 to 1 |
| 2 | `#2c444c` | `oklch(37.01% 0.0331 220.41)` | Little Mermaid | white, 10.3 to 1 |
| 3 | `#56775d` | `oklch(53.54% 0.0551 150.67)` | Elm Green | white, 5 to 1 |
| 4 | `#9f5e78` | `oklch(56.30% 0.0896 355.32)` | Rose Wine | white, 4.8 to 1 |
| 5 | `#d18318` | `oklch(67.72% 0.1433 67.18)` | Copious Caramel | black, 6.9 to 1 |

## CSS

```css
background: linear-gradient(270deg, #e9e9e9 0.000% 20.000%, #2c444c 20.000% 40.000%, #56775d 40.000% 60.000%, #9f5e78 60.000% 80.000%, #d18318 80.000% 100.000%);
background: linear-gradient(270deg, oklch(93.31% 0.0000 89.88) 0.000% 20.000%, oklch(37.01% 0.0331 220.41) 20.000% 40.000%, oklch(53.54% 0.0551 150.67) 40.000% 60.000%, oklch(56.30% 0.0896 355.32) 60.000% 80.000%, oklch(67.72% 0.1433 67.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.933 | 0 | 229.9 |
| 2 | 0.37 | 0.033 | 220.4 |
| 3 | 0.535 | 0.055 | 150.7 |
| 4 | 0.563 | 0.09 | -4.7 |
| 5 | 0.677 | 0.143 | 67.2 |

## In these collections

- [Presentation swatches](https://grabient.com/presentation-swatches)

## Other forms

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