# SoHo petrol moss and clay color fan

Black moves through petrol teal and moss green, returns to charcoal and concrete gray, then opens through warm cream and peach into clay and burnt orange. Thirty-two angular swatches build a SoHo chic palette around cool greens and architectural neutrals. A pale passage separates the gray middle from the warmer colors near the end.

- Also called: Black, green, gray and brown angular swatches
- Seed: `kWLgO8RiEvLKCTXtB62RTE6g`
- Page: https://grabient.com/kWLgO8RiEvLKCTXtB62RTE6g?style=angularSwatches&steps=32&angle=315
- Drawn as: angular swatches, 32 steps, 315 degrees
- Kinds: muted
- Hues: two-hue
- Contrast of its darkest and lightest colors: 12.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 | `#111214` | `oklch(18.11% 0.0041 264.37)` | Dark Tone Ink | white, 18.7 to 1 |
| 2 | `#151a1f` | `oklch(21.45% 0.0123 251.18)` | Aswad Black | white, 17.5 to 1 |
| 3 | `#18272f` | `oklch(26.33% 0.0246 231.57)` | Abyssal Anchorfish Blue | white, 15.3 to 1 |
| 4 | `#18393e` | `oklch(32.15% 0.0393 208.11)` | Nordic | white, 12.4 to 1 |
| 5 | `#1a4d46` | `oklch(38.35% 0.0548 183.36)` | Swedish Green | white, 9.5 to 1 |
| 6 | `#2d5f46` | `oklch(44.35% 0.0693 159.88)` | Wine Leaf | white, 7.3 to 1 |
| 7 | `#486d40` | `oklch(49.57% 0.0813 140.23)` | Under the Radar | white, 5.9 to 1 |
| 8 | `#5f773b` | `oklch(53.45% 0.0890 126.98)` | Majestic Jungle | white, 5 to 1 |
| 9 | `#697b3c` | `oklch(55.38% 0.0907 122.72)` | Military Green | white, 4.6 to 1 |
| 10 | `#617b44` | `oklch(54.94% 0.0858 129.61)` | Noble Eric | white, 4.7 to 1 |
| 11 | `#4e774f` | `oklch(52.65% 0.0757 145.27)` | Killarney | white, 5.1 to 1 |
| 12 | `#3c6d59` | `oklch(49.25% 0.0622 166.31)` | Toad King | white, 5.9 to 1 |
| 13 | `#365f5c` | `oklch(45.46% 0.0469 189.35)` | Royal Pine | white, 7.1 to 1 |
| 14 | `#395257` | `oklch(42.02% 0.0317 211.02)` | Mountain Pine | white, 8.3 to 1 |
| 15 | `#3d494f` | `oklch(39.66% 0.0183 227.91)` | Foggy Night | white, 9.2 to 1 |
| 16 | `#414649` | `oklch(39.12% 0.0085 236.65)` | Stargazing | white, 9.5 to 1 |
| 17 | `#494b4c` | `oklch(41.15% 0.0035 234.27)` | Dark Shadow | white, 8.7 to 1 |
| 18 | `#585858` | `oklch(45.99% 0.0006 222.13)` | Shadow Mountain | white, 7.1 to 1 |
| 19 | `#6b6b6b` | `oklch(52.81% 0.0000 89.88)` | Boat Anchor | white, 5.3 to 1 |
| 20 | `#828282` | `oklch(60.73% 0.0000 89.88)` | Squant | black, 5.4 to 1 |
| 21 | `#9a9b9a` | `oklch(68.86% 0.0022 152.69)` | Walrus | black, 7.5 to 1 |
| 22 | `#b1b3af` | `oklch(76.29% 0.0060 126.68)` | Steam Engine | black, 9.8 to 1 |
| 23 | `#c6c5bd` | `oklch(82.13% 0.0115 103.32)` | Notre Dame | black, 12 to 1 |
| 24 | `#d5cfc2` | `oklch(85.48% 0.0186 85.04)` | Modern Grey | black, 13.4 to 1 |
| 25 | `#dccebc` | `oklch(85.71% 0.0283 72.63)` | Snip of Tannin | black, 13.5 to 1 |
| 26 | `#ddc3ad` | `oklch(83.34% 0.0420 62.96)` | Sienna Dust | black, 12.4 to 1 |
| 27 | `#d9b297` | `oklch(79.10% 0.0586 55.47)` | Sunset Cove | black, 10.7 to 1 |
| 28 | `#d29c7f` | `oklch(73.68% 0.0765 49.74)` | Dusty Coral | black, 8.8 to 1 |
| 29 | `#c88566` | `oklch(67.79% 0.0945 45.36)` | Cabana Melon | black, 7 to 1 |
| 30 | `#be6e4f` | `oklch(62.14% 0.1112 41.90)` | Before Winter | black, 5.5 to 1 |
| 31 | `#b55b3d` | `oklch(57.42% 0.1252 38.96)` | Karacha Red | white, 4.6 to 1 |
| 32 | `#b04d33` | `oklch(54.33% 0.1350 36.12)` | Kabacha Brown | white, 5.3 to 1 |

## CSS

```css
background: conic-gradient(from 315deg, #111214 0.000% 3.125%, #151a1f 3.125% 6.250%, #18272f 6.250% 9.375%, #18393e 9.375% 12.500%, #1a4d46 12.500% 15.625%, #2d5f46 15.625% 18.750%, #486d40 18.750% 21.875%, #5f773b 21.875% 25.000%, #697b3c 25.000% 28.125%, #617b44 28.125% 31.250%, #4e774f 31.250% 34.375%, #3c6d59 34.375% 37.500%, #365f5c 37.500% 40.625%, #395257 40.625% 43.750%, #3d494f 43.750% 46.875%, #414649 46.875% 50.000%, #494b4c 50.000% 53.125%, #585858 53.125% 56.250%, #6b6b6b 56.250% 59.375%, #828282 59.375% 62.500%, #9a9b9a 62.500% 65.625%, #b1b3af 65.625% 68.750%, #c6c5bd 68.750% 71.875%, #d5cfc2 71.875% 75.000%, #dccebc 75.000% 78.125%, #ddc3ad 78.125% 81.250%, #d9b297 81.250% 84.375%, #d29c7f 84.375% 87.500%, #c88566 87.500% 90.625%, #be6e4f 90.625% 93.750%, #b55b3d 93.750% 96.875%, #b04d33 96.875% 100.000%);
background: conic-gradient(from 315deg, oklch(18.11% 0.0041 264.37) 0.000% 3.125%, oklch(21.45% 0.0123 251.18) 3.125% 6.250%, oklch(26.33% 0.0246 231.57) 6.250% 9.375%, oklch(32.15% 0.0393 208.11) 9.375% 12.500%, oklch(38.35% 0.0548 183.36) 12.500% 15.625%, oklch(44.35% 0.0693 159.88) 15.625% 18.750%, oklch(49.57% 0.0813 140.23) 18.750% 21.875%, oklch(53.45% 0.0890 126.98) 21.875% 25.000%, oklch(55.38% 0.0907 122.72) 25.000% 28.125%, oklch(54.94% 0.0858 129.61) 28.125% 31.250%, oklch(52.65% 0.0757 145.27) 31.250% 34.375%, oklch(49.25% 0.0622 166.31) 34.375% 37.500%, oklch(45.46% 0.0469 189.35) 37.500% 40.625%, oklch(42.02% 0.0317 211.02) 40.625% 43.750%, oklch(39.66% 0.0183 227.91) 43.750% 46.875%, oklch(39.12% 0.0085 236.65) 46.875% 50.000%, oklch(41.15% 0.0035 234.27) 50.000% 53.125%, oklch(45.99% 0.0006 222.13) 53.125% 56.250%, oklch(52.81% 0.0000 89.88) 56.250% 59.375%, oklch(60.73% 0.0000 89.88) 59.375% 62.500%, oklch(68.86% 0.0022 152.69) 62.500% 65.625%, oklch(76.29% 0.0060 126.68) 65.625% 68.750%, oklch(82.13% 0.0115 103.32) 68.750% 71.875%, oklch(85.48% 0.0186 85.04) 71.875% 75.000%, oklch(85.71% 0.0283 72.63) 75.000% 78.125%, oklch(83.34% 0.0420 62.96) 78.125% 81.250%, oklch(79.10% 0.0586 55.47) 81.250% 84.375%, oklch(73.68% 0.0765 49.74) 84.375% 87.500%, oklch(67.79% 0.0945 45.36) 87.500% 90.625%, oklch(62.14% 0.1112 41.90) 90.625% 93.750%, oklch(57.42% 0.1252 38.96) 93.750% 96.875%, oklch(54.33% 0.1350 36.12) 96.875% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.181 | 0.004 | 264.4 |
| 2 | 0.551 | 0.091 | 122.8 |
| 3 | 0.398 | 0.006 | 236.9 |
| 4 | 0.858 | 0.021 | 81.6 |
| 5 | 0.543 | 0.135 | 36.1 |

## In these collections

- [SoHo chic colors](https://grabient.com/soho-chic-colors)

## Other forms

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