# Teal and sage ui palette

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

- Also called: Black, gray and teal radial swatches
- Seed: `kWPBCeMIm-NaNPZpCTyx5zDA`
- Page: https://grabient.com/kWPBCeMIm-NaNPZpCTyx5zDA?style=radialSwatches&steps=5&angle=0
- Drawn as: radial swatches, 5 steps, 0 degrees
- Kinds: light center, neutral, cool
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 9.7 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 | `#122126` | `oklch(23.62% 0.0220 222.19)` | Crow Feather | white, 16.5 to 1 |
| 2 | `#32474a` | `oklch(38.19% 0.0262 207.39)` | Winter Balsam | white, 9.8 to 1 |
| 3 | `#80a09c` | `oklch(68.11% 0.0358 187.31)` | Gnome | black, 7.4 to 1 |
| 4 | `#b9ccc1` | `oklch(82.68% 0.0248 159.84)` | Antiqued Aqua | black, 12.4 to 1 |
| 5 | `#34847c` | `oklch(56.30% 0.0785 186.26)` | Celadon Green | black, 4.7 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #122126 0.000% 20.000%, #32474a 20.000% 40.000%, #80a09c 40.000% 60.000%, #b9ccc1 60.000% 80.000%, #34847c 80.000% 100.000%);
background: radial-gradient(circle at 50% 50%, oklch(23.62% 0.0220 222.19) 0.000% 20.000%, oklch(38.19% 0.0262 207.39) 20.000% 40.000%, oklch(68.11% 0.0358 187.31) 40.000% 60.000%, oklch(82.68% 0.0248 159.84) 60.000% 80.000%, oklch(56.30% 0.0785 186.26) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.236 | 0.022 | 222.2 |
| 2 | 0.382 | 0.026 | 207.4 |
| 3 | 0.681 | 0.036 | 187.3 |
| 4 | 0.827 | 0.025 | 159.8 |
| 5 | 0.563 | 0.079 | 186.3 |

## In these collections

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

## Other forms

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