# Navy and Teal: Cobalt blue and near-black

This palette moves from blue through dark gray to teal. It darkens and then lightens across a broad lightness range, combining moderate color with clear contrast. Its balanced and composed character suits brand mood boards and social graphics, especially compositions that need a controlled shift between darker and lighter areas.

- Also called: Analogous blue, black and teal radial gradient
- Seed: `kSfz61kwO8dQvO8`
- Page: https://grabient.com/kSfz61kwO8dQvO8?style=radialGradient&steps=40&angle=210
- Drawn as: radial gradient, 40 steps, 210 degrees
- Kinds: dark center, dark, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 6.7 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 | `#416593` | `oklch(50.00% 0.0854 255.23)` | Too Blue | white, 6 to 1 |
| 2 | `#3e628e` | `oklch(48.90% 0.0831 254.41)` | Blue Beret | white, 6.2 to 1 |
| 3 | `#3a5e88` | `oklch(47.45% 0.0799 253.45)` | Luxurious Blue | white, 6.6 to 1 |
| 4 | `#375980` | `oklch(45.68% 0.0760 252.36)` | Dark Blue | white, 7.2 to 1 |
| 5 | `#325478` | `oklch(43.64% 0.0715 251.17)` | Aerostatics | white, 7.8 to 1 |
| 6 | `#2e4e6e` | `oklch(41.39% 0.0666 249.87)` | Celestial Blue | white, 8.6 to 1 |
| 7 | `#294764` | `oklch(38.98% 0.0613 248.49)` | Stay the Night | white, 9.5 to 1 |
| 8 | `#25415a` | `oklch(36.44% 0.0557 247.01)` | Salty Dog | white, 10.6 to 1 |
| 9 | `#203a50` | `oklch(33.85% 0.0500 245.47)` | Subterranean River | white, 11.7 to 1 |
| 10 | `#1c3346` | `oklch(31.23% 0.0443 243.86)` | Blue Whale | white, 12.9 to 1 |
| 11 | `#182d3c` | `oklch(28.64% 0.0386 242.20)` | Tangaroa | white, 14.2 to 1 |
| 12 | `#152633` | `oklch(26.13% 0.0332 240.50)` | Abyssal Anchorfish Blue | white, 15.4 to 1 |
| 13 | `#12212b` | `oklch(23.75% 0.0280 238.76)` | Crow Feather | white, 16.5 to 1 |
| 14 | `#0f1b23` | `oklch(21.55% 0.0232 237.00)` | Black Stallion | white, 17.4 to 1 |
| 15 | `#0d171c` | `oklch(19.58% 0.0190 235.22)` | Black Stallion | white, 18.2 to 1 |
| 16 | `#0b1317` | `oklch(17.88% 0.0153 233.44)` | Midnight Edition | white, 18.8 to 1 |
| 17 | `#090f13` | `oklch(16.50% 0.0124 231.67)` | Ruined Smores | white, 19.2 to 1 |
| 18 | `#080d10` | `oklch(15.50% 0.0104 229.91)` | Dark Side of the Moon | white, 19.5 to 1 |
| 19 | `#070c0e` | `oklch(14.93% 0.0093 228.18)` | Dark Side of the Moon | white, 19.6 to 1 |
| 20 | `#070c0e` | `oklch(14.82% 0.0092 226.48)` | Dark Side of the Moon | white, 19.6 to 1 |
| 21 | `#070d0f` | `oklch(15.24% 0.0104 224.80)` | Dark Side of the Moon | white, 19.5 to 1 |
| 22 | `#080f12` | `oklch(16.21% 0.0128 223.04)` | Dark Side of the Moon | white, 19.3 to 1 |
| 23 | `#091316` | `oklch(17.69% 0.0163 221.18)` | Midnight Edition | white, 18.8 to 1 |
| 24 | `#0a171c` | `oklch(19.61% 0.0209 219.24)` | Black Is Back | white, 18.1 to 1 |
| 25 | `#0b1d22` | `oklch(21.93% 0.0264 217.24)` | Black Stallion | white, 17.2 to 1 |
| 26 | `#0b252a` | `oklch(24.59% 0.0327 215.20)` | Sunken Ship | white, 16 to 1 |
| 27 | `#0b2d33` | `oklch(27.53% 0.0396 213.12)` | Black Chasm | white, 14.6 to 1 |
| 28 | `#0b363d` | `oklch(30.70% 0.0470 211.03)` | Firmament Blue | white, 13 to 1 |
| 29 | `#084047` | `oklch(34.03% 0.0548 208.94)` | Warm Black | white, 11.4 to 1 |
| 30 | `#044a52` | `oklch(37.49% 0.0628 206.87)` | Midnight Green | white, 9.9 to 1 |
| 31 | `#00555c` | `oklch(41.00% 0.0700 204.85)` | Deep Teal | white, 8.5 to 1 |
| 32 | `#006066` | `oklch(44.52% 0.0758 202.86)` | Beau Vert | white, 7.3 to 1 |
| 33 | `#006b70` | `oklch(47.99% 0.0816 200.94)` | Deep Lake | white, 6.2 to 1 |
| 34 | `#00767a` | `oklch(51.35% 0.0873 199.11)` | Maxi Teal | white, 5.4 to 1 |
| 35 | `#008083` | `oklch(54.54% 0.0928 197.37)` | Teal | white, 4.7 to 1 |
| 36 | `#008a8c` | `oklch(57.52% 0.0980 195.76)` | Industrial Blue | black, 5 to 1 |
| 37 | `#009493` | `oklch(60.23% 0.1029 194.27)` | Paradise Landscape | black, 5.6 to 1 |
| 38 | `#009c9a` | `oklch(62.60% 0.1072 192.93)` | Regula Barbara Blue | black, 6.2 to 1 |
| 39 | `#00a39f` | `oklch(64.59% 0.1110 191.76)` | Silken Jade | black, 6.7 to 1 |
| 40 | `#00a8a3` | `oklch(66.14% 0.1139 190.77)` | Jadestone | black, 7.1 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #416593 0.0%, #3e628e 2.6%, #3a5e88 5.1%, #375980 7.7%, #325478 10.3%, #2e4e6e 12.8%, #294764 15.4%, #25415a 17.9%, #203a50 20.5%, #1c3346 23.1%, #182d3c 25.6%, #152633 28.2%, #12212b 30.8%, #0f1b23 33.3%, #0d171c 35.9%, #0b1317 38.5%, #090f13 41.0%, #080d10 43.6%, #070c0e 46.2%, #070c0e 48.7%, #070d0f 51.3%, #080f12 53.8%, #091316 56.4%, #0a171c 59.0%, #0b1d22 61.5%, #0b252a 64.1%, #0b2d33 66.7%, #0b363d 69.2%, #084047 71.8%, #044a52 74.4%, #00555c 76.9%, #006066 79.5%, #006b70 82.1%, #00767a 84.6%, #008083 87.2%, #008a8c 89.7%, #009493 92.3%, #009c9a 94.9%, #00a39f 97.4%, #00a8a3 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(50.00% 0.0854 255.23) 0.0%, oklch(48.90% 0.0831 254.41) 2.6%, oklch(47.45% 0.0799 253.45) 5.1%, oklch(45.68% 0.0760 252.36) 7.7%, oklch(43.64% 0.0715 251.17) 10.3%, oklch(41.39% 0.0666 249.87) 12.8%, oklch(38.98% 0.0613 248.49) 15.4%, oklch(36.44% 0.0557 247.01) 17.9%, oklch(33.85% 0.0500 245.47) 20.5%, oklch(31.23% 0.0443 243.86) 23.1%, oklch(28.64% 0.0386 242.20) 25.6%, oklch(26.13% 0.0332 240.50) 28.2%, oklch(23.75% 0.0280 238.76) 30.8%, oklch(21.55% 0.0232 237.00) 33.3%, oklch(19.58% 0.0190 235.22) 35.9%, oklch(17.88% 0.0153 233.44) 38.5%, oklch(16.50% 0.0124 231.67) 41.0%, oklch(15.50% 0.0104 229.91) 43.6%, oklch(14.93% 0.0093 228.18) 46.2%, oklch(14.82% 0.0092 226.48) 48.7%, oklch(15.24% 0.0104 224.80) 51.3%, oklch(16.21% 0.0128 223.04) 53.8%, oklch(17.69% 0.0163 221.18) 56.4%, oklch(19.61% 0.0209 219.24) 59.0%, oklch(21.93% 0.0264 217.24) 61.5%, oklch(24.59% 0.0327 215.20) 64.1%, oklch(27.53% 0.0396 213.12) 66.7%, oklch(30.70% 0.0470 211.03) 69.2%, oklch(34.03% 0.0548 208.94) 71.8%, oklch(37.49% 0.0628 206.87) 74.4%, oklch(41.00% 0.0700 204.85) 76.9%, oklch(44.52% 0.0758 202.86) 79.5%, oklch(47.99% 0.0816 200.94) 82.1%, oklch(51.35% 0.0873 199.11) 84.6%, oklch(54.54% 0.0928 197.37) 87.2%, oklch(57.52% 0.0980 195.76) 89.7%, oklch(60.23% 0.1029 194.27) 92.3%, oklch(62.60% 0.1072 192.93) 94.9%, oklch(64.59% 0.1110 191.76) 97.4%, oklch(66.14% 0.1139 190.77) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.5 | 0.085 | 255.2 |
| 2 | 0.15 | 0.01 | 225.6 |
| 3 | 0.661 | 0.13 | 190.8 |

## In these collections

- [Navy and teal gradients](https://grabient.com/navy-and-teal-gradients)

## Other forms

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