# Stone and sage ui palette

The Stone and sage ui palette brings together light gray, light green, green, teal, and light teal. The colors span a moderate lightness range, combining restrained color with clear contrast. Its balanced and composed character suits website sections and interface mockups. Its darkest tone is green, and its lightest tone is light gray.

- Also called: Monochrome gray and teal linear swatches
- Seed: `kW3wlTXwlFL0Pwa-GsLYQ49o`
- Page: https://grabient.com/kW3wlTXwlFL0Pwa-GsLYQ49o?style=linearSwatches&steps=5
- Drawn as: linear swatches, 5 steps, 90 degrees
- Kinds: dark center, muted, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 4.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 | `#d6d8cf` | `oklch(87.80% 0.0124 116.72)` | Ancient Kingdom | black, 14.5 to 1 |
| 2 | `#a0b2a8` | `oklch(74.80% 0.0248 161.10)` | Life Aquatic | black, 9.4 to 1 |
| 3 | `#43665d` | `oklch(48.03% 0.0427 175.90)` | Earhart Emerald | white, 6.3 to 1 |
| 4 | `#1e6c70` | `oklch(48.82% 0.0730 200.20)` | Peacock Plume | white, 6 to 1 |
| 5 | `#98bbb4` | `oklch(76.38% 0.0386 181.18)` | Lap Pool Blue | black, 10 to 1 |

## CSS

```css
background: linear-gradient(90deg, #d6d8cf 0.000% 20.000%, #a0b2a8 20.000% 40.000%, #43665d 40.000% 60.000%, #1e6c70 60.000% 80.000%, #98bbb4 80.000% 100.000%);
background: linear-gradient(90deg, oklch(87.80% 0.0124 116.72) 0.000% 20.000%, oklch(74.80% 0.0248 161.10) 20.000% 40.000%, oklch(48.03% 0.0427 175.90) 40.000% 60.000%, oklch(48.82% 0.0730 200.20) 60.000% 80.000%, oklch(76.38% 0.0386 181.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.878 | 0.012 | 116.7 |
| 2 | 0.748 | 0.025 | 161.1 |
| 3 | 0.48 | 0.043 | 175.9 |
| 4 | 0.488 | 0.073 | 200.2 |
| 5 | 0.764 | 0.039 | 181.2 |

## In these collections

- [UI swatches](https://grabient.com/ui-swatches)

## Other forms

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