# Sage light ui palette

The Sage light ui palette brings together green and light green. The colors span a narrow lightness range, combining moderate color with gentle contrast. Its light and open character suits website sections and interface mockups. Its darkest tone is green, and its lightest tone is light green.

- Also called: Pastel analogous green, blue and teal angular gradient
- Seed: `kUrT5q26LA3KXwXjIr7g`
- Page: https://grabient.com/kUrT5q26LA3KXwXjIr7g?style=angularGradient&steps=48&angle=120
- Drawn as: angular gradient, 48 steps, 120 degrees
- Kinds: pastel, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 2.1 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 | `#72a87c` | `oklch(68.11% 0.0854 149.77)` | Primavera | black, 7.5 to 1 |
| 2 | `#72a87d` | `oklch(68.22% 0.0859 150.02)` | Primavera | black, 7.6 to 1 |
| 3 | `#71a97d` | `oklch(68.32% 0.0865 150.31)` | Light Grass Green | black, 7.6 to 1 |
| 4 | `#71a97d` | `oklch(68.41% 0.0873 150.64)` | Light Grass Green | black, 7.6 to 1 |
| 5 | `#70aa7e` | `oklch(68.49% 0.0882 151.00)` | Light Grass Green | black, 7.7 to 1 |
| 6 | `#6faa7e` | `oklch(68.58% 0.0892 151.40)` | Light Grass Green | black, 7.7 to 1 |
| 7 | `#6fab7f` | `oklch(68.69% 0.0902 151.82)` | Light Grass Green | black, 7.7 to 1 |
| 8 | `#6eab7f` | `oklch(68.82% 0.0913 152.27)` | Light Grass Green | black, 7.8 to 1 |
| 9 | `#6dac80` | `oklch(68.98% 0.0923 152.75)` | Morning Forest | black, 7.8 to 1 |
| 10 | `#6dad81` | `oklch(69.17% 0.0933 153.26)` | Morning Forest | black, 7.9 to 1 |
| 11 | `#6cae82` | `oklch(69.41% 0.0941 153.79)` | Morning Forest | black, 8 to 1 |
| 12 | `#6caf83` | `oklch(69.71% 0.0948 154.34)` | Morning Forest | black, 8.1 to 1 |
| 13 | `#6cb084` | `oklch(70.07% 0.0954 154.91)` | Lily Pads | black, 8.2 to 1 |
| 14 | `#6cb286` | `oklch(70.50% 0.0957 155.51)` | Lily Pads | black, 8.3 to 1 |
| 15 | `#6db489` | `oklch(71.01% 0.0957 156.11)` | Lily Pads | black, 8.5 to 1 |
| 16 | `#6eb68b` | `oklch(71.60% 0.0954 156.74)` | Water Fern | black, 8.6 to 1 |
| 17 | `#70b88e` | `oklch(72.29% 0.0948 157.38)` | Water Fern | black, 8.9 to 1 |
| 18 | `#73ba92` | `oklch(73.18% 0.0937 158.12)` | Mountain Lake Green | black, 9.2 to 1 |
| 19 | `#77be97` | `oklch(74.27% 0.0921 158.97)` | Mountain Lake Green | black, 9.5 to 1 |
| 20 | `#7bc19c` | `oklch(75.51% 0.0902 159.89)` | Willow Hedge | black, 9.9 to 1 |
| 21 | `#80c6a2` | `oklch(76.87% 0.0879 160.87)` | Foul Green | black, 10.4 to 1 |
| 22 | `#85caa8` | `oklch(78.32% 0.0854 161.90)` | Park Green Flat | black, 11 to 1 |
| 23 | `#8bceae` | `oklch(79.83% 0.0827 162.94)` | Vile Green | black, 11.5 to 1 |
| 24 | `#91d3b4` | `oklch(81.35% 0.0800 163.98)` | Vista Blue | black, 12.1 to 1 |
| 25 | `#97d7ba` | `oklch(82.86% 0.0773 165.00)` | Green Jewel | black, 12.7 to 1 |
| 26 | `#9ddcc0` | `oklch(84.32% 0.0746 165.98)` | Almost Aqua | black, 13.3 to 1 |
| 27 | `#a2e0c6` | `oklch(85.70% 0.0721 166.89)` | Reef Green | black, 13.9 to 1 |
| 28 | `#a7e3cb` | `oklch(86.95% 0.0699 167.72)` | Turquoise Tower | black, 14.5 to 1 |
| 29 | `#ace7cf` | `oklch(88.05% 0.0679 168.45)` | Sweet Aqua | black, 15 to 1 |
| 30 | `#b0e9d3` | `oklch(88.96% 0.0664 169.05)` | Martian Haze | black, 15.4 to 1 |
| 31 | `#b2ebd6` | `oklch(89.65% 0.0653 169.50)` | Faint Clover | black, 15.8 to 1 |
| 32 | `#b4edd8` | `oklch(90.08% 0.0648 169.79)` | Faint Clover | black, 16 to 1 |
| 33 | `#b4edd8` | `oklch(90.22% 0.0649 169.89)` | Faint Clover | black, 16 to 1 |
| 34 | `#b3edd7` | `oklch(90.09% 0.0656 169.80)` | Faint Clover | black, 16 to 1 |
| 35 | `#b2ecd6` | `oklch(89.71% 0.0667 169.54)` | Faint Clover | black, 15.8 to 1 |
| 36 | `#afead4` | `oklch(89.13% 0.0683 169.14)` | Martian Haze | black, 15.5 to 1 |
| 37 | `#abe8d0` | `oklch(88.37% 0.0703 168.61)` | Sweet Aqua | black, 15.2 to 1 |
| 38 | `#a7e6cd` | `oklch(87.47% 0.0725 167.99)` | Tropical | black, 14.8 to 1 |
| 39 | `#a2e3c8` | `oklch(86.46% 0.0750 167.29)` | Reef Green | black, 14.3 to 1 |
| 40 | `#9ee0c4` | `oklch(85.37% 0.0776 166.54)` | Reef Green | black, 13.8 to 1 |
| 41 | `#98ddbf` | `oklch(84.25% 0.0803 165.76)` | Birthday King | black, 13.3 to 1 |
| 42 | `#93d9ba` | `oklch(83.11% 0.0829 164.97)` | Green Jewel | black, 12.9 to 1 |
| 43 | `#8fd6b6` | `oklch(82.00% 0.0855 164.20)` | Vista Blue | black, 12.4 to 1 |
| 44 | `#8ad3b1` | `oklch(80.94% 0.0880 163.46)` | Tropical Trail | black, 12 to 1 |
| 45 | `#86d0ad` | `oklch(79.98% 0.0903 162.79)` | Pharaoh’s Jade | black, 11.6 to 1 |
| 46 | `#82cea9` | `oklch(79.13% 0.0923 162.21)` | Marooned | black, 11.3 to 1 |
| 47 | `#7fcca6` | `oklch(78.45% 0.0939 161.73)` | Aquamarine Ocean | black, 11 to 1 |
| 48 | `#7dcaa4` | `oklch(77.95% 0.0951 161.39)` | Foul Green | black, 10.9 to 1 |

## CSS

```css
background: conic-gradient(from 120deg, #72a87c 0.0%, #72a87d 2.1%, #71a97d 4.3%, #71a97d 6.4%, #70aa7e 8.5%, #6faa7e 10.6%, #6fab7f 12.8%, #6eab7f 14.9%, #6dac80 17.0%, #6dad81 19.1%, #6cae82 21.3%, #6caf83 23.4%, #6cb084 25.5%, #6cb286 27.7%, #6db489 29.8%, #6eb68b 31.9%, #70b88e 34.0%, #73ba92 36.2%, #77be97 38.3%, #7bc19c 40.4%, #80c6a2 42.6%, #85caa8 44.7%, #8bceae 46.8%, #91d3b4 48.9%, #97d7ba 51.1%, #9ddcc0 53.2%, #a2e0c6 55.3%, #a7e3cb 57.4%, #ace7cf 59.6%, #b0e9d3 61.7%, #b2ebd6 63.8%, #b4edd8 66.0%, #b4edd8 68.1%, #b3edd7 70.2%, #b2ecd6 72.3%, #afead4 74.5%, #abe8d0 76.6%, #a7e6cd 78.7%, #a2e3c8 80.9%, #9ee0c4 83.0%, #98ddbf 85.1%, #93d9ba 87.2%, #8fd6b6 89.4%, #8ad3b1 91.5%, #86d0ad 93.6%, #82cea9 95.7%, #7fcca6 97.9%, #7dcaa4 100.0%);
background: conic-gradient(from 120deg in oklch, oklch(68.11% 0.0854 149.77) 0.0%, oklch(68.22% 0.0859 150.02) 2.1%, oklch(68.32% 0.0865 150.31) 4.3%, oklch(68.41% 0.0873 150.64) 6.4%, oklch(68.49% 0.0882 151.00) 8.5%, oklch(68.58% 0.0892 151.40) 10.6%, oklch(68.69% 0.0902 151.82) 12.8%, oklch(68.82% 0.0913 152.27) 14.9%, oklch(68.98% 0.0923 152.75) 17.0%, oklch(69.17% 0.0933 153.26) 19.1%, oklch(69.41% 0.0941 153.79) 21.3%, oklch(69.71% 0.0948 154.34) 23.4%, oklch(70.07% 0.0954 154.91) 25.5%, oklch(70.50% 0.0957 155.51) 27.7%, oklch(71.01% 0.0957 156.11) 29.8%, oklch(71.60% 0.0954 156.74) 31.9%, oklch(72.29% 0.0948 157.38) 34.0%, oklch(73.18% 0.0937 158.12) 36.2%, oklch(74.27% 0.0921 158.97) 38.3%, oklch(75.51% 0.0902 159.89) 40.4%, oklch(76.87% 0.0879 160.87) 42.6%, oklch(78.32% 0.0854 161.90) 44.7%, oklch(79.83% 0.0827 162.94) 46.8%, oklch(81.35% 0.0800 163.98) 48.9%, oklch(82.86% 0.0773 165.00) 51.1%, oklch(84.32% 0.0746 165.98) 53.2%, oklch(85.70% 0.0721 166.89) 55.3%, oklch(86.95% 0.0699 167.72) 57.4%, oklch(88.05% 0.0679 168.45) 59.6%, oklch(88.96% 0.0664 169.05) 61.7%, oklch(89.65% 0.0653 169.50) 63.8%, oklch(90.08% 0.0648 169.79) 66.0%, oklch(90.22% 0.0649 169.89) 68.1%, oklch(90.09% 0.0656 169.80) 70.2%, oklch(89.71% 0.0667 169.54) 72.3%, oklch(89.13% 0.0683 169.14) 74.5%, oklch(88.37% 0.0703 168.61) 76.6%, oklch(87.47% 0.0725 167.99) 78.7%, oklch(86.46% 0.0750 167.29) 80.9%, oklch(85.37% 0.0776 166.54) 83.0%, oklch(84.25% 0.0803 165.76) 85.1%, oklch(83.11% 0.0829 164.97) 87.2%, oklch(82.00% 0.0855 164.20) 89.4%, oklch(80.94% 0.0880 163.46) 91.5%, oklch(79.98% 0.0903 162.79) 93.6%, oklch(79.13% 0.0923 162.21) 95.7%, oklch(78.45% 0.0939 161.73) 97.9%, oklch(77.95% 0.0951 161.39) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.681 | 0.085 | 149.8 |
| 2 | 0.72 | 0.095 | 157.2 |
| 3 | 0.902 | 0.065 | 169.8 |
| 4 | 0.78 | 0.095 | 161.4 |

## In these collections

- [Light UI gradients](https://grabient.com/light-ui-gradients)

## Other forms

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