# Wine clay and sage facets Black, brown, gray and dark green angular swatches with 24 colors: #24191a, #2c1c1e, #372123, #442728, #522c2e, #5e3234, #6a3739, #763d3f, #824345, #8e4c4b, #9c5a51, #ac6c5b, #b98066, #c29170, #c39c75, #bca076, #b09f76, #a09b74, #909471, #808b6c, #6d7e63, #5a6f57, #49614d, #3e5846. Edit it and copy or download CSS, SVG, PNG or shader code. - Also called: Black, brown, gray and dark green angular swatches - Seed: `kYOg0JLhZAkAgwJbGkS0ZHGTcPxG` - Page: https://grabient.com/kYOg0JLhZAkAgwJbGkS0ZHGTcPxG?style=angularSwatches&steps=24&angle=135 - Drawn as: angular swatches, 24 steps, 135 degrees - Kinds: light center, muted, warm - Hues: wide - Contrast of its darkest and lightest colors: 6.8 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 | `#24191a` | `oklch(22.83% 0.0179 12.66)` | Kurobeni | white, 17 to 1 | | 2 | `#2c1c1e` | `oklch(24.84% 0.0246 13.45)` | Weathervane | white, 16.2 to 1 | | 3 | `#372123` | `oklch(27.68% 0.0343 14.59)` | Antique Burgundy | white, 14.9 to 1 | | 4 | `#442728` | `oklch(30.98% 0.0451 15.89)` | Polished Mahogany | white, 13.4 to 1 | | 5 | `#522c2e` | `oklch(34.34% 0.0554 17.21)` | Purple Kite | white, 11.9 to 1 | | 6 | `#5e3234` | `oklch(37.40% 0.0638 18.28)` | Rampant Rhubarb | white, 10.5 to 1 | | 7 | `#6a3739` | `oklch(40.25% 0.0720 18.42)` | Plum Sauce | white, 9.4 to 1 | | 8 | `#763d3f` | `oklch(43.11% 0.0796 18.43)` | Fruitful Orchard | white, 8.4 to 1 | | 9 | `#824345` | `oklch(46.17% 0.0857 19.36)` | Red Red Wine | white, 7.3 to 1 | | 10 | `#8e4c4b` | `oklch(49.64% 0.0893 22.30)` | Moroccan Ruby | white, 6.3 to 1 | | 11 | `#9c5a51` | `oklch(54.03% 0.0893 27.97)` | Spicy Cayenne | white, 5.2 to 1 | | 12 | `#ac6c5b` | `oklch(59.54% 0.0862 35.77)` | Bantam Egg | black, 5 to 1 | | 13 | `#b98066` | `oklch(65.09% 0.0812 45.05)` | Western Pink | black, 6.3 to 1 | | 14 | `#c29170` | `oklch(69.57% 0.0757 55.15)` | Sunset Cloud | black, 7.5 to 1 | | 15 | `#c39c75` | `oklch(71.91% 0.0707 65.46)` | Tan Plan | black, 8.3 to 1 | | 16 | `#bca076` | `oklch(72.09% 0.0655 76.86)` | Mesa | black, 8.4 to 1 | | 17 | `#b09f76` | `oklch(70.75% 0.0597 89.21)` | Golden Sage | black, 8 to 1 | | 18 | `#a09b74` | `oklch(68.36% 0.0542 101.60)` | Curly Grass | black, 7.4 to 1 | | 19 | `#909471` | `oklch(65.41% 0.0496 113.12)` | Dry Hemlock | black, 6.6 to 1 | | 20 | `#808b6c` | `oklch(61.96% 0.0466 123.30)` | Canaletto | black, 5.8 to 1 | | 21 | `#6d7e63` | `oklch(57.08% 0.0448 133.18)` | Emerald City | black, 4.8 to 1 | | 22 | `#5a6f57` | `oklch(51.65% 0.0438 142.27)` | Cactus | white, 5.4 to 1 | | 23 | `#49614d` | `oklch(46.70% 0.0432 149.87)` | Mission Jewel | white, 6.7 to 1 | | 24 | `#3e5846` | `oklch(43.31% 0.0427 155.32)` | Royal Hunter Green | white, 7.8 to 1 | ## CSS ```css background: conic-gradient(from 135deg, #24191a 0.000% 4.167%, #2c1c1e 4.167% 8.333%, #372123 8.333% 12.500%, #442728 12.500% 16.667%, #522c2e 16.667% 20.833%, #5e3234 20.833% 25.000%, #6a3739 25.000% 29.167%, #763d3f 29.167% 33.333%, #824345 33.333% 37.500%, #8e4c4b 37.500% 41.667%, #9c5a51 41.667% 45.833%, #ac6c5b 45.833% 50.000%, #b98066 50.000% 54.167%, #c29170 54.167% 58.333%, #c39c75 58.333% 62.500%, #bca076 62.500% 66.667%, #b09f76 66.667% 70.833%, #a09b74 70.833% 75.000%, #909471 75.000% 79.167%, #808b6c 79.167% 83.333%, #6d7e63 83.333% 87.500%, #5a6f57 87.500% 91.667%, #49614d 91.667% 95.833%, #3e5846 95.833% 100.000%); background: conic-gradient(from 135deg, oklch(22.83% 0.0179 12.66) 0.000% 4.167%, oklch(24.84% 0.0246 13.45) 4.167% 8.333%, oklch(27.68% 0.0343 14.59) 8.333% 12.500%, oklch(30.98% 0.0451 15.89) 12.500% 16.667%, oklch(34.34% 0.0554 17.21) 16.667% 20.833%, oklch(37.40% 0.0638 18.28) 20.833% 25.000%, oklch(40.25% 0.0720 18.42) 25.000% 29.167%, oklch(43.11% 0.0796 18.43) 29.167% 33.333%, oklch(46.17% 0.0857 19.36) 33.333% 37.500%, oklch(49.64% 0.0893 22.30) 37.500% 41.667%, oklch(54.03% 0.0893 27.97) 41.667% 45.833%, oklch(59.54% 0.0862 35.77) 45.833% 50.000%, oklch(65.09% 0.0812 45.05) 50.000% 54.167%, oklch(69.57% 0.0757 55.15) 54.167% 58.333%, oklch(71.91% 0.0707 65.46) 58.333% 62.500%, oklch(72.09% 0.0655 76.86) 62.500% 66.667%, oklch(70.75% 0.0597 89.21) 66.667% 70.833%, oklch(68.36% 0.0542 101.60) 70.833% 75.000%, oklch(65.41% 0.0496 113.12) 75.000% 79.167%, oklch(61.96% 0.0466 123.30) 79.167% 83.333%, oklch(57.08% 0.0448 133.18) 83.333% 87.500%, oklch(51.65% 0.0438 142.27) 87.500% 91.667%, oklch(46.70% 0.0432 149.87) 91.667% 95.833%, oklch(43.31% 0.0427 155.32) 95.833% 100.000%); ``` ## Keyframes 6 OKLCH keyframes joined by a Catmull-Rom spline. Hue is unwrapped degrees. | Keyframe | Lightness | Chroma | Hue | | --- | --- | --- | --- | | 1 | 0.228 | 0.018 | 12.7 | | 2 | 0.362 | 0.061 | 17.9 | | 3 | 0.504 | 0.09 | 23.2 | | 4 | 0.717 | 0.072 | 63.4 | | 5 | 0.642 | 0.048 | 117.3 | | 6 | 0.433 | 0.043 | 155.3 | ## In these collections - [Poetcore](https://grabient.com/poetcore) ## Other forms - [JSON](https://grabient.com/kYOg0JLhZAkAgwJbGkS0ZHGTcPxG.json?style=angularSwatches&steps=24&angle=135) - [PNG](https://grabient.com/kYOg0JLhZAkAgwJbGkS0ZHGTcPxG.png?style=angularSwatches&steps=24&angle=135) - [SVG](https://grabient.com/kYOg0JLhZAkAgwJbGkS0ZHGTcPxG.svg?style=angularSwatches&steps=24&angle=135) - [CSS](https://grabient.com/kYOg0JLhZAkAgwJbGkS0ZHGTcPxG.css?style=angularSwatches&steps=24&angle=135) - [ASE](https://grabient.com/kYOg0JLhZAkAgwJbGkS0ZHGTcPxG.ase?style=angularSwatches&steps=24&angle=135) - [GPL](https://grabient.com/kYOg0JLhZAkAgwJbGkS0ZHGTcPxG.gpl?style=angularSwatches&steps=24&angle=135) - [GRD](https://grabient.com/kYOg0JLhZAkAgwJbGkS0ZHGTcPxG.grd?style=angularSwatches&steps=24&angle=135) - [Design tokens](https://grabient.com/kYOg0JLhZAkAgwJbGkS0ZHGTcPxG.tokens.json?style=angularSwatches&steps=24&angle=135) - [Social card](https://grabient.com/api/og?seed=kYOg0JLhZAkAgwJbGkS0ZHGTcPxG&style=angularSwatches&steps=24&angle=135) - [Palettes like this one](https://grabient.com/palettes?q=kYOg0JLhZAkAgwJbGkS0ZHGTcPxG) - [Guide for agents](https://grabient.com/llms.txt)