# Seafoam basalt rust diagonal

Gray, light blue and brown linear gradient with 40 colors: #8c9990, #8c9a8f, #8c9d8f, #8b9f8d, #8ba28c, #8ba58a, #8ca888, #8dab86, #8dae85, #8eb186, #8eb488, #8db88e, #8cbe97, #8cc3a3, #8cc9af, #8ecdba, #91d0c4, #94d2cb, #96d3ce, #96d1cc, #94cdc6, #90c6b9, #8bbca8, #88af94, #86a17e, #84926a, #828259, #80744b, #7d6740, #7b5d39, #7a5635, #7a5130, #7b4c2c, #7d4929, #804625, #834322, #86411e, #883f1b, #8b3d18, #8c3b17. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Gray, light blue and brown linear gradient
- Seed: `kWqg5tXJs-eeWRY_F7HOiu8w`
- Page: https://grabient.com/kWqg5tXJs-eeWRY_F7HOiu8w?steps=40&angle=45
- Drawn as: linear gradient, 40 steps, 45 degrees
- Kinds: light center, muted
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 4.5 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 | `#8c9990` | `oklch(66.93% 0.0193 153.28)` | Green Milieu | black, 7 to 1 |
| 2 | `#8c9a8f` | `oklch(67.28% 0.0230 152.22)` | Iceberg Green | black, 7.1 to 1 |
| 3 | `#8c9d8f` | `oklch(67.71% 0.0282 150.49)` | Mossleaf | black, 7.2 to 1 |
| 4 | `#8b9f8d` | `oklch(68.22% 0.0344 148.34)` | Hillside View | black, 7.4 to 1 |
| 5 | `#8ba28c` | `oklch(68.79% 0.0414 145.99)` | Envy | black, 7.6 to 1 |
| 6 | `#8ba58a` | `oklch(69.42% 0.0486 143.69)` | Sonoma Sage | black, 7.8 to 1 |
| 7 | `#8ca888` | `oklch(70.09% 0.0557 141.67)` | Mermaid’s Cove | black, 8 to 1 |
| 8 | `#8dab86` | `oklch(70.80% 0.0623 140.16)` | Flora Green | black, 8.2 to 1 |
| 9 | `#8dae85` | `oklch(71.53% 0.0680 139.40)` | Pear Cactus | black, 8.5 to 1 |
| 10 | `#8eb186` | `oklch(72.27% 0.0723 139.64)` | Shaded Willow | black, 8.7 to 1 |
| 11 | `#8eb488` | `oklch(73.04% 0.0749 141.14)` | Chatty Cricket | black, 9 to 1 |
| 12 | `#8db88e` | `oklch(74.10% 0.0759 144.96)` | Forest Frolic | black, 9.4 to 1 |
| 13 | `#8cbe97` | `oklch(75.48% 0.0756 150.88)` | Garden Swing | black, 9.8 to 1 |
| 14 | `#8cc3a3` | `oklch(77.02% 0.0743 158.17)` | Lark Green | black, 10.4 to 1 |
| 15 | `#8cc9af` | `oklch(78.59% 0.0722 166.10)` | Sybarite Green | black, 11 to 1 |
| 16 | `#8ecdba` | `oklch(80.05% 0.0697 173.92)` | Beach Breeze | black, 11.6 to 1 |
| 17 | `#91d0c4` | `oklch(81.26% 0.0671 180.91)` | Opal Turquoise | black, 12 to 1 |
| 18 | `#94d2cb` | `oklch(82.08% 0.0646 186.32)` | Summer Soft Blue | black, 12.3 to 1 |
| 19 | `#96d3ce` | `oklch(82.37% 0.0625 189.43)` | Summer Soft Blue | black, 12.4 to 1 |
| 20 | `#96d1cc` | `oklch(81.98% 0.0610 189.49)` | Summer Soft Blue | black, 12.3 to 1 |
| 21 | `#94cdc6` | `oklch(80.76% 0.0604 185.77)` | Jamaica Bay | black, 11.8 to 1 |
| 22 | `#90c6b9` | `oklch(78.54% 0.0598 178.05)` | Float Your Boat | black, 10.9 to 1 |
| 23 | `#8bbca8` | `oklch(75.51% 0.0592 167.10)` | Lichen | black, 9.8 to 1 |
| 24 | `#88af94` | `oklch(71.88% 0.0587 153.76)` | Covent Garden | black, 8.6 to 1 |
| 25 | `#86a17e` | `oklch(67.89% 0.0584 138.88)` | Grey Green | black, 7.4 to 1 |
| 26 | `#84926a` | `oklch(63.74% 0.0585 123.29)` | Green Coconut | black, 6.2 to 1 |
| 27 | `#828259` | `oklch(59.67% 0.0589 107.84)` | Spinach Souffle | black, 5.3 to 1 |
| 28 | `#80744b` | `oklch(55.89% 0.0600 93.37)` | Peppered Moss | white, 4.6 to 1 |
| 29 | `#7d6740` | `oklch(52.62% 0.0616 80.72)` | Mud Bath | white, 5.3 to 1 |
| 30 | `#7b5d39` | `oklch(50.10% 0.0640 70.72)` | Nut Oil | white, 6 to 1 |
| 31 | `#7a5635` | `oklch(48.38% 0.0675 63.59)` | Cold Brew Coffee | white, 6.5 to 1 |
| 32 | `#7a5130` | `oklch(47.16% 0.0723 58.03)` | Brown-Noser | white, 6.9 to 1 |
| 33 | `#7b4c2c` | `oklch(46.35% 0.0782 53.78)` | Urban Auburn | white, 7.2 to 1 |
| 34 | `#7d4929` | `oklch(45.88% 0.0848 50.61)` | Urban Auburn | white, 7.3 to 1 |
| 35 | `#804625` | `oklch(45.66% 0.0917 48.31)` | Russet | white, 7.4 to 1 |
| 36 | `#834322` | `oklch(45.62% 0.0987 46.66)` | Honey Garlic Beef | white, 7.5 to 1 |
| 37 | `#86411e` | `oklch(45.67% 0.1053 45.46)` | Dusky Orange | white, 7.5 to 1 |
| 38 | `#883f1b` | `oklch(45.75% 0.1113 44.47)` | Dusky Orange | white, 7.5 to 1 |
| 39 | `#8b3d18` | `oklch(45.78% 0.1163 43.50)` | Dusky Orange | white, 7.5 to 1 |
| 40 | `#8c3b17` | `oklch(45.67% 0.1199 42.32)` | Dusky Orange | white, 7.6 to 1 |

## CSS

```css
background: linear-gradient(45deg, #8c9990 0.0%, #8c9a8f 2.6%, #8c9d8f 5.1%, #8b9f8d 7.7%, #8ba28c 10.3%, #8ba58a 12.8%, #8ca888 15.4%, #8dab86 17.9%, #8dae85 20.5%, #8eb186 23.1%, #8eb488 25.6%, #8db88e 28.2%, #8cbe97 30.8%, #8cc3a3 33.3%, #8cc9af 35.9%, #8ecdba 38.5%, #91d0c4 41.0%, #94d2cb 43.6%, #96d3ce 46.2%, #96d1cc 48.7%, #94cdc6 51.3%, #90c6b9 53.8%, #8bbca8 56.4%, #88af94 59.0%, #86a17e 61.5%, #84926a 64.1%, #828259 66.7%, #80744b 69.2%, #7d6740 71.8%, #7b5d39 74.4%, #7a5635 76.9%, #7a5130 79.5%, #7b4c2c 82.1%, #7d4929 84.6%, #804625 87.2%, #834322 89.7%, #86411e 92.3%, #883f1b 94.9%, #8b3d18 97.4%, #8c3b17 100.0%);
background: linear-gradient(45deg in oklch, oklch(66.93% 0.0193 153.28) 0.0%, oklch(67.28% 0.0230 152.22) 2.6%, oklch(67.71% 0.0282 150.49) 5.1%, oklch(68.22% 0.0344 148.34) 7.7%, oklch(68.79% 0.0414 145.99) 10.3%, oklch(69.42% 0.0486 143.69) 12.8%, oklch(70.09% 0.0557 141.67) 15.4%, oklch(70.80% 0.0623 140.16) 17.9%, oklch(71.53% 0.0680 139.40) 20.5%, oklch(72.27% 0.0723 139.64) 23.1%, oklch(73.04% 0.0749 141.14) 25.6%, oklch(74.10% 0.0759 144.96) 28.2%, oklch(75.48% 0.0756 150.88) 30.8%, oklch(77.02% 0.0743 158.17) 33.3%, oklch(78.59% 0.0722 166.10) 35.9%, oklch(80.05% 0.0697 173.92) 38.5%, oklch(81.26% 0.0671 180.91) 41.0%, oklch(82.08% 0.0646 186.32) 43.6%, oklch(82.37% 0.0625 189.43) 46.2%, oklch(81.98% 0.0610 189.49) 48.7%, oklch(80.76% 0.0604 185.77) 51.3%, oklch(78.54% 0.0598 178.05) 53.8%, oklch(75.51% 0.0592 167.10) 56.4%, oklch(71.88% 0.0587 153.76) 59.0%, oklch(67.89% 0.0584 138.88) 61.5%, oklch(63.74% 0.0585 123.29) 64.1%, oklch(59.67% 0.0589 107.84) 66.7%, oklch(55.89% 0.0600 93.37) 69.2%, oklch(52.62% 0.0616 80.72) 71.8%, oklch(50.10% 0.0640 70.72) 74.4%, oklch(48.38% 0.0675 63.59) 76.9%, oklch(47.16% 0.0723 58.03) 79.5%, oklch(46.35% 0.0782 53.78) 82.1%, oklch(45.88% 0.0848 50.61) 84.6%, oklch(45.66% 0.0917 48.31) 87.2%, oklch(45.62% 0.0987 46.66) 89.7%, oklch(45.67% 0.1053 45.46) 92.3%, oklch(45.75% 0.1113 44.47) 94.9%, oklch(45.78% 0.1163 43.50) 97.4%, oklch(45.67% 0.1199 42.32) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.669 | 0.019 | 153.3 |
| 2 | 0.728 | 0.074 | 140.6 |
| 3 | 0.815 | 0.061 | 188.2 |
| 4 | 0.496 | 0.065 | 68.7 |
| 5 | 0.457 | 0.12 | 42.3 |

## In these collections

- [Coastal rockpool spring](https://grabient.com/coastal-rockpool-spring)

## Other forms

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