Navy and teal color palette

This palette moves from blue through teal to light teal. It steadily lightens across a moderate lightness range, combining strong color with clear contrast. Linear gradient, 32 colors at 135°: #00345f, #005679, #008297, #00a9a8, #38cbad. Edit and export CSS, SVG, PNG or a shader.

3 editable OKLCH keyframes.

• #00345f
• #003661
• #003963
• #003d66
• #004169
• #00466d
• #004b70
• #005074
• #005679
• #005b7d
• #006181
• #006785
• #006d89
• #00728d
• #007891
• #007d94
• #008297
• #00879a
• #008d9d
• #0092a0
• #0098a2
• #009ea4
• #00a4a7
• #00a9a8
• #00afaa
• #00b5ab
• #00baac
• #00bfac
• #00c3ad
• #16c7ad
• #2cc9ad
• #38cbad

CSS

background: linear-gradient(135deg in oklch, oklch(31.90% 0.0913 250.41) 0.0%, oklch(32.75% 0.0907 249.15) 3.2%, oklch(33.78% 0.0901 247.64) 6.5%, oklch(34.97% 0.0897 245.91) 9.7%, oklch(36.30% 0.0895 243.99) 12.9%, oklch(37.75% 0.0894 241.89) 16.1%, oklch(39.31% 0.0895 239.64) 19.4%, oklch(40.94% 0.0898 237.27) 22.6%, oklch(42.63% 0.0902 234.80) 25.8%, oklch(44.36% 0.0908 232.25) 29.0%, oklch(46.11% 0.0915 229.65) 32.3%, oklch(47.86% 0.0924 227.02) 35.5%, oklch(49.58% 0.0934 224.38) 38.7%, oklch(51.26% 0.0945 221.76) 41.9%, oklch(52.87% 0.0957 219.19) 45.2%, oklch(54.40% 0.0970 216.68) 48.4%, oklch(55.84% 0.0983 214.22) 51.6%, oklch(57.32% 0.0997 211.60) 54.8%, oklch(58.85% 0.1014 208.83) 58.1%, oklch(60.40% 0.1033 205.94) 61.3%, oklch(61.98% 0.1055 202.97) 64.5%, oklch(63.55% 0.1080 199.95) 67.7%, oklch(65.10% 0.1108 196.92) 71.0%, oklch(66.63% 0.1139 193.92) 74.2%, oklch(68.11% 0.1173 190.99) 77.4%, oklch(69.53% 0.1209 188.15) 80.6%, oklch(70.88% 0.1246 185.45) 83.9%, oklch(72.14% 0.1285 182.92) 87.1%, oklch(73.30% 0.1324 180.61) 90.3%, oklch(74.33% 0.1334 178.54) 93.5%, oklch(75.23% 0.1312 176.75) 96.8%, oklch(75.98% 0.1295 175.28) 100.0%);

In these collections

Navy and teal gradientsHero section gradients

Similar palettesCollectionsDownload PNGPalette JSONMarkdownHow it works