# Near-black and teal color palette The Near-black and teal color palette brings together black, dark teal, and teal. The colors span a moderate lightness range, combining moderate color with gentle contrast. Its dark and grounded character suits travel posters and environmental mood boards. Its darkest tone is black, and its lightest tone is teal. - Also called: Black to teal linear gradient - Seed: `kUHg-gHBY-yogvY4JL2A` - Page: https://grabient.com/kUHg-gHBY-yogvY4JL2A?steps=32&angle=135 - Drawn as: linear gradient, 32 steps, 135 degrees - Kinds: dark to light, vivid, dark, cool - Hues: analogous - Contrast of its darkest and lightest colors: 2.7 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 | `#00070b` | `oklch(11.81% 0.0207 225.00)` | Eight Ball | white, 20.3 to 1 | | 2 | `#00080d` | `oklch(12.39% 0.0230 224.50)` | Eight Ball | white, 20.2 to 1 | | 3 | `#00090f` | `oklch(13.19% 0.0250 225.09)` | Black Knight | white, 20 to 1 | | 4 | `#000b11` | `oklch(14.06% 0.0264 224.20)` | Black Knight | white, 19.8 to 1 | | 5 | `#000e14` | `oklch(15.03% 0.0281 223.26)` | Black Knight | white, 19.6 to 1 | | 6 | `#001017` | `oklch(16.09% 0.0298 222.26)` | Black Glaze | white, 19.3 to 1 | | 7 | `#00131a` | `oklch(17.21% 0.0316 221.20)` | Black Glaze | white, 18.9 to 1 | | 8 | `#00161d` | `oklch(18.35% 0.0334 220.06)` | Creeping Death | white, 18.6 to 1 | | 9 | `#001820` | `oklch(19.50% 0.0352 218.85)` | Creeping Death | white, 18.1 to 1 | | 10 | `#001b23` | `oklch(20.63% 0.0370 217.56)` | Creeping Death | white, 17.7 to 1 | | 11 | `#001e25` | `oklch(21.72% 0.0386 216.17)` | Stellar Explorer | white, 17.2 to 1 | | 12 | `#002128` | `oklch(22.75% 0.0401 214.66)` | Stellar Explorer | white, 16.8 to 1 | | 13 | `#00242a` | `oklch(23.80% 0.0416 212.99)` | Teal Spill | white, 16.3 to 1 | | 14 | `#00272d` | `oklch(24.85% 0.0432 211.17)` | Daintree | white, 15.8 to 1 | | 15 | `#002a2f` | `oklch(25.91% 0.0447 209.24)` | Daintree | white, 15.3 to 1 | | 16 | `#002d32` | `oklch(26.98% 0.0463 207.21)` | Black Chasm | white, 14.8 to 1 | | 17 | `#003034` | `oklch(28.06% 0.0479 205.12)` | Roof Tile Green | white, 14.3 to 1 | | 18 | `#003337` | `oklch(29.14% 0.0496 203.01)` | Artist Blue | white, 13.7 to 1 | | 19 | `#003639` | `oklch(30.22% 0.0514 200.88)` | Shrub Green | white, 13.2 to 1 | | 20 | `#00393b` | `oklch(31.29% 0.0532 198.78)` | Customs Green | white, 12.7 to 1 | | 21 | `#003c3d` | `oklch(32.37% 0.0551 196.74)` | Rich Black | white, 12.2 to 1 | | 22 | `#003f3f` | `oklch(33.44% 0.0571 194.76)` | Rich Black | white, 11.7 to 1 | | 23 | `#004342` | `oklch(34.58% 0.0593 192.68)` | Warm Black | white, 11.1 to 1 | | 24 | `#004744` | `oklch(35.78% 0.0617 190.48)` | Cyprus | white, 10.6 to 1 | | 25 | `#004a46` | `oklch(37.02% 0.0643 188.22)` | Tropical Forest | white, 10 to 1 | | 26 | `#004e48` | `oklch(38.26% 0.0671 185.96)` | Action Green | white, 9.5 to 1 | | 27 | `#00524a` | `oklch(39.48% 0.0700 183.74)` | Green Oblivion | white, 9 to 1 | | 28 | `#00564c` | `oklch(40.63% 0.0730 181.63)` | Castleton Green | white, 8.6 to 1 | | 29 | `#00594e` | `oklch(41.71% 0.0758 179.68)` | Forest Shadows | white, 8.2 to 1 | | 30 | `#005d4f` | `oklch(42.66% 0.0785 177.94)` | Alpine Green | white, 7.8 to 1 | | 31 | `#005f50` | `oklch(43.47% 0.0810 176.47)` | Alpine Green | white, 7.6 to 1 | | 32 | `#006150` | `oklch(44.10% 0.0829 175.32)` | Alpine Green | white, 7.3 to 1 | ## CSS ```css background: linear-gradient(135deg, #00070b 0.0%, #00080d 3.2%, #00090f 6.5%, #000b11 9.7%, #000e14 12.9%, #001017 16.1%, #00131a 19.4%, #00161d 22.6%, #001820 25.8%, #001b23 29.0%, #001e25 32.3%, #002128 35.5%, #00242a 38.7%, #00272d 41.9%, #002a2f 45.2%, #002d32 48.4%, #003034 51.6%, #003337 54.8%, #003639 58.1%, #00393b 61.3%, #003c3d 64.5%, #003f3f 67.7%, #004342 71.0%, #004744 74.2%, #004a46 77.4%, #004e48 80.6%, #00524a 83.9%, #00564c 87.1%, #00594e 90.3%, #005d4f 93.5%, #005f50 96.8%, #006150 100.0%); background: linear-gradient(135deg in oklch, oklch(11.81% 0.0207 225.00) 0.0%, oklch(12.39% 0.0230 224.50) 3.2%, oklch(13.19% 0.0250 225.09) 6.5%, oklch(14.06% 0.0264 224.20) 9.7%, oklch(15.03% 0.0281 223.26) 12.9%, oklch(16.09% 0.0298 222.26) 16.1%, oklch(17.21% 0.0316 221.20) 19.4%, oklch(18.35% 0.0334 220.06) 22.6%, oklch(19.50% 0.0352 218.85) 25.8%, oklch(20.63% 0.0370 217.56) 29.0%, oklch(21.72% 0.0386 216.17) 32.3%, oklch(22.75% 0.0401 214.66) 35.5%, oklch(23.80% 0.0416 212.99) 38.7%, oklch(24.85% 0.0432 211.17) 41.9%, oklch(25.91% 0.0447 209.24) 45.2%, oklch(26.98% 0.0463 207.21) 48.4%, oklch(28.06% 0.0479 205.12) 51.6%, oklch(29.14% 0.0496 203.01) 54.8%, oklch(30.22% 0.0514 200.88) 58.1%, oklch(31.29% 0.0532 198.78) 61.3%, oklch(32.37% 0.0551 196.74) 64.5%, oklch(33.44% 0.0571 194.76) 67.7%, oklch(34.58% 0.0593 192.68) 71.0%, oklch(35.78% 0.0617 190.48) 74.2%, oklch(37.02% 0.0643 188.22) 77.4%, oklch(38.26% 0.0671 185.96) 80.6%, oklch(39.48% 0.0700 183.74) 83.9%, oklch(40.63% 0.0730 181.63) 87.1%, oklch(41.71% 0.0758 179.68) 90.3%, oklch(42.66% 0.0785 177.94) 93.5%, oklch(43.47% 0.0810 176.47) 96.8%, oklch(44.10% 0.0829 175.32) 100.0%); ``` ## Keyframes 4 OKLCH keyframes joined by a Catmull-Rom spline. Hue is unwrapped degrees. | Keyframe | Lightness | Chroma | Hue | | --- | --- | --- | --- | | 1 | 0.118 | 0.021 | 225 | | 2 | 0.22 | 0.061 | 215.5 | | 3 | 0.331 | 0.09 | 195.4 | | 4 | 0.441 | 0.101 | 175.3 | ## In these collections - [Teal gradients](https://grabient.com/teal-gradients) - [Deep sea gradients](https://grabient.com/deep-sea-gradients) ## Other forms - [JSON](https://grabient.com/kUHg-gHBY-yogvY4JL2A.json?steps=32&angle=135) - [PNG](https://grabient.com/kUHg-gHBY-yogvY4JL2A.png?steps=32&angle=135) - [SVG](https://grabient.com/kUHg-gHBY-yogvY4JL2A.svg?steps=32&angle=135) - [CSS](https://grabient.com/kUHg-gHBY-yogvY4JL2A.css?steps=32&angle=135) - [ASE](https://grabient.com/kUHg-gHBY-yogvY4JL2A.ase?steps=32&angle=135) - [GPL](https://grabient.com/kUHg-gHBY-yogvY4JL2A.gpl?steps=32&angle=135) - [GRD](https://grabient.com/kUHg-gHBY-yogvY4JL2A.grd?steps=32&angle=135) - [Design tokens](https://grabient.com/kUHg-gHBY-yogvY4JL2A.tokens.json?steps=32&angle=135) - [Social card](https://grabient.com/api/og?seed=kUHg-gHBY-yogvY4JL2A&steps=32&angle=135) - [Palettes like this one](https://grabient.com/palettes?q=kUHg-gHBY-yogvY4JL2A) - [Guide for agents](https://grabient.com/llms.txt)