# Forest Shadow Fan

Analogous brown, black and green angular swatches with 34 colors: #393e20, #363a1e, #32341c, #2d2e18, #282715, #222112, #1c1b0f, #18170d, #14140c, #12120c, #11110c, #10110d, #10120e, #11130f, #121511, #141814, #161b17, #19201b, #1c251f, #202b24, #25322a, #2b3a30, #314336, #374c3c, #3e5442, #455d49, #4c6651, #557059, #5f7b62, #68866b, #719074, #7a9a7c, #81a282, #87a887. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Analogous brown, black and green angular swatches
- Seed: `kWWSJSl4U-ZyExe4j792JW_Y`
- Page: https://grabient.com/kWWSJSl4U-ZyExe4j792JW_Y?style=angularSwatches&steps=34
- Drawn as: angular swatches, 34 steps, 90 degrees
- Kinds: dark center, neutral, dark
- Hues: analogous
- Contrast of its darkest and lightest colors: 7.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 | `#393e20` | `oklch(35.04% 0.0469 116.02)` | Turtle Skin | white, 11.1 to 1 |
| 2 | `#363a1e` | `oklch(33.68% 0.0442 114.66)` | Turtle Skin | white, 11.7 to 1 |
| 3 | `#32341c` | `oklch(31.73% 0.0404 112.41)` | Fuchsia Berries | white, 12.7 to 1 |
| 4 | `#2d2e18` | `oklch(29.38% 0.0359 109.67)` | Metal Construction Green | white, 13.8 to 1 |
| 5 | `#282715` | `oklch(26.85% 0.0310 106.84)` | Maire | white, 15 to 1 |
| 6 | `#222112` | `oklch(24.31% 0.0261 104.34)` | Black Mesa | white, 16.2 to 1 |
| 7 | `#1c1b0f` | `oklch(21.98% 0.0214 102.56)` | Noir Mystique | white, 17.2 to 1 |
| 8 | `#18170d` | `oklch(20.05% 0.0174 101.92)` | Darkness | white, 18 to 1 |
| 9 | `#14140c` | `oklch(18.72% 0.0143 102.82)` | Darkness | white, 18.5 to 1 |
| 10 | `#12120c` | `oklch(18.02% 0.0123 105.77)` | Sinister | white, 18.7 to 1 |
| 11 | `#11110c` | `oklch(17.67% 0.0108 110.89)` | Sinister | white, 18.8 to 1 |
| 12 | `#10110d` | `oklch(17.63% 0.0098 117.58)` | Sinister | white, 18.9 to 1 |
| 13 | `#10120e` | `oklch(17.89% 0.0092 125.20)` | Sinister | white, 18.8 to 1 |
| 14 | `#11130f` | `oklch(18.44% 0.0091 133.12)` | Glimpse Into Space | white, 18.6 to 1 |
| 15 | `#121511` | `oklch(19.26% 0.0095 140.70)` | Distinctive Lack of Hue | white, 18.3 to 1 |
| 16 | `#141814` | `oklch(20.35% 0.0103 147.32)` | Cynical Black | white, 17.9 to 1 |
| 17 | `#161b17` | `oklch(21.68% 0.0116 152.34)` | Twilight Zone | white, 17.3 to 1 |
| 18 | `#19201b` | `oklch(23.29% 0.0134 155.27)` | Black Emerald | white, 16.6 to 1 |
| 19 | `#1c251f` | `oklch(25.30% 0.0162 156.63)` | Shadow Warrior | white, 15.7 to 1 |
| 20 | `#202b24` | `oklch(27.69% 0.0197 156.82)` | Quartzite | white, 14.6 to 1 |
| 21 | `#25322a` | `oklch(30.36% 0.0237 156.13)` | Holly | white, 13.3 to 1 |
| 22 | `#2b3a30` | `oklch(33.23% 0.0281 154.85)` | Aimiru Brown | white, 11.9 to 1 |
| 23 | `#314336` | `oklch(36.24% 0.0325 153.28)` | Timber Green | white, 10.5 to 1 |
| 24 | `#374c3c` | `oklch(39.28% 0.0366 151.70)` | Mountain View | white, 9.3 to 1 |
| 25 | `#3e5442` | `oklch(42.30% 0.0404 150.42)` | Pine Forest | white, 8.1 to 1 |
| 26 | `#455d49` | `oklch(45.22% 0.0434 149.70)` | Greenwich | white, 7.2 to 1 |
| 27 | `#4c6651` | `oklch(48.38% 0.0461 149.15)` | Pasture Green | white, 6.2 to 1 |
| 28 | `#557059` | `oklch(51.81% 0.0487 148.56)` | Green Bayou | white, 5.4 to 1 |
| 29 | `#5f7b62` | `oklch(55.37% 0.0510 147.97)` | Swanndri | white, 4.6 to 1 |
| 30 | `#68866b` | `oklch(58.90% 0.0531 147.38)` | Christmas Holly | black, 5.2 to 1 |
| 31 | `#719074` | `oklch(62.25% 0.0550 146.83)` | Watercress | black, 5.9 to 1 |
| 32 | `#7a9a7c` | `oklch(65.26% 0.0567 146.34)` | Scottish Highlands | black, 6.7 to 1 |
| 33 | `#81a282` | `oklch(67.79% 0.0581 145.92)` | Grey Green | black, 7.4 to 1 |
| 34 | `#87a887` | `oklch(69.69% 0.0593 145.60)` | Mermaid’s Cove | black, 7.9 to 1 |

## CSS

```css
background: conic-gradient(from 90deg, #393e20 0.000% 2.941%, #363a1e 2.941% 5.882%, #32341c 5.882% 8.824%, #2d2e18 8.824% 11.765%, #282715 11.765% 14.706%, #222112 14.706% 17.647%, #1c1b0f 17.647% 20.588%, #18170d 20.588% 23.529%, #14140c 23.529% 26.471%, #12120c 26.471% 29.412%, #11110c 29.412% 32.353%, #10110d 32.353% 35.294%, #10120e 35.294% 38.235%, #11130f 38.235% 41.176%, #121511 41.176% 44.118%, #141814 44.118% 47.059%, #161b17 47.059% 50.000%, #19201b 50.000% 52.941%, #1c251f 52.941% 55.882%, #202b24 55.882% 58.824%, #25322a 58.824% 61.765%, #2b3a30 61.765% 64.706%, #314336 64.706% 67.647%, #374c3c 67.647% 70.588%, #3e5442 70.588% 73.529%, #455d49 73.529% 76.471%, #4c6651 76.471% 79.412%, #557059 79.412% 82.353%, #5f7b62 82.353% 85.294%, #68866b 85.294% 88.235%, #719074 88.235% 91.176%, #7a9a7c 91.176% 94.118%, #81a282 94.118% 97.059%, #87a887 97.059% 100.000%);
background: conic-gradient(from 90deg, oklch(35.04% 0.0469 116.02) 0.000% 2.941%, oklch(33.68% 0.0442 114.66) 2.941% 5.882%, oklch(31.73% 0.0404 112.41) 5.882% 8.824%, oklch(29.38% 0.0359 109.67) 8.824% 11.765%, oklch(26.85% 0.0310 106.84) 11.765% 14.706%, oklch(24.31% 0.0261 104.34) 14.706% 17.647%, oklch(21.98% 0.0214 102.56) 17.647% 20.588%, oklch(20.05% 0.0174 101.92) 20.588% 23.529%, oklch(18.72% 0.0143 102.82) 23.529% 26.471%, oklch(18.02% 0.0123 105.77) 26.471% 29.412%, oklch(17.67% 0.0108 110.89) 29.412% 32.353%, oklch(17.63% 0.0098 117.58) 32.353% 35.294%, oklch(17.89% 0.0092 125.20) 35.294% 38.235%, oklch(18.44% 0.0091 133.12) 38.235% 41.176%, oklch(19.26% 0.0095 140.70) 41.176% 44.118%, oklch(20.35% 0.0103 147.32) 44.118% 47.059%, oklch(21.68% 0.0116 152.34) 47.059% 50.000%, oklch(23.29% 0.0134 155.27) 50.000% 52.941%, oklch(25.30% 0.0162 156.63) 52.941% 55.882%, oklch(27.69% 0.0197 156.82) 55.882% 58.824%, oklch(30.36% 0.0237 156.13) 58.824% 61.765%, oklch(33.23% 0.0281 154.85) 61.765% 64.706%, oklch(36.24% 0.0325 153.28) 64.706% 67.647%, oklch(39.28% 0.0366 151.70) 67.647% 70.588%, oklch(42.30% 0.0404 150.42) 70.588% 73.529%, oklch(45.22% 0.0434 149.70) 73.529% 76.471%, oklch(48.38% 0.0461 149.15) 76.471% 79.412%, oklch(51.81% 0.0487 148.56) 79.412% 82.353%, oklch(55.37% 0.0510 147.97) 82.353% 85.294%, oklch(58.90% 0.0531 147.38) 85.294% 88.235%, oklch(62.25% 0.0550 146.83) 88.235% 91.176%, oklch(65.26% 0.0567 146.34) 91.176% 94.118%, oklch(67.79% 0.0581 145.92) 94.118% 97.059%, oklch(69.69% 0.0593 145.60) 97.059% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.35 | 0.047 | 116 |
| 2 | 0.185 | 0.014 | 103.3 |
| 3 | 0.224 | 0.012 | 154.1 |
| 4 | 0.445 | 0.043 | 149.8 |
| 5 | 0.697 | 0.059 | 145.6 |

## In these collections

- [Black swatches](https://grabient.com/black-swatches)
- [Shade swatches](https://grabient.com/shade-swatches)

## Other forms

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