# Blue and teal color palette The Blue and teal color palette brings together dark blue, blue, and teal. The colors span a very broad lightness range, combining strong color with high contrast. Its bold and dramatic character suits game interface concepts and stream graphics. Its darkest tone is dark blue, and its lightest tone is teal. - Also called: Cool navy, blue and cyan linear gradient - Seed: `kYLDzHojg_DPOPvJ0D84LU8fKzOm` - Page: https://grabient.com/kYLDzHojg_DPOPvJ0D84LU8fKzOm?steps=32 - Drawn as: linear gradient, 32 steps, 90 degrees - Kinds: dark to light, vivid, cool - Hues: analogous - Contrast of its darkest and lightest colors: 15.1 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 | `#0c0632` | `oklch(17.32% 0.0827 280.55)` | Cosmic Void | white, 19.2 to 1 | | 2 | `#0e0638` | `oklch(18.26% 0.0903 279.78)` | Congressional Navy | white, 19 to 1 | | 3 | `#100740` | `oklch(19.52% 0.1009 278.75)` | Floppy Disk | white, 18.6 to 1 | | 4 | `#11074a` | `oklch(21.02% 0.1134 277.51)` | Silent Twilight | white, 18.1 to 1 | | 5 | `#130855` | `oklch(22.72% 0.1268 276.15)` | Scoop of Dark Matter | white, 17.6 to 1 | | 6 | `#150961` | `oklch(24.53% 0.1401 274.76)` | Underground Stream | white, 16.9 to 1 | | 7 | `#160b6c` | `oklch(26.40% 0.1521 273.41)` | Dying Storm Blue | white, 16.1 to 1 | | 8 | `#170f78` | `oklch(28.31% 0.1631 272.10)` | Prunelle | white, 15.2 to 1 | | 9 | `#171384` | `oklch(30.35% 0.1744 270.71)` | Galactic Cruise | white, 14.3 to 1 | | 10 | `#171890` | `oklch(32.50% 0.1855 269.29)` | Royal | white, 13.3 to 1 | | 11 | `#151f9d` | `oklch(34.76% 0.1960 267.86)` | Deepsea Kraken | white, 12.2 to 1 | | 12 | `#1226aa` | `oklch(37.11% 0.2052 266.48)` | City Hunter Blue | white, 11.1 to 1 | | 13 | `#0e2eb6` | `oklch(39.55% 0.2126 265.18)` | Blue Screen of Death | white, 10.1 to 1 | | 14 | `#0837c1` | `oklch(42.08% 0.2180 264.10)` | Blue Screen of Death | white, 9 to 1 | | 15 | `#0740cd` | `oklch(44.75% 0.2223 263.48)` | Third Eye Chakra | white, 8 to 1 | | 16 | `#0a49d8` | `oklch(47.52% 0.2252 263.07)` | Merchant Marine Blue | white, 7.1 to 1 | | 17 | `#0e53e2` | `oklch(50.37% 0.2266 262.55)` | Frosted Blueberries | white, 6.2 to 1 | | 18 | `#0e5eec` | `oklch(53.26% 0.2261 261.59)` | Azul | white, 5.4 to 1 | | 19 | `#0769f4` | `oklch(56.15% 0.2233 259.88)` | Epic Blue | white, 4.8 to 1 | | 20 | `#0077f7` | `oklch(59.03% 0.2108 257.15)` | Blue Darknut | black, 4.9 to 1 | | 21 | `#0085f7` | `oklch(61.99% 0.1947 253.59)` | Bubble Bobble P2 | black, 5.6 to 1 | | 22 | `#0093f7` | `oklch(65.01% 0.1811 249.38)` | Starfleet Blue | black, 6.4 to 1 | | 23 | `#00a0f9` | `oklch(68.03% 0.1698 244.59)` | Fresh Blue of Bel Air | black, 7.3 to 1 | | 24 | `#00acfa` | `oklch(70.99% 0.1607 239.30)` | Krishna Blue | black, 8.3 to 1 | | 25 | `#06b8fb` | `oklch(73.83% 0.1529 233.58)` | Blue Bolt | black, 9.2 to 1 | | 26 | `#19c4fa` | `oklch(76.51% 0.1448 227.50)` | Shovel Knight | black, 10.2 to 1 | | 27 | `#1ccff9` | `oklch(79.19% 0.1406 220.13)` | Tropical Turquoise | black, 11.3 to 1 | | 28 | `#1edbf7` | `oklch(81.88% 0.1388 211.63)` | Vaporwave Blue | black, 12.5 to 1 | | 29 | `#27e6f4` | `oklch(84.45% 0.1387 202.79)` | Whimsical Blue | black, 13.6 to 1 | | 30 | `#35f0ef` | `oklch(86.77% 0.1395 194.42)` | Aqua Cyan | black, 14.8 to 1 | | 31 | `#46f7ea` | `oklch(88.72% 0.1404 187.32)` | Bright Aqua | black, 15.7 to 1 | | 32 | `#54fde6` | `oklch(90.16% 0.1406 182.27)` | Icy Life | black, 16.5 to 1 | ## CSS ```css background: linear-gradient(90deg, #0c0632 0.0%, #0e0638 3.2%, #100740 6.5%, #11074a 9.7%, #130855 12.9%, #150961 16.1%, #160b6c 19.4%, #170f78 22.6%, #171384 25.8%, #171890 29.0%, #151f9d 32.3%, #1226aa 35.5%, #0e2eb6 38.7%, #0837c1 41.9%, #0740cd 45.2%, #0a49d8 48.4%, #0e53e2 51.6%, #0e5eec 54.8%, #0769f4 58.1%, #0077f7 61.3%, #0085f7 64.5%, #0093f7 67.7%, #00a0f9 71.0%, #00acfa 74.2%, #06b8fb 77.4%, #19c4fa 80.6%, #1ccff9 83.9%, #1edbf7 87.1%, #27e6f4 90.3%, #35f0ef 93.5%, #46f7ea 96.8%, #54fde6 100.0%); background: linear-gradient(90deg in oklch, oklch(17.32% 0.0827 280.55) 0.0%, oklch(18.26% 0.0903 279.78) 3.2%, oklch(19.52% 0.1009 278.75) 6.5%, oklch(21.02% 0.1134 277.51) 9.7%, oklch(22.72% 0.1268 276.15) 12.9%, oklch(24.53% 0.1401 274.76) 16.1%, oklch(26.40% 0.1521 273.41) 19.4%, oklch(28.31% 0.1631 272.10) 22.6%, oklch(30.35% 0.1744 270.71) 25.8%, oklch(32.50% 0.1855 269.29) 29.0%, oklch(34.76% 0.1960 267.86) 32.3%, oklch(37.11% 0.2052 266.48) 35.5%, oklch(39.55% 0.2126 265.18) 38.7%, oklch(42.08% 0.2180 264.10) 41.9%, oklch(44.75% 0.2223 263.48) 45.2%, oklch(47.52% 0.2252 263.07) 48.4%, oklch(50.37% 0.2266 262.55) 51.6%, oklch(53.26% 0.2261 261.59) 54.8%, oklch(56.15% 0.2233 259.88) 58.1%, oklch(59.03% 0.2108 257.15) 61.3%, oklch(61.99% 0.1947 253.59) 64.5%, oklch(65.01% 0.1811 249.38) 67.7%, oklch(68.03% 0.1698 244.59) 71.0%, oklch(70.99% 0.1607 239.30) 74.2%, oklch(73.83% 0.1529 233.58) 77.4%, oklch(76.51% 0.1448 227.50) 80.6%, oklch(79.19% 0.1406 220.13) 83.9%, oklch(81.88% 0.1388 211.63) 87.1%, oklch(84.45% 0.1387 202.79) 90.3%, oklch(86.77% 0.1395 194.42) 93.5%, oklch(88.72% 0.1404 187.32) 96.8%, oklch(90.16% 0.1406 182.27) 100.0%); ``` ## Keyframes 6 OKLCH keyframes joined by a Catmull-Rom spline. Hue is unwrapped degrees. | Keyframe | Lightness | Chroma | Hue | | --- | --- | --- | --- | | 1 | 0.173 | 0.083 | 280.5 | | 2 | 0.268 | 0.154 | 273.1 | | 3 | 0.406 | 0.215 | 264.7 | | 4 | 0.579 | 0.22 | 258.4 | | 5 | 0.76 | 0.146 | 228.8 | | 6 | 0.902 | 0.141 | 182.3 | ## In these collections - [Cyberpunk gradients](https://grabient.com/cyberpunk-gradients) - [Neon gradients](https://grabient.com/neon-gradients) - [Cool gradients](https://grabient.com/cool-gradients) ## Other forms - [JSON](https://grabient.com/kYLDzHojg_DPOPvJ0D84LU8fKzOm.json?steps=32) - [PNG](https://grabient.com/kYLDzHojg_DPOPvJ0D84LU8fKzOm.png?steps=32) - [SVG](https://grabient.com/kYLDzHojg_DPOPvJ0D84LU8fKzOm.svg?steps=32) - [CSS](https://grabient.com/kYLDzHojg_DPOPvJ0D84LU8fKzOm.css?steps=32) - [ASE](https://grabient.com/kYLDzHojg_DPOPvJ0D84LU8fKzOm.ase?steps=32) - [GPL](https://grabient.com/kYLDzHojg_DPOPvJ0D84LU8fKzOm.gpl?steps=32) - [GRD](https://grabient.com/kYLDzHojg_DPOPvJ0D84LU8fKzOm.grd?steps=32) - [Design tokens](https://grabient.com/kYLDzHojg_DPOPvJ0D84LU8fKzOm.tokens.json?steps=32) - [Social card](https://grabient.com/api/og?seed=kYLDzHojg_DPOPvJ0D84LU8fKzOm&steps=32) - [Palettes like this one](https://grabient.com/palettes?q=kYLDzHojg_DPOPvJ0D84LU8fKzOm) - [Guide for agents](https://grabient.com/llms.txt)