# Navy and teal color palette

This palette moves from dark blue through blue to light teal. It steadily lightens across a broad lightness range, combining moderate color with clear contrast. Its balanced and composed character suits website sections and presentation backgrounds, especially compositions that need a controlled shift between darker and lighter areas.

- Also called: Monochrome black to light blue linear gradient
- Seed: `kSORexsZu-uOnvG`
- Page: https://grabient.com/kSORexsZu-uOnvG?steps=32&angle=135
- Drawn as: linear gradient, 32 steps, 135 degrees
- Kinds: dark to light, vivid, cool, monochrome
- Hues: analogous
- Contrast of its darkest and lightest colors: 8.9 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 | `#101d2a` | `oklch(22.44% 0.0317 249.61)` | The Count’s Black | white, 17.1 to 1 |
| 2 | `#101e2c` | `oklch(23.00% 0.0333 249.26)` | The Count’s Black | white, 16.8 to 1 |
| 3 | `#10202e` | `oklch(23.60% 0.0353 248.90)` | The Count’s Black | white, 16.6 to 1 |
| 4 | `#112131` | `oklch(24.26% 0.0376 248.52)` | The Count’s Black | white, 16.3 to 1 |
| 5 | `#112334` | `oklch(24.97% 0.0402 248.10)` | Fog of War | white, 15.9 to 1 |
| 6 | `#112537` | `oklch(25.75% 0.0430 247.65)` | Celestial Canvas | white, 15.6 to 1 |
| 7 | `#11273b` | `oklch(26.59% 0.0461 247.16)` | Celestial Canvas | white, 15.2 to 1 |
| 8 | `#112a3e` | `oklch(27.51% 0.0492 246.62)` | Eternal Darkness | white, 14.7 to 1 |
| 9 | `#112c42` | `oklch(28.50% 0.0525 246.02)` | NATO Blue | white, 14.3 to 1 |
| 10 | `#112f47` | `oklch(29.58% 0.0558 245.36)` | Crow Black Blue | white, 13.7 to 1 |
| 11 | `#12324b` | `oklch(30.75% 0.0592 244.63)` | Sea of Stars | white, 13.2 to 1 |
| 12 | `#123650` | `oklch(32.01% 0.0625 243.82)` | Sea of Stars | white, 12.6 to 1 |
| 13 | `#123a55` | `oklch(33.37% 0.0657 242.92)` | Gibraltar Sea | white, 11.9 to 1 |
| 14 | `#123e5b` | `oklch(34.83% 0.0688 241.94)` | Poseidon | white, 11.2 to 1 |
| 15 | `#134260` | `oklch(36.40% 0.0718 240.86)` | Neptune’s Wrath | white, 10.5 to 1 |
| 16 | `#144766` | `oklch(38.09% 0.0745 239.68)` | Terror From the Deep | white, 9.8 to 1 |
| 17 | `#154d6c` | `oklch(39.92% 0.0770 238.36)` | Indigo Cloth | white, 9.1 to 1 |
| 18 | `#175373` | `oklch(42.05% 0.0796 236.80)` | Midnight Sonata | white, 8.3 to 1 |
| 19 | `#1a5a7b` | `oklch(44.46% 0.0821 235.03)` | Commandes | white, 7.4 to 1 |
| 20 | `#1d6383` | `oklch(47.10% 0.0847 233.06)` | Blue Sapphire | white, 6.6 to 1 |
| 21 | `#216b8b` | `oklch(49.91% 0.0872 230.96)` | Saxony Blue | white, 5.8 to 1 |
| 22 | `#257594` | `oklch(52.86% 0.0897 228.75)` | Devil Blue | white, 5.1 to 1 |
| 23 | `#297f9e` | `oklch(55.88% 0.0921 226.47)` | Summer Blue | black, 4.6 to 1 |
| 24 | `#2e89a7` | `oklch(58.93% 0.0945 224.16)` | Mediterranean Sea | black, 5.2 to 1 |
| 25 | `#3393b0` | `oklch(61.96% 0.0968 221.87)` | Enchanted Well | black, 5.9 to 1 |
| 26 | `#399db8` | `oklch(64.92% 0.0990 219.63)` | Sports Blue | black, 6.6 to 1 |
| 27 | `#3ea6c0` | `oklch(67.76% 0.1010 217.48)` | Moonstone | black, 7.4 to 1 |
| 28 | `#43b0c8` | `oklch(70.42% 0.1029 215.46)` | Viking | black, 8.2 to 1 |
| 29 | `#48b8cf` | `oklch(72.86% 0.1047 213.60)` | Teal Moiré | black, 9 to 1 |
| 30 | `#4dc0d5` | `oklch(75.03% 0.1063 211.96)` | Skink Blue | black, 9.7 to 1 |
| 31 | `#51c6da` | `oklch(76.87% 0.1077 210.56)` | Naxos Sky | black, 10.4 to 1 |
| 32 | `#54cbde` | `oklch(78.35% 0.1089 209.45)` | Watercourse | black, 11 to 1 |

## CSS

```css
background: linear-gradient(135deg, #101d2a 0.0%, #101e2c 3.2%, #10202e 6.5%, #112131 9.7%, #112334 12.9%, #112537 16.1%, #11273b 19.4%, #112a3e 22.6%, #112c42 25.8%, #112f47 29.0%, #12324b 32.3%, #123650 35.5%, #123a55 38.7%, #123e5b 41.9%, #134260 45.2%, #144766 48.4%, #154d6c 51.6%, #175373 54.8%, #1a5a7b 58.1%, #1d6383 61.3%, #216b8b 64.5%, #257594 67.7%, #297f9e 71.0%, #2e89a7 74.2%, #3393b0 77.4%, #399db8 80.6%, #3ea6c0 83.9%, #43b0c8 87.1%, #48b8cf 90.3%, #4dc0d5 93.5%, #51c6da 96.8%, #54cbde 100.0%);
background: linear-gradient(135deg in oklch, oklch(22.44% 0.0317 249.61) 0.0%, oklch(23.00% 0.0333 249.26) 3.2%, oklch(23.60% 0.0353 248.90) 6.5%, oklch(24.26% 0.0376 248.52) 9.7%, oklch(24.97% 0.0402 248.10) 12.9%, oklch(25.75% 0.0430 247.65) 16.1%, oklch(26.59% 0.0461 247.16) 19.4%, oklch(27.51% 0.0492 246.62) 22.6%, oklch(28.50% 0.0525 246.02) 25.8%, oklch(29.58% 0.0558 245.36) 29.0%, oklch(30.75% 0.0592 244.63) 32.3%, oklch(32.01% 0.0625 243.82) 35.5%, oklch(33.37% 0.0657 242.92) 38.7%, oklch(34.83% 0.0688 241.94) 41.9%, oklch(36.40% 0.0718 240.86) 45.2%, oklch(38.09% 0.0745 239.68) 48.4%, oklch(39.92% 0.0770 238.36) 51.6%, oklch(42.05% 0.0796 236.80) 54.8%, oklch(44.46% 0.0821 235.03) 58.1%, oklch(47.10% 0.0847 233.06) 61.3%, oklch(49.91% 0.0872 230.96) 64.5%, oklch(52.86% 0.0897 228.75) 67.7%, oklch(55.88% 0.0921 226.47) 71.0%, oklch(58.93% 0.0945 224.16) 74.2%, oklch(61.96% 0.0968 221.87) 77.4%, oklch(64.92% 0.0990 219.63) 80.6%, oklch(67.76% 0.1010 217.48) 83.9%, oklch(70.42% 0.1029 215.46) 87.1%, oklch(72.86% 0.1047 213.60) 90.3%, oklch(75.03% 0.1063 211.96) 93.5%, oklch(76.87% 0.1077 210.56) 96.8%, oklch(78.35% 0.1089 209.45) 100.0%);
```

## Keyframes

3 OKLCH keyframes joined by a Catmull-Rom spline. Hue is unwrapped degrees.

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.224 | 0.032 | 249.6 |
| 2 | 0.39 | 0.076 | 239 |
| 3 | 0.783 | 0.109 | 209.5 |

## In these collections

- [Between tides](https://grabient.com/between-tides)
- [Discord server banner gradients](https://grabient.com/discord-server-banner-gradients)
- [Hero section gradients](https://grabient.com/hero-section-gradients)

## Other forms

- [JSON](https://grabient.com/kSORexsZu-uOnvG.json?steps=32&angle=135)
- [PNG](https://grabient.com/kSORexsZu-uOnvG.png?steps=32&angle=135)
- [SVG](https://grabient.com/kSORexsZu-uOnvG.svg?steps=32&angle=135)
- [CSS](https://grabient.com/kSORexsZu-uOnvG.css?steps=32&angle=135)
- [ASE](https://grabient.com/kSORexsZu-uOnvG.ase?steps=32&angle=135)
- [GPL](https://grabient.com/kSORexsZu-uOnvG.gpl?steps=32&angle=135)
- [GRD](https://grabient.com/kSORexsZu-uOnvG.grd?steps=32&angle=135)
- [Design tokens](https://grabient.com/kSORexsZu-uOnvG.tokens.json?steps=32&angle=135)
- [Social card](https://grabient.com/api/og?seed=kSORexsZu-uOnvG&steps=32&angle=135)
- [Palettes like this one](https://grabient.com/palettes?q=kSORexsZu-uOnvG)
- [Guide for agents](https://grabient.com/llms.txt)