# Navy, teal and champagne elevation palette The Navy, teal and champagne elevation palette brings together dark blue, blue, teal, green, orange, and off-white. The colors span a broad lightness range, combining moderate color with clear contrast. Its balanced and composed character suits brand mood boards and editorial graphics. Its darkest tone is dark blue, and its lightest tone is off-white. - Also called: Navy, teal and white linear gradient - Seed: `kYQju3uSO-NElOvKG7pyJI1fkDwc` - Page: https://grabient.com/kYQju3uSO-NElOvKG7pyJI1fkDwc?steps=32 - Drawn as: linear gradient, 32 steps, 90 degrees - Kinds: vivid - Hues: wide - Contrast of its darkest and lightest colors: 13.6 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 | `#07224a` | `oklch(25.98% 0.0813 258.05)` | Oxford Blue | white, 15.6 to 1 | | 2 | `#082851` | `oklch(27.96% 0.0832 256.80)` | Dark Tyrian Blue | white, 14.6 to 1 | | 3 | `#0c2f59` | `oklch(30.68% 0.0858 255.34)` | Ambassador Blue | white, 13.3 to 1 | | 4 | `#103864` | `oklch(33.91% 0.0890 253.50)` | Lost in Space | white, 11.8 to 1 | | 5 | `#134270` | `oklch(37.41% 0.0922 251.13)` | Epic Adventure | white, 10.2 to 1 | | 6 | `#164d7b` | `oklch(40.94% 0.0952 248.07)` | Seashell Cove | white, 8.8 to 1 | | 7 | `#165885` | `oklch(44.26% 0.0975 244.15)` | Stunning Sapphire | white, 7.6 to 1 | | 8 | `#14638e` | `oklch(47.50% 0.0992 239.17)` | Kingfisher Blue | white, 6.5 to 1 | | 9 | `#116f97` | `oklch(51.10% 0.1008 233.12)` | Tofino Belue | white, 5.6 to 1 | | 10 | `#0d7c9e` | `oklch(54.78% 0.1022 226.26)` | Turkish Tile | white, 4.7 to 1 | | 11 | `#0c89a4` | `oklch(58.24% 0.1031 218.91)` | Capri Breeze | black, 5.1 to 1 | | 12 | `#1294a7` | `oklch(61.16% 0.1033 211.36)` | Brilliant | black, 5.7 to 1 | | 13 | `#1c9ca6` | `oklch(63.25% 0.1026 203.88)` | Turkish Boy | black, 6.3 to 1 | | 14 | `#269fa2` | `oklch(64.19% 0.1006 196.83)` | Baltic | black, 6.5 to 1 | | 15 | `#309f99` | `oklch(63.98% 0.0974 190.33)` | Baltic Green | black, 6.5 to 1 | | 16 | `#389b8f` | `oklch(62.97% 0.0931 183.94)` | Temple Guard Blue | black, 6.2 to 1 | | 17 | `#3f9684` | `oklch(61.52% 0.0883 177.19)` | Crisp Lettuce | black, 5.9 to 1 | | 18 | `#479078` | `oklch(59.99% 0.0833 169.59)` | Winter Green | black, 5.5 to 1 | | 19 | `#4f8b6d` | `oklch(58.73% 0.0784 160.67)` | Saltwater Depth | black, 5.2 to 1 | | 20 | `#5a8763` | `oklch(57.99% 0.0741 149.75)` | Spring Garden | black, 5 to 1 | | 21 | `#658157` | `oklch(56.93% 0.0701 135.24)` | Kale | black, 4.8 to 1 | | 22 | `#70794c` | `oklch(55.69% 0.0663 118.39)` | Verdant Views | white, 4.6 to 1 | | 23 | `#787246` | `oklch(54.70% 0.0624 101.07)` | Vineyard View | white, 4.8 to 1 | | 24 | `#7f6e48` | `oklch(54.42% 0.0582 85.10)` | Mossy Shade | white, 4.9 to 1 | | 25 | `#866e4f` | `oklch(55.28% 0.0537 72.36)` | French Bistre | white, 4.8 to 1 | | 26 | `#8e745c` | `oklch(57.74% 0.0485 64.66)` | Noble Crown | black, 4.8 to 1 | | 27 | `#9b836e` | `oklch(62.58% 0.0421 62.44)` | Petrified Oak | black, 5.8 to 1 | | 28 | `#ac9886` | `oklch(69.28% 0.0348 64.26)` | Quicksand | black, 7.6 to 1 | | 29 | `#c0b1a2` | `oklch(76.88% 0.0272 68.60)` | Balanced Beige | black, 10 to 1 | | 30 | `#d4cabe` | `oklch(84.40% 0.0201 73.94)` | Ashen Tan | black, 13 to 1 | | 31 | `#e6e0d7` | `oklch(90.85% 0.0140 78.77)` | Sunbleached | black, 15.9 to 1 | | 32 | `#f3efe8` | `oklch(95.28% 0.0096 81.57)` | Latte Froth | black, 18.2 to 1 | ## CSS ```css background: linear-gradient(90deg, #07224a 0.0%, #082851 3.2%, #0c2f59 6.5%, #103864 9.7%, #134270 12.9%, #164d7b 16.1%, #165885 19.4%, #14638e 22.6%, #116f97 25.8%, #0d7c9e 29.0%, #0c89a4 32.3%, #1294a7 35.5%, #1c9ca6 38.7%, #269fa2 41.9%, #309f99 45.2%, #389b8f 48.4%, #3f9684 51.6%, #479078 54.8%, #4f8b6d 58.1%, #5a8763 61.3%, #658157 64.5%, #70794c 67.7%, #787246 71.0%, #7f6e48 74.2%, #866e4f 77.4%, #8e745c 80.6%, #9b836e 83.9%, #ac9886 87.1%, #c0b1a2 90.3%, #d4cabe 93.5%, #e6e0d7 96.8%, #f3efe8 100.0%); background: linear-gradient(90deg in oklch, oklch(25.98% 0.0813 258.05) 0.0%, oklch(27.96% 0.0832 256.80) 3.2%, oklch(30.68% 0.0858 255.34) 6.5%, oklch(33.91% 0.0890 253.50) 9.7%, oklch(37.41% 0.0922 251.13) 12.9%, oklch(40.94% 0.0952 248.07) 16.1%, oklch(44.26% 0.0975 244.15) 19.4%, oklch(47.50% 0.0992 239.17) 22.6%, oklch(51.10% 0.1008 233.12) 25.8%, oklch(54.78% 0.1022 226.26) 29.0%, oklch(58.24% 0.1031 218.91) 32.3%, oklch(61.16% 0.1033 211.36) 35.5%, oklch(63.25% 0.1026 203.88) 38.7%, oklch(64.19% 0.1006 196.83) 41.9%, oklch(63.98% 0.0974 190.33) 45.2%, oklch(62.97% 0.0931 183.94) 48.4%, oklch(61.52% 0.0883 177.19) 51.6%, oklch(59.99% 0.0833 169.59) 54.8%, oklch(58.73% 0.0784 160.67) 58.1%, oklch(57.99% 0.0741 149.75) 61.3%, oklch(56.93% 0.0701 135.24) 64.5%, oklch(55.69% 0.0663 118.39) 67.7%, oklch(54.70% 0.0624 101.07) 71.0%, oklch(54.42% 0.0582 85.10) 74.2%, oklch(55.28% 0.0537 72.36) 77.4%, oklch(57.74% 0.0485 64.66) 80.6%, oklch(62.58% 0.0421 62.44) 83.9%, oklch(69.28% 0.0348 64.26) 87.1%, oklch(76.88% 0.0272 68.60) 90.3%, oklch(84.40% 0.0201 73.94) 93.5%, oklch(90.85% 0.0140 78.77) 96.8%, oklch(95.28% 0.0096 81.57) 100.0%); ``` ## Keyframes 6 OKLCH keyframes joined by a Catmull-Rom spline. Hue is unwrapped degrees. | Keyframe | Lightness | Chroma | Hue | | --- | --- | --- | --- | | 1 | 0.26 | 0.081 | 258 | | 2 | 0.449 | 0.098 | 243.3 | | 3 | 0.638 | 0.102 | 201 | | 4 | 0.583 | 0.076 | 154.5 | | 5 | 0.571 | 0.05 | 65.7 | | 6 | 0.953 | 0.01 | 81.6 | ## In these collections - [Elevation gradients](https://grabient.com/elevation-gradients) ## Other forms - [JSON](https://grabient.com/kYQju3uSO-NElOvKG7pyJI1fkDwc.json?steps=32) - [PNG](https://grabient.com/kYQju3uSO-NElOvKG7pyJI1fkDwc.png?steps=32) - [SVG](https://grabient.com/kYQju3uSO-NElOvKG7pyJI1fkDwc.svg?steps=32) - [CSS](https://grabient.com/kYQju3uSO-NElOvKG7pyJI1fkDwc.css?steps=32) - [ASE](https://grabient.com/kYQju3uSO-NElOvKG7pyJI1fkDwc.ase?steps=32) - [GPL](https://grabient.com/kYQju3uSO-NElOvKG7pyJI1fkDwc.gpl?steps=32) - [GRD](https://grabient.com/kYQju3uSO-NElOvKG7pyJI1fkDwc.grd?steps=32) - [Design tokens](https://grabient.com/kYQju3uSO-NElOvKG7pyJI1fkDwc.tokens.json?steps=32) - [Social card](https://grabient.com/api/og?seed=kYQju3uSO-NElOvKG7pyJI1fkDwc&steps=32) - [Palettes like this one](https://grabient.com/palettes?q=kYQju3uSO-NElOvKG7pyJI1fkDwc) - [Guide for agents](https://grabient.com/llms.txt)