# Navy teal gold gradient Black to tan linear gradient with 32 colors: #02101b, #02131e, #031622, #041b27, #05202d, #062632, #082c38, #0a313d, #0c3641, #0f3b45, #133f4a, #16434e, #1a4852, #1c4c55, #1e5259, #20575b, #225e5c, #286559, #366c50, #4c7144, #657337, #7d742c, #937529, #a4772f, #b17b38, #bb8240, #c48c48, #cb964f, #d0a156, #d3ac5d, #d6b463, #d9ba68. Edit it and copy or download CSS, SVG, PNG or shader code. - Also called: Black to tan linear gradient - Seed: `kWKhirJxG9bcVvVNJjFZadBw` - Page: https://grabient.com/kWKhirJxG9bcVvVNJjFZadBw?steps=32 - Drawn as: linear gradient, 32 steps, 90 degrees - Kinds: dark to light, vivid - Hues: split-complementary - Contrast of its darkest and lightest colors: 10.2 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 | `#02101b` | `oklch(16.54% 0.0331 240.47)` | Kuretake Black Manga | white, 19.2 to 1 | | 2 | `#02131e` | `oklch(17.68% 0.0343 238.78)` | Kuretake Black Manga | white, 18.8 to 1 | | 3 | `#031622` | `oklch(19.23% 0.0360 236.54)` | Creeping Death | white, 18.3 to 1 | | 4 | `#041b27` | `oklch(21.06% 0.0380 233.87)` | Oxford by Night | white, 17.6 to 1 | | 5 | `#05202d` | `oklch(23.10% 0.0402 230.91)` | Midnight Dreams | white, 16.7 to 1 | | 6 | `#062632` | `oklch(25.22% 0.0425 227.77)` | Daintree | white, 15.7 to 1 | | 7 | `#082c38` | `oklch(27.34% 0.0448 224.59)` | Black Chasm | white, 14.7 to 1 | | 8 | `#0a313d` | `oklch(29.34% 0.0469 221.51)` | Nordic Noir | white, 13.7 to 1 | | 9 | `#0c3641` | `oklch(31.14% 0.0486 218.68)` | Firmament Blue | white, 12.9 to 1 | | 10 | `#0f3b45` | `oklch(32.78% 0.0499 216.92)` | Ghostlands Coal | white, 12.1 to 1 | | 11 | `#133f4a` | `oklch(34.34% 0.0507 216.00)` | Sunken Harbour | white, 11.4 to 1 | | 12 | `#16434e` | `oklch(35.86% 0.0514 215.28)` | Cold and Dark | white, 10.7 to 1 | | 13 | `#1a4852` | `oklch(37.38% 0.0522 214.11)` | Moscow Midnight | white, 10 to 1 | | 14 | `#1c4c55` | `oklch(38.95% 0.0533 211.85)` | Iron Teal | white, 9.4 to 1 | | 15 | `#1e5259` | `oklch(40.60% 0.0550 207.84)` | Hidden Waters | white, 8.7 to 1 | | 16 | `#20575b` | `oklch(42.36% 0.0576 201.44)` | Uncharted | white, 8.1 to 1 | | 17 | `#225e5c` | `oklch(44.29% 0.0613 191.76)` | Emerald Pool | white, 7.4 to 1 | | 18 | `#286559` | `oklch(46.33% 0.0665 177.49)` | Eucalyptus Green | white, 6.7 to 1 | | 19 | `#366c50` | `oklch(48.48% 0.0729 159.85)` | Jungle Book Green | white, 6.1 to 1 | | 20 | `#4c7144` | `oklch(50.70% 0.0798 140.39)` | Artichoke Green | white, 5.6 to 1 | | 21 | `#657337` | `oklch(52.99% 0.0869 120.67)` | Muddy Green | white, 5.1 to 1 | | 22 | `#7d742c` | `oklch(55.32% 0.0936 102.23)` | Wood Garlic | white, 4.7 to 1 | | 23 | `#937529` | `oklch(57.67% 0.0994 86.64)` | Mode Beige | black, 4.8 to 1 | | 24 | `#a4772f` | `oklch(60.04% 0.1039 75.43)` | Natural Evolution | black, 5.2 to 1 | | 25 | `#b17b38` | `oklch(62.50% 0.1067 69.60)` | Durian | black, 5.7 to 1 | | 26 | `#bb8240` | `oklch(65.23% 0.1083 67.95)` | Kitsurubami Brown | black, 6.4 to 1 | | 27 | `#c48c48` | `oklch(68.11% 0.1090 69.47)` | Caramel Macchiato | black, 7.1 to 1 | | 28 | `#cb964f` | `oklch(71.00% 0.1090 73.14)` | Bengal | black, 8 to 1 | | 29 | `#d0a156` | `oklch(73.77% 0.1086 77.96)` | Bright Gold | black, 8.9 to 1 | | 30 | `#d3ac5d` | `oklch(76.26% 0.1080 82.94)` | French Pale Gold | black, 9.8 to 1 | | 31 | `#d6b463` | `oklch(78.36% 0.1076 87.07)` | Strike It Rich | black, 10.5 to 1 | | 32 | `#d9ba68` | `oklch(79.92% 0.1075 89.35)` | Misted Yellow | black, 11.1 to 1 | ## CSS ```css background: linear-gradient(90deg, #02101b 0.0%, #02131e 3.2%, #031622 6.5%, #041b27 9.7%, #05202d 12.9%, #062632 16.1%, #082c38 19.4%, #0a313d 22.6%, #0c3641 25.8%, #0f3b45 29.0%, #133f4a 32.3%, #16434e 35.5%, #1a4852 38.7%, #1c4c55 41.9%, #1e5259 45.2%, #20575b 48.4%, #225e5c 51.6%, #286559 54.8%, #366c50 58.1%, #4c7144 61.3%, #657337 64.5%, #7d742c 67.7%, #937529 71.0%, #a4772f 74.2%, #b17b38 77.4%, #bb8240 80.6%, #c48c48 83.9%, #cb964f 87.1%, #d0a156 90.3%, #d3ac5d 93.5%, #d6b463 96.8%, #d9ba68 100.0%); background: linear-gradient(90deg in oklch, oklch(16.54% 0.0331 240.47) 0.0%, oklch(17.68% 0.0343 238.78) 3.2%, oklch(19.23% 0.0360 236.54) 6.5%, oklch(21.06% 0.0380 233.87) 9.7%, oklch(23.10% 0.0402 230.91) 12.9%, oklch(25.22% 0.0425 227.77) 16.1%, oklch(27.34% 0.0448 224.59) 19.4%, oklch(29.34% 0.0469 221.51) 22.6%, oklch(31.14% 0.0486 218.68) 25.8%, oklch(32.78% 0.0499 216.92) 29.0%, oklch(34.34% 0.0507 216.00) 32.3%, oklch(35.86% 0.0514 215.28) 35.5%, oklch(37.38% 0.0522 214.11) 38.7%, oklch(38.95% 0.0533 211.85) 41.9%, oklch(40.60% 0.0550 207.84) 45.2%, oklch(42.36% 0.0576 201.44) 48.4%, oklch(44.29% 0.0613 191.76) 51.6%, oklch(46.33% 0.0665 177.49) 54.8%, oklch(48.48% 0.0729 159.85) 58.1%, oklch(50.70% 0.0798 140.39) 61.3%, oklch(52.99% 0.0869 120.67) 64.5%, oklch(55.32% 0.0936 102.23) 67.7%, oklch(57.67% 0.0994 86.64) 71.0%, oklch(60.04% 0.1039 75.43) 74.2%, oklch(62.50% 0.1067 69.60) 77.4%, oklch(65.23% 0.1083 67.95) 80.6%, oklch(68.11% 0.1090 69.47) 83.9%, oklch(71.00% 0.1090 73.14) 87.1%, oklch(73.77% 0.1086 77.96) 90.3%, oklch(76.26% 0.1080 82.94) 93.5%, oklch(78.36% 0.1076 87.07) 96.8%, oklch(79.92% 0.1075 89.35) 100.0%); ``` ## Keyframes 5 OKLCH keyframes joined by a Catmull-Rom spline. Hue is unwrapped degrees. | Keyframe | Lightness | Chroma | Hue | | --- | --- | --- | --- | | 1 | 0.165 | 0.033 | 240.5 | | 2 | 0.307 | 0.048 | 219.3 | | 3 | 0.433 | 0.059 | 197.1 | | 4 | 0.606 | 0.105 | 73.5 | | 5 | 0.799 | 0.107 | 89.4 | ## In these collections - [Navy and gold](https://grabient.com/navy-and-gold) ## Other forms - [JSON](https://grabient.com/kWKhirJxG9bcVvVNJjFZadBw.json?steps=32) - [PNG](https://grabient.com/kWKhirJxG9bcVvVNJjFZadBw.png?steps=32) - [SVG](https://grabient.com/kWKhirJxG9bcVvVNJjFZadBw.svg?steps=32) - [CSS](https://grabient.com/kWKhirJxG9bcVvVNJjFZadBw.css?steps=32) - [ASE](https://grabient.com/kWKhirJxG9bcVvVNJjFZadBw.ase?steps=32) - [GPL](https://grabient.com/kWKhirJxG9bcVvVNJjFZadBw.gpl?steps=32) - [GRD](https://grabient.com/kWKhirJxG9bcVvVNJjFZadBw.grd?steps=32) - [Design tokens](https://grabient.com/kWKhirJxG9bcVvVNJjFZadBw.tokens.json?steps=32) - [Social card](https://grabient.com/api/og?seed=kWKhirJxG9bcVvVNJjFZadBw&steps=32) - [Palettes like this one](https://grabient.com/palettes?q=kWKhirJxG9bcVvVNJjFZadBw) - [Guide for agents](https://grabient.com/llms.txt)