# Sage and stone app background palette

The Sage and stone app background palette brings together green and light green. 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 green.

- Also called: Seamless gray and green radial gradient
- Seed: `kaVhJ0Oo6_dUUPzjDL815JAT0OwMtiUCA`
- Page: https://grabient.com/kaVhJ0Oo6_dUUPzjDL815JAT0OwMtiUCA?style=radialGradient&steps=64&angle=30
- Drawn as: radial gradient, 64 steps, 30 degrees
- Kinds: light center, neutral, cool, seamless
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 5.9 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 | `#2c3c34` | `oklch(33.86% 0.0248 163.12)` | Scarab | white, 11.6 to 1 |
| 2 | `#2d3e35` | `oklch(34.51% 0.0257 162.90)` | Celtic | white, 11.3 to 1 |
| 3 | `#2f4037` | `oklch(35.29% 0.0267 162.61)` | Roycroft Bottle Green | white, 11 to 1 |
| 4 | `#304239` | `oklch(36.20% 0.0280 162.29)` | Roycroft Bottle Green | white, 10.6 to 1 |
| 5 | `#32453c` | `oklch(37.23% 0.0295 161.92)` | Bracken Fern | white, 10.1 to 1 |
| 6 | `#35493e` | `oklch(38.36% 0.0310 161.51)` | Government Green | white, 9.7 to 1 |
| 7 | `#374c41` | `oklch(39.59% 0.0327 161.08)` | Pine Needle | white, 9.2 to 1 |
| 8 | `#3a5044` | `oklch(40.90% 0.0343 160.62)` | Amphitrite | white, 8.7 to 1 |
| 9 | `#3d5447` | `oklch(42.29% 0.0360 160.14)` | Leprechaun Green | white, 8.2 to 1 |
| 10 | `#40584b` | `oklch(43.76% 0.0377 159.65)` | Plantation | white, 7.6 to 1 |
| 11 | `#435d4e` | `oklch(45.28% 0.0392 159.15)` | Ethereal Woods | white, 7.2 to 1 |
| 12 | `#476252` | `oklch(46.88% 0.0407 158.64)` | Mission Jewel | white, 6.7 to 1 |
| 13 | `#4b6756` | `oklch(48.68% 0.0424 158.10)` | Jasper Park | white, 6.2 to 1 |
| 14 | `#506d5b` | `oklch(50.65% 0.0443 157.53)` | Kale Green | white, 5.7 to 1 |
| 15 | `#557360` | `oklch(52.74% 0.0463 156.94)` | Painted Turtle | white, 5.2 to 1 |
| 16 | `#5a7a66` | `oklch(54.92% 0.0483 156.33)` | Dark Sorrel | white, 4.7 to 1 |
| 17 | `#60816b` | `oklch(57.12% 0.0502 155.70)` | Jadite | black, 4.8 to 1 |
| 18 | `#668871` | `oklch(59.31% 0.0520 155.07)` | Dark Ivy | black, 5.3 to 1 |
| 19 | `#6b8e76` | `oklch(61.43% 0.0534 154.43)` | Ivy Wreath | black, 5.7 to 1 |
| 20 | `#71957b` | `oklch(63.44% 0.0545 153.80)` | Watercress | black, 6.2 to 1 |
| 21 | `#779a80` | `oklch(65.29% 0.0551 153.17)` | Mid Cypress | black, 6.7 to 1 |
| 22 | `#7c9f85` | `oklch(66.93% 0.0551 152.56)` | Aquadulce | black, 7.1 to 1 |
| 23 | `#81a489` | `oklch(68.45% 0.0544 151.91)` | Gallery Green | black, 7.5 to 1 |
| 24 | `#87a88e` | `oklch(69.94% 0.0529 151.21)` | OMGreen | black, 8 to 1 |
| 25 | `#8dac92` | `oklch(71.38% 0.0508 150.47)` | Natural Harmony | black, 8.4 to 1 |
| 26 | `#92b097` | `oklch(72.75% 0.0482 149.71)` | Andean Slate | black, 8.8 to 1 |
| 27 | `#98b39b` | `oklch(74.01% 0.0455 148.97)` | Garden District | black, 9.2 to 1 |
| 28 | `#9db6a0` | `oklch(75.15% 0.0427 148.27)` | Copper Patina | black, 9.6 to 1 |
| 29 | `#a1b9a3` | `oklch(76.13% 0.0400 147.63)` | Reeds | black, 9.9 to 1 |
| 30 | `#a5bba6` | `oklch(76.93% 0.0377 147.07)` | Attica | black, 10.2 to 1 |
| 31 | `#a8bca9` | `oklch(77.52% 0.0358 146.62)` | Rockfall | black, 10.4 to 1 |
| 32 | `#a9bdaa` | `oklch(77.87% 0.0347 146.31)` | Rockfall | black, 10.5 to 1 |
| 33 | `#aabeaa` | `oklch(77.97% 0.0344 146.16)` | Fresh Thyme | black, 10.6 to 1 |
| 34 | `#a9bdaa` | `oklch(77.82% 0.0350 146.13)` | Rockfall | black, 10.5 to 1 |
| 35 | `#a7bca8` | `oklch(77.44% 0.0361 146.22)` | Rockfall | black, 10.4 to 1 |
| 36 | `#a5bba6` | `oklch(76.86% 0.0378 146.41)` | Attica | black, 10.2 to 1 |
| 37 | `#a2b9a3` | `oklch(76.10% 0.0397 146.69)` | Reeds | black, 9.9 to 1 |
| 38 | `#9eb69f` | `oklch(75.17% 0.0419 147.04)` | Copper Patina | black, 9.6 to 1 |
| 39 | `#99b39c` | `oklch(74.11% 0.0440 147.44)` | Copper Patina | black, 9.3 to 1 |
| 40 | `#95b097` | `oklch(72.93% 0.0460 147.90)` | Nurture Green | black, 8.9 to 1 |
| 41 | `#90ac93` | `oklch(71.65% 0.0477 148.38)` | Natural Harmony | black, 8.5 to 1 |
| 42 | `#8ba88f` | `oklch(70.30% 0.0490 148.88)` | OMGreen | black, 8.1 to 1 |
| 43 | `#86a48b` | `oklch(68.90% 0.0496 149.39)` | Gallery Green | black, 7.7 to 1 |
| 44 | `#819f86` | `oklch(67.34% 0.0497 149.94)` | Vineyard | black, 7.2 to 1 |
| 45 | `#7c9a81` | `oklch(65.53% 0.0494 150.56)` | Dinosaur | black, 6.7 to 1 |
| 46 | `#76947c` | `oklch(63.54% 0.0488 151.25)` | Mid Cypress | black, 6.2 to 1 |
| 47 | `#6f8d76` | `oklch(61.42% 0.0480 151.99)` | Ivy Wreath | black, 5.7 to 1 |
| 48 | `#698671` | `oklch(59.22% 0.0470 152.76)` | Dark Ivy | black, 5.2 to 1 |
| 49 | `#63806b` | `oklch(56.99% 0.0458 153.54)` | Jadite | black, 4.8 to 1 |
| 50 | `#5d7965` | `oklch(54.78% 0.0445 154.32)` | Swanndri | white, 4.7 to 1 |
| 51 | `#577360` | `oklch(52.66% 0.0432 155.08)` | Painted Turtle | white, 5.2 to 1 |
| 52 | `#526d5b` | `oklch(50.66% 0.0418 155.80)` | Green Bayou | white, 5.7 to 1 |
| 53 | `#4d6757` | `oklch(48.85% 0.0406 156.47)` | Jasper Park | white, 6.1 to 1 |
| 54 | `#496253` | `oklch(47.25% 0.0393 157.09)` | Cucumber Green | white, 6.6 to 1 |
| 55 | `#465e4f` | `oklch(45.73% 0.0380 157.70)` | Vine Leaf | white, 7 to 1 |
| 56 | `#425a4c` | `oklch(44.26% 0.0364 158.30)` | Woodlawn Green | white, 7.5 to 1 |
| 57 | `#3f5548` | `oklch(42.87% 0.0348 158.90)` | Deep Jungle | white, 8 to 1 |
| 58 | `#3c5245` | `oklch(41.55% 0.0331 159.47)` | Pine Forest | white, 8.4 to 1 |
| 59 | `#3a4e43` | `oklch(40.33% 0.0314 160.02)` | Amphitrite | white, 8.9 to 1 |
| 60 | `#384b40` | `oklch(39.20% 0.0297 160.54)` | Dard Hunter Green | white, 9.3 to 1 |
| 61 | `#36483e` | `oklch(38.17% 0.0282 161.01)` | Exclusive Green | white, 9.7 to 1 |
| 62 | `#34453c` | `oklch(37.26% 0.0268 161.42)` | Bracken Fern | white, 10.1 to 1 |
| 63 | `#32433a` | `oklch(36.48% 0.0257 161.78)` | Bracken Fern | white, 10.5 to 1 |
| 64 | `#314139` | `oklch(35.83% 0.0248 162.07)` | Roycroft Bottle Green | white, 10.8 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #2c3c34 0.0%, #2d3e35 1.6%, #2f4037 3.2%, #304239 4.8%, #32453c 6.3%, #35493e 7.9%, #374c41 9.5%, #3a5044 11.1%, #3d5447 12.7%, #40584b 14.3%, #435d4e 15.9%, #476252 17.5%, #4b6756 19.0%, #506d5b 20.6%, #557360 22.2%, #5a7a66 23.8%, #60816b 25.4%, #668871 27.0%, #6b8e76 28.6%, #71957b 30.2%, #779a80 31.7%, #7c9f85 33.3%, #81a489 34.9%, #87a88e 36.5%, #8dac92 38.1%, #92b097 39.7%, #98b39b 41.3%, #9db6a0 42.9%, #a1b9a3 44.4%, #a5bba6 46.0%, #a8bca9 47.6%, #a9bdaa 49.2%, #aabeaa 50.8%, #a9bdaa 52.4%, #a7bca8 54.0%, #a5bba6 55.6%, #a2b9a3 57.1%, #9eb69f 58.7%, #99b39c 60.3%, #95b097 61.9%, #90ac93 63.5%, #8ba88f 65.1%, #86a48b 66.7%, #819f86 68.3%, #7c9a81 69.8%, #76947c 71.4%, #6f8d76 73.0%, #698671 74.6%, #63806b 76.2%, #5d7965 77.8%, #577360 79.4%, #526d5b 81.0%, #4d6757 82.5%, #496253 84.1%, #465e4f 85.7%, #425a4c 87.3%, #3f5548 88.9%, #3c5245 90.5%, #3a4e43 92.1%, #384b40 93.7%, #36483e 95.2%, #34453c 96.8%, #32433a 98.4%, #314139 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(33.86% 0.0248 163.12) 0.0%, oklch(34.51% 0.0257 162.90) 1.6%, oklch(35.29% 0.0267 162.61) 3.2%, oklch(36.20% 0.0280 162.29) 4.8%, oklch(37.23% 0.0295 161.92) 6.3%, oklch(38.36% 0.0310 161.51) 7.9%, oklch(39.59% 0.0327 161.08) 9.5%, oklch(40.90% 0.0343 160.62) 11.1%, oklch(42.29% 0.0360 160.14) 12.7%, oklch(43.76% 0.0377 159.65) 14.3%, oklch(45.28% 0.0392 159.15) 15.9%, oklch(46.88% 0.0407 158.64) 17.5%, oklch(48.68% 0.0424 158.10) 19.0%, oklch(50.65% 0.0443 157.53) 20.6%, oklch(52.74% 0.0463 156.94) 22.2%, oklch(54.92% 0.0483 156.33) 23.8%, oklch(57.12% 0.0502 155.70) 25.4%, oklch(59.31% 0.0520 155.07) 27.0%, oklch(61.43% 0.0534 154.43) 28.6%, oklch(63.44% 0.0545 153.80) 30.2%, oklch(65.29% 0.0551 153.17) 31.7%, oklch(66.93% 0.0551 152.56) 33.3%, oklch(68.45% 0.0544 151.91) 34.9%, oklch(69.94% 0.0529 151.21) 36.5%, oklch(71.38% 0.0508 150.47) 38.1%, oklch(72.75% 0.0482 149.71) 39.7%, oklch(74.01% 0.0455 148.97) 41.3%, oklch(75.15% 0.0427 148.27) 42.9%, oklch(76.13% 0.0400 147.63) 44.4%, oklch(76.93% 0.0377 147.07) 46.0%, oklch(77.52% 0.0358 146.62) 47.6%, oklch(77.87% 0.0347 146.31) 49.2%, oklch(77.97% 0.0344 146.16) 50.8%, oklch(77.82% 0.0350 146.13) 52.4%, oklch(77.44% 0.0361 146.22) 54.0%, oklch(76.86% 0.0378 146.41) 55.6%, oklch(76.10% 0.0397 146.69) 57.1%, oklch(75.17% 0.0419 147.04) 58.7%, oklch(74.11% 0.0440 147.44) 60.3%, oklch(72.93% 0.0460 147.90) 61.9%, oklch(71.65% 0.0477 148.38) 63.5%, oklch(70.30% 0.0490 148.88) 65.1%, oklch(68.90% 0.0496 149.39) 66.7%, oklch(67.34% 0.0497 149.94) 68.3%, oklch(65.53% 0.0494 150.56) 69.8%, oklch(63.54% 0.0488 151.25) 71.4%, oklch(61.42% 0.0480 151.99) 73.0%, oklch(59.22% 0.0470 152.76) 74.6%, oklch(56.99% 0.0458 153.54) 76.2%, oklch(54.78% 0.0445 154.32) 77.8%, oklch(52.66% 0.0432 155.08) 79.4%, oklch(50.66% 0.0418 155.80) 81.0%, oklch(48.85% 0.0406 156.47) 82.5%, oklch(47.25% 0.0393 157.09) 84.1%, oklch(45.73% 0.0380 157.70) 85.7%, oklch(44.26% 0.0364 158.30) 87.3%, oklch(42.87% 0.0348 158.90) 88.9%, oklch(41.55% 0.0331 159.47) 90.5%, oklch(40.33% 0.0314 160.02) 92.1%, oklch(39.20% 0.0297 160.54) 93.7%, oklch(38.17% 0.0282 161.01) 95.2%, oklch(37.26% 0.0268 161.42) 96.8%, oklch(36.48% 0.0257 161.78) 98.4%, oklch(35.83% 0.0248 162.07) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.339 | 0.025 | 163.1 |
| 2 | 0.461 | 0.04 | 158.9 |
| 3 | 0.669 | 0.055 | 152.6 |
| 4 | 0.78 | 0.034 | 146.2 |
| 5 | 0.689 | 0.05 | 149.4 |
| 6 | 0.48 | 0.04 | 156.8 |
| 7 | 0.358 | 0.025 | 162.1 |

## In these collections

- [App background gradients](https://grabient.com/app-background-gradients)

## Other forms

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