# Reef stone to sunlit sand

Navy to beige radial gradient with 32 colors: #172330, #192735, #1d2b3a, #223141, #273749, #2c3f52, #30465a, #324e62, #315767, #2f6067, #346961, #486f54, #637246, #7f7240, #957146, #a67254, #b17660, #ba7b6a, #c3816f, #cb8971, #d29171, #d79972, #dba274, #deaa78, #e2b17e, #e4b987, #e6c191, #e8c89b, #e9cfa5, #ead5af, #ebd9b7, #ecddbd. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Navy to beige radial gradient
- Seed: `kWQBayNpI9k2dKhjIMJcpDCQ`
- Page: https://grabient.com/kWQBayNpI9k2dKhjIMJcpDCQ?style=radialGradient&steps=32&angle=0
- Drawn as: radial gradient, 32 steps, 0 degrees
- Kinds: dark to light
- Hues: complementary
- Contrast of its darkest and lightest colors: 11.8 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 | `#172330` | `oklch(25.20% 0.0303 250.31)` | Dark | white, 15.8 to 1 |
| 2 | `#192735` | `oklch(26.61% 0.0318 249.90)` | Abyssal Anchorfish Blue | white, 15.2 to 1 |
| 3 | `#1d2b3a` | `oklch(28.50% 0.0337 250.63)` | Oceanic Noir | white, 14.3 to 1 |
| 4 | `#223141` | `oklch(30.75% 0.0359 251.57)` | Imperial Primer | white, 13.2 to 1 |
| 5 | `#273749` | `oklch(33.25% 0.0384 251.79)` | In the Navy | white, 12 to 1 |
| 6 | `#2c3f52` | `oklch(35.88% 0.0412 250.35)` | Snap-Shot | white, 10.8 to 1 |
| 7 | `#30465a` | `oklch(38.54% 0.0441 246.32)` | Pickled Bluewood | white, 9.7 to 1 |
| 8 | `#324e62` | `oklch(41.11% 0.0472 238.77)` | Sovereignty | white, 8.7 to 1 |
| 9 | `#315767` | `oklch(43.49% 0.0504 226.66)` | Deep Loch | white, 7.8 to 1 |
| 10 | `#2f6067` | `oklch(45.82% 0.0541 207.52)` | After the Storm | white, 7 to 1 |
| 11 | `#346961` | `oklch(48.18% 0.0582 182.47)` | Seiheki Green | white, 6.2 to 1 |
| 12 | `#486f54` | `oklch(50.54% 0.0626 153.87)` | Fairway | white, 5.6 to 1 |
| 13 | `#637246` | `oklch(52.90% 0.0670 124.12)` | Grass Blade | white, 5.1 to 1 |
| 14 | `#7f7240` | `oklch(55.26% 0.0713 95.59)` | Italian Olive | white, 4.7 to 1 |
| 15 | `#957146` | `oklch(57.59% 0.0752 70.68)` | Tavern Creek | black, 4.7 to 1 |
| 16 | `#a67254` | `oklch(59.89% 0.0785 51.77)` | Pecan | black, 5.1 to 1 |
| 17 | `#b17660` | `oklch(62.16% 0.0812 40.81)` | Weathered Saddle | black, 5.6 to 1 |
| 18 | `#ba7b6a` | `oklch(64.45% 0.0839 36.29)` | Faneuil Brick | black, 6.1 to 1 |
| 19 | `#c3816f` | `oklch(66.74% 0.0865 36.61)` | Earthworm | black, 6.7 to 1 |
| 20 | `#cb8971` | `oklch(69.01% 0.0887 40.45)` | Subdued Sienna | black, 7.3 to 1 |
| 21 | `#d29171` | `oklch(71.25% 0.0904 46.49)` | Feldspar | black, 7.9 to 1 |
| 22 | `#d79972` | `oklch(73.42% 0.0913 53.42)` | Laredo | black, 8.6 to 1 |
| 23 | `#dba274` | `oklch(75.50% 0.0913 59.91)` | Japanese Yew | black, 9.4 to 1 |
| 24 | `#deaa78` | `oklch(77.48% 0.0901 64.63)` | Sweet Cashew | black, 10.1 to 1 |
| 25 | `#e2b17e` | `oklch(79.37% 0.0872 67.41)` | Imperial Gold | black, 10.8 to 1 |
| 26 | `#e4b987` | `oklch(81.27% 0.0824 70.31)` | Dune View | black, 11.6 to 1 |
| 27 | `#e6c191` | `oklch(83.13% 0.0761 73.32)` | Apple Turnover | black, 12.3 to 1 |
| 28 | `#e8c89b` | `oklch(84.90% 0.0690 76.31)` | Golden Talisman | black, 13.1 to 1 |
| 29 | `#e9cfa5` | `oklch(86.54% 0.0618 79.15)` | Harmonious Gold | black, 13.9 to 1 |
| 30 | `#ead5af` | `oklch(87.99% 0.0550 81.70)` | Summer Melon | black, 14.5 to 1 |
| 31 | `#ebd9b7` | `oklch(89.21% 0.0494 83.85)` | Porcelain Pink | black, 15.1 to 1 |
| 32 | `#ecddbd` | `oklch(90.16% 0.0455 85.46)` | Sandhill | black, 15.6 to 1 |

## CSS

```css
background: radial-gradient(circle at 50% 50%, #172330 0.0%, #192735 3.2%, #1d2b3a 6.5%, #223141 9.7%, #273749 12.9%, #2c3f52 16.1%, #30465a 19.4%, #324e62 22.6%, #315767 25.8%, #2f6067 29.0%, #346961 32.3%, #486f54 35.5%, #637246 38.7%, #7f7240 41.9%, #957146 45.2%, #a67254 48.4%, #b17660 51.6%, #ba7b6a 54.8%, #c3816f 58.1%, #cb8971 61.3%, #d29171 64.5%, #d79972 67.7%, #dba274 71.0%, #deaa78 74.2%, #e2b17e 77.4%, #e4b987 80.6%, #e6c191 83.9%, #e8c89b 87.1%, #e9cfa5 90.3%, #ead5af 93.5%, #ebd9b7 96.8%, #ecddbd 100.0%);
background: radial-gradient(circle at 50% 50% in oklch, oklch(25.20% 0.0303 250.31) 0.0%, oklch(26.61% 0.0318 249.90) 3.2%, oklch(28.50% 0.0337 250.63) 6.5%, oklch(30.75% 0.0359 251.57) 9.7%, oklch(33.25% 0.0384 251.79) 12.9%, oklch(35.88% 0.0412 250.35) 16.1%, oklch(38.54% 0.0441 246.32) 19.4%, oklch(41.11% 0.0472 238.77) 22.6%, oklch(43.49% 0.0504 226.66) 25.8%, oklch(45.82% 0.0541 207.52) 29.0%, oklch(48.18% 0.0582 182.47) 32.3%, oklch(50.54% 0.0626 153.87) 35.5%, oklch(52.90% 0.0670 124.12) 38.7%, oklch(55.26% 0.0713 95.59) 41.9%, oklch(57.59% 0.0752 70.68) 45.2%, oklch(59.89% 0.0785 51.77) 48.4%, oklch(62.16% 0.0812 40.81) 51.6%, oklch(64.45% 0.0839 36.29) 54.8%, oklch(66.74% 0.0865 36.61) 58.1%, oklch(69.01% 0.0887 40.45) 61.3%, oklch(71.25% 0.0904 46.49) 64.5%, oklch(73.42% 0.0913 53.42) 67.7%, oklch(75.50% 0.0913 59.91) 71.0%, oklch(77.48% 0.0901 64.63) 74.2%, oklch(79.37% 0.0872 67.41) 77.4%, oklch(81.27% 0.0824 70.31) 80.6%, oklch(83.13% 0.0761 73.32) 83.9%, oklch(84.90% 0.0690 76.31) 87.1%, oklch(86.54% 0.0618 79.15) 90.3%, oklch(87.99% 0.0550 81.70) 93.5%, oklch(89.21% 0.0494 83.85) 96.8%, oklch(90.16% 0.0455 85.46) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.252 | 0.03 | 250.3 |
| 2 | 0.429 | 0.05 | 230.2 |
| 3 | 0.61 | 0.08 | 45.3 |
| 4 | 0.78 | 0.09 | 65.4 |
| 5 | 0.902 | 0.045 | 85.5 |

## In these collections

- [Underwater colors](https://grabient.com/underwater-colors)

## Other forms

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