# Navy, teal and beige radial gradient

Navy, teal and beige radial gradient with 9 colors: #1c2d36, #244855, #326c77, #58898c, #83a5a0, #b3c7b8, #dce2cd, #ebe4ca, #f0ddc0. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kGRwtNkybHcYOloB3OLNHw3cA`
- Page: https://grabient.com/kGRwtNkybHcYOloB3OLNHw3cA?style=radialGradient&steps=9
- Drawn as: radial gradient, 9 steps, 90 degrees
- Kinds: dark to light, muted
- Hues: split-complementary
- Contrast of its darkest and lightest colors: 11.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 | `#1c2d36` | `oklch(28.64% 0.0279 232.12)` | Oceanic Noir | white, 14.2 to 1 |
| 2 | `#244855` | `oklch(37.94% 0.0468 223.53)` | Mallard | white, 9.8 to 1 |
| 3 | `#326c77` | `oklch(49.71% 0.0627 211.66)` | Ocean’s Embrace | white, 5.9 to 1 |
| 4 | `#58898c` | `oklch(59.63% 0.0531 201.31)` | Dusty Turquoise | black, 5.3 to 1 |
| 5 | `#83a5a0` | `oklch(69.51% 0.0381 185.35)` | Venus Teal | black, 7.8 to 1 |
| 6 | `#b3c7b8` | `oklch(81.10% 0.0310 153.60)` | Pine Whisper | black, 11.8 to 1 |
| 7 | `#dce2cd` | `oklch(90.25% 0.0288 119.96)` | Cavan | black, 15.8 to 1 |
| 8 | `#ebe4ca` | `oklch(91.70% 0.0357 95.13)` | Star of Gold | black, 16.4 to 1 |
| 9 | `#f0ddc0` | `oklch(90.55% 0.0437 78.48)` | Napery | black, 15.8 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #1c2d36 0.0%, #244855 12.5%, #326c77 25.0%, #58898c 37.5%, #83a5a0 50.0%, #b3c7b8 62.5%, #dce2cd 75.0%, #ebe4ca 87.5%, #f0ddc0 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(28.64% 0.0279 232.12) 0.0%, oklch(37.94% 0.0468 223.53) 12.5%, oklch(49.71% 0.0627 211.66) 25.0%, oklch(59.63% 0.0531 201.31) 37.5%, oklch(69.51% 0.0381 185.35) 50.0%, oklch(81.10% 0.0310 153.60) 62.5%, oklch(90.25% 0.0288 119.96) 75.0%, oklch(91.70% 0.0357 95.13) 87.5%, oklch(90.55% 0.0437 78.48) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.286 | 0.028 | 232.1 |
| 2 | 0.497 | 0.063 | 211.7 |
| 3 | 0.695 | 0.038 | 185.4 |
| 4 | 0.903 | 0.029 | 120 |
| 5 | 0.905 | 0.044 | 78.5 |

## In these collections

- [Color, Slightly Off](https://grabient.com/colour-slightly-off)

## Other forms

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