# Complementary teal, black and brown linear swatches

Complementary teal, black and brown linear swatches with 32 colors: #4f7a7f, #4b767b, #456f74, #3f676d, #385f65, #32585e, #2c5057, #27484f, #214047, #1d3940, #1a323a, #182d35, #162830, #16232b, #161f28, #161d26, #191d26, #1d1e28, #24202b, #2c222d, #35252f, #3d2830, #472a32, #512c34, #5d2e37, #683139, #72343b, #7d383c, #883d3f, #924242, #9b4645, #a24946. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kajCOSNpBAaWMQWdB0RJgxKrOfwtCK0EA`
- Page: https://grabient.com/kajCOSNpBAaWMQWdB0RJgxKrOfwtCK0EA?style=linearSwatches&steps=32&angle=225
- Drawn as: linear swatches, 32 steps, 225 degrees
- Kinds: dark center, dark
- Hues: complementary
- Contrast of its darkest and lightest colors: 3.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 | `#4f7a7f` | `oklch(55.12% 0.0482 205.31)` | Submerged | white, 4.7 to 1 |
| 2 | `#4b767b` | `oklch(53.54% 0.0478 205.74)` | Cool Waters | white, 5 to 1 |
| 3 | `#456f74` | `oklch(51.34% 0.0472 206.25)` | Thunderhawk Blue | white, 5.5 to 1 |
| 4 | `#3f676d` | `oklch(48.74% 0.0465 206.95)` | Smock Blue | white, 6.2 to 1 |
| 5 | `#385f65` | `oklch(45.99% 0.0456 207.93)` | Deep Sea Dive | white, 6.9 to 1 |
| 6 | `#32585e` | `oklch(43.33% 0.0443 209.27)` | Petro Blue | white, 7.8 to 1 |
| 7 | `#2c5057` | `oklch(40.75% 0.0427 210.84)` | Atlantic Deep | white, 8.7 to 1 |
| 8 | `#27484f` | `oklch(37.98% 0.0408 212.43)` | Ponderosa Pine | white, 9.8 to 1 |
| 9 | `#214047` | `oklch(35.18% 0.0386 214.37)` | Bay Isle Pointe | white, 11 to 1 |
| 10 | `#1d3940` | `oklch(32.54% 0.0363 217.01)` | Royal Neptune | white, 12.2 to 1 |
| 11 | `#1a323a` | `oklch(30.20% 0.0339 220.70)` | Ore Bluish Black | white, 13.4 to 1 |
| 12 | `#182d35` | `oklch(28.24% 0.0312 225.41)` | Oceanic Noir | white, 14.3 to 1 |
| 13 | `#162830` | `oklch(26.39% 0.0279 230.45)` | Black Box | white, 15.2 to 1 |
| 14 | `#16232b` | `oklch(24.78% 0.0243 236.37)` | Crow Feather | white, 16 to 1 |
| 15 | `#161f28` | `oklch(23.57% 0.0214 243.80)` | Coarse Wool | white, 16.6 to 1 |
| 16 | `#161d26` | `oklch(22.91% 0.0195 253.40)` | Coarse Wool | white, 16.9 to 1 |
| 17 | `#191d26` | `oklch(22.96% 0.0194 266.16)` | Coarse Wool | white, 16.9 to 1 |
| 18 | `#1d1e28` | `oklch(23.78% 0.0201 283.64)` | Inkwell Inception | white, 16.5 to 1 |
| 19 | `#24202b` | `oklch(25.16% 0.0218 303.73)` | To Hell and Black | white, 16 to 1 |
| 20 | `#2c222d` | `oklch(26.89% 0.0247 323.80)` | Delighted Chimp | white, 15.2 to 1 |
| 21 | `#35252f` | `oklch(28.73% 0.0291 341.23)` | Melanzane | white, 14.4 to 1 |
| 22 | `#3d2830` | `oklch(30.51% 0.0355 353.56)` | Late Night Out | white, 13.6 to 1 |
| 23 | `#472a32` | `oklch(32.39% 0.0446 1.45)` | Wine Tasting | white, 12.7 to 1 |
| 24 | `#512c34` | `oklch(34.44% 0.0559 6.41)` | Japanese Wineberry | white, 11.8 to 1 |
| 25 | `#5d2e37` | `oklch(36.58% 0.0677 9.56)` | Dubonnet | white, 10.9 to 1 |
| 26 | `#683139` | `oklch(38.75% 0.0790 12.04)` | Lovestruck | white, 10.1 to 1 |
| 27 | `#72343b` | `oklch(40.91% 0.0882 14.93)` | Aged Merlot | white, 9.2 to 1 |
| 28 | `#7d383c` | `oklch(43.30% 0.0961 17.73)` | Fire Agate | white, 8.4 to 1 |
| 29 | `#883d3f` | `oklch(45.87% 0.1033 19.91)` | Apple Polish | white, 7.5 to 1 |
| 30 | `#924242` | `oklch(48.34% 0.1096 21.59)` | Awning Red | white, 6.8 to 1 |
| 31 | `#9b4645` | `oklch(50.47% 0.1147 22.88)` | Lumberjack | white, 6.2 to 1 |
| 32 | `#a24946` | `oklch(51.97% 0.1185 23.90)` | Roof Terracotta | white, 5.8 to 1 |

## CSS

```css
background: linear-gradient(225deg, #4f7a7f 0.000% 3.125%, #4b767b 3.125% 6.250%, #456f74 6.250% 9.375%, #3f676d 9.375% 12.500%, #385f65 12.500% 15.625%, #32585e 15.625% 18.750%, #2c5057 18.750% 21.875%, #27484f 21.875% 25.000%, #214047 25.000% 28.125%, #1d3940 28.125% 31.250%, #1a323a 31.250% 34.375%, #182d35 34.375% 37.500%, #162830 37.500% 40.625%, #16232b 40.625% 43.750%, #161f28 43.750% 46.875%, #161d26 46.875% 50.000%, #191d26 50.000% 53.125%, #1d1e28 53.125% 56.250%, #24202b 56.250% 59.375%, #2c222d 59.375% 62.500%, #35252f 62.500% 65.625%, #3d2830 65.625% 68.750%, #472a32 68.750% 71.875%, #512c34 71.875% 75.000%, #5d2e37 75.000% 78.125%, #683139 78.125% 81.250%, #72343b 81.250% 84.375%, #7d383c 84.375% 87.500%, #883d3f 87.500% 90.625%, #924242 90.625% 93.750%, #9b4645 93.750% 96.875%, #a24946 96.875% 100.000%);
background: linear-gradient(225deg, oklch(55.12% 0.0482 205.31) 0.000% 3.125%, oklch(53.54% 0.0478 205.74) 3.125% 6.250%, oklch(51.34% 0.0472 206.25) 6.250% 9.375%, oklch(48.74% 0.0465 206.95) 9.375% 12.500%, oklch(45.99% 0.0456 207.93) 12.500% 15.625%, oklch(43.33% 0.0443 209.27) 15.625% 18.750%, oklch(40.75% 0.0427 210.84) 18.750% 21.875%, oklch(37.98% 0.0408 212.43) 21.875% 25.000%, oklch(35.18% 0.0386 214.37) 25.000% 28.125%, oklch(32.54% 0.0363 217.01) 28.125% 31.250%, oklch(30.20% 0.0339 220.70) 31.250% 34.375%, oklch(28.24% 0.0312 225.41) 34.375% 37.500%, oklch(26.39% 0.0279 230.45) 37.500% 40.625%, oklch(24.78% 0.0243 236.37) 40.625% 43.750%, oklch(23.57% 0.0214 243.80) 43.750% 46.875%, oklch(22.91% 0.0195 253.40) 46.875% 50.000%, oklch(22.96% 0.0194 266.16) 50.000% 53.125%, oklch(23.78% 0.0201 283.64) 53.125% 56.250%, oklch(25.16% 0.0218 303.73) 56.250% 59.375%, oklch(26.89% 0.0247 323.80) 59.375% 62.500%, oklch(28.73% 0.0291 341.23) 62.500% 65.625%, oklch(30.51% 0.0355 353.56) 65.625% 68.750%, oklch(32.39% 0.0446 1.45) 68.750% 71.875%, oklch(34.44% 0.0559 6.41) 71.875% 75.000%, oklch(36.58% 0.0677 9.56) 75.000% 78.125%, oklch(38.75% 0.0790 12.04) 78.125% 81.250%, oklch(40.91% 0.0882 14.93) 81.250% 84.375%, oklch(43.30% 0.0961 17.73) 84.375% 87.500%, oklch(45.87% 0.1033 19.91) 87.500% 90.625%, oklch(48.34% 0.1096 21.59) 90.625% 93.750%, oklch(50.47% 0.1147 22.88) 93.750% 96.875%, oklch(51.97% 0.1185 23.90) 96.875% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.551 | 0.048 | 205.3 |
| 2 | 0.429 | 0.044 | 209.5 |
| 3 | 0.295 | 0.033 | 222.2 |
| 4 | 0.228 | 0.019 | 259.2 |
| 5 | 0.299 | 0.033 | 350.1 |
| 6 | 0.406 | 0.087 | 374.4 |
| 7 | 0.52 | 0.119 | 383.9 |

## In these collections

- [Dark gradients](https://grabient.com/dark-gradients)
- [Desktop wallpaper gradients](https://grabient.com/desktop-wallpaper-gradients)
- [Moody gradients](https://grabient.com/moody-gradients)
- [Dark mode UI gradients](https://grabient.com/dark-mode-ui-gradients)

## Other forms

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