# Bioluminescent violet water gradient

Navy, purple and blue angular swatches with 48 colors: #100a2f, #120b31, #140c34, #160d38, #190f3c, #1c1040, #1f1245, #22144a, #26164f, #2a1854, #2e1a5a, #331c5f, #371e64, #3c2069, #40236e, #452572, #4a2776, #4f297a, #552b7d, #5b2c80, #622e82, #693084, #703185, #763387, #7d3588, #843789, #893a8b, #8f3d8d, #944090, #974494, #9a4899, #9c4c9f, #9c51a7, #9a58b0, #975fba, #9167c4, #8a6fcd, #8078d4, #7581d9, #698bdb, #5c93dc, #509bd9, #45a3d5, #3ea9d1, #3caecb, #3eb2c6, #42b5c1, #47b8be. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Navy, purple and blue angular swatches
- Seed: `kULjPKra9BsY2wvbpLEg`
- Page: https://grabient.com/kULjPKra9BsY2wvbpLEg?style=angularSwatches&steps=48&angle=225
- Drawn as: angular swatches, 48 steps, 225 degrees
- Kinds: dark to light
- Hues: two-hue
- Contrast of its darkest and lightest colors: 7.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 | `#100a2f` | `oklch(18.11% 0.0703 284.77)` | Spanish Roast | white, 18.9 to 1 |
| 2 | `#120b31` | `oklch(18.74% 0.0725 285.28)` | Spanish Roast | white, 18.7 to 1 |
| 3 | `#140c34` | `oklch(19.50% 0.0752 285.86)` | Spanish Roast | white, 18.5 to 1 |
| 4 | `#160d38` | `oklch(20.37% 0.0785 286.52)` | Grim Reaper | white, 18.2 to 1 |
| 5 | `#190f3c` | `oklch(21.34% 0.0821 287.24)` | Midnight Monarch | white, 17.9 to 1 |
| 6 | `#1c1040` | `oklch(22.40% 0.0861 288.03)` | Shadow Planet | white, 17.5 to 1 |
| 7 | `#1f1245` | `oklch(23.53% 0.0904 288.87)` | Shadow Planet | white, 17 to 1 |
| 8 | `#22144a` | `oklch(24.73% 0.0948 289.78)` | Shadow Planet | white, 16.5 to 1 |
| 9 | `#26164f` | `oklch(25.97% 0.0994 290.74)` | Silent Orbit | white, 16 to 1 |
| 10 | `#2a1854` | `oklch(27.26% 0.1039 291.75)` | Silent Orbit | white, 15.4 to 1 |
| 11 | `#2e1a5a` | `oklch(28.56% 0.1085 292.81)` | Fabric of Space | white, 14.8 to 1 |
| 12 | `#331c5f` | `oklch(29.88% 0.1129 293.92)` | Night Fog | white, 14.2 to 1 |
| 13 | `#371e64` | `oklch(31.20% 0.1171 295.06)` | Christalle | white, 13.6 to 1 |
| 14 | `#3c2069` | `oklch(32.51% 0.1210 296.24)` | Christalle | white, 13 to 1 |
| 15 | `#40236e` | `oklch(33.79% 0.1246 297.46)` | Fading Horizon | white, 12.4 to 1 |
| 16 | `#452572` | `oklch(35.03% 0.1277 298.71)` | Windsor | white, 11.9 to 1 |
| 17 | `#4a2776` | `oklch(36.22% 0.1304 300.03)` | Mystic Nights | white, 11.4 to 1 |
| 18 | `#4f297a` | `oklch(37.42% 0.1329 301.84)` | Mystic Nights | white, 10.9 to 1 |
| 19 | `#552b7d` | `oklch(38.64% 0.1354 304.18)` | Regalia | white, 10.4 to 1 |
| 20 | `#5b2c80` | `oklch(39.87% 0.1377 306.93)` | Deep Amethyst | white, 9.9 to 1 |
| 21 | `#622e82` | `oklch(41.11% 0.1400 309.96)` | Deep Amethyst | white, 9.4 to 1 |
| 22 | `#693084` | `oklch(42.37% 0.1421 313.15)` | Violet Magician | white, 8.9 to 1 |
| 23 | `#703185` | `oklch(43.63% 0.1441 316.36)` | Maximum Purple | white, 8.5 to 1 |
| 24 | `#763387` | `oklch(44.89% 0.1459 319.48)` | Maximum Purple | white, 8 to 1 |
| 25 | `#7d3588` | `oklch(46.15% 0.1474 322.37)` | Dull Violet | white, 7.6 to 1 |
| 26 | `#843789` | `oklch(47.41% 0.1488 324.92)` | Purple Sultan | white, 7.2 to 1 |
| 27 | `#893a8b` | `oklch(48.67% 0.1498 327.00)` | Dahlia | white, 6.8 to 1 |
| 28 | `#8f3d8d` | `oklch(49.91% 0.1506 328.47)` | Dahlia | white, 6.5 to 1 |
| 29 | `#944090` | `oklch(51.14% 0.1511 329.23)` | Dahlia | white, 6.2 to 1 |
| 30 | `#974494` | `oklch(52.36% 0.1513 329.14)` | Hyacinth Violet | white, 5.8 to 1 |
| 31 | `#9a4899` | `oklch(53.56% 0.1511 328.07)` | Hyacinth Violet | white, 5.5 to 1 |
| 32 | `#9c4c9f` | `oklch(54.73% 0.1505 325.91)` | Hyacinth Violet | white, 5.3 to 1 |
| 33 | `#9c51a7` | `oklch(55.90% 0.1494 322.43)` | Purpureus | white, 5 to 1 |
| 34 | `#9a58b0` | `oklch(57.11% 0.1477 317.40)` | Purple Plum | white, 4.7 to 1 |
| 35 | `#975fba` | `oklch(58.34% 0.1453 310.99)` | Trunks Hair | black, 4.6 to 1 |
| 36 | `#9167c4` | `oklch(59.60% 0.1424 303.42)` | Amethyst | black, 4.9 to 1 |
| 37 | `#8a6fcd` | `oklch(60.86% 0.1390 294.91)` | True V | black, 5.2 to 1 |
| 38 | `#8078d4` | `oklch(62.12% 0.1354 285.67)` | Kickstart Purple | black, 5.5 to 1 |
| 39 | `#7581d9` | `oklch(63.37% 0.1314 275.91)` | Tanzine | black, 5.9 to 1 |
| 40 | `#698bdb` | `oklch(64.59% 0.1274 265.85)` | Livid | black, 6.2 to 1 |
| 41 | `#5c93dc` | `oklch(65.77% 0.1232 255.70)` | Little Boy Blue | black, 6.6 to 1 |
| 42 | `#509bd9` | `oklch(66.90% 0.1192 245.68)` | Flax Flower Blue | black, 7 to 1 |
| 43 | `#45a3d5` | `oklch(67.98% 0.1152 236.00)` | Blue Tango | black, 7.4 to 1 |
| 44 | `#3ea9d1` | `oklch(68.98% 0.1114 226.88)` | Mystic Blue | black, 7.7 to 1 |
| 45 | `#3caecb` | `oklch(69.90% 0.1080 218.52)` | River Blue | black, 8 to 1 |
| 46 | `#3eb2c6` | `oklch(70.73% 0.1050 211.15)` | Viking | black, 8.3 to 1 |
| 47 | `#42b5c1` | `oklch(71.44% 0.1025 204.98)` | Glassmith | black, 8.6 to 1 |
| 48 | `#47b8be` | `oklch(72.05% 0.1006 200.23)` | Montego Bay | black, 8.8 to 1 |

## CSS

```css
background: conic-gradient(from 225deg, #100a2f 0.000% 2.083%, #120b31 2.083% 4.167%, #140c34 4.167% 6.250%, #160d38 6.250% 8.333%, #190f3c 8.333% 10.417%, #1c1040 10.417% 12.500%, #1f1245 12.500% 14.583%, #22144a 14.583% 16.667%, #26164f 16.667% 18.750%, #2a1854 18.750% 20.833%, #2e1a5a 20.833% 22.917%, #331c5f 22.917% 25.000%, #371e64 25.000% 27.083%, #3c2069 27.083% 29.167%, #40236e 29.167% 31.250%, #452572 31.250% 33.333%, #4a2776 33.333% 35.417%, #4f297a 35.417% 37.500%, #552b7d 37.500% 39.583%, #5b2c80 39.583% 41.667%, #622e82 41.667% 43.750%, #693084 43.750% 45.833%, #703185 45.833% 47.917%, #763387 47.917% 50.000%, #7d3588 50.000% 52.083%, #843789 52.083% 54.167%, #893a8b 54.167% 56.250%, #8f3d8d 56.250% 58.333%, #944090 58.333% 60.417%, #974494 60.417% 62.500%, #9a4899 62.500% 64.583%, #9c4c9f 64.583% 66.667%, #9c51a7 66.667% 68.750%, #9a58b0 68.750% 70.833%, #975fba 70.833% 72.917%, #9167c4 72.917% 75.000%, #8a6fcd 75.000% 77.083%, #8078d4 77.083% 79.167%, #7581d9 79.167% 81.250%, #698bdb 81.250% 83.333%, #5c93dc 83.333% 85.417%, #509bd9 85.417% 87.500%, #45a3d5 87.500% 89.583%, #3ea9d1 89.583% 91.667%, #3caecb 91.667% 93.750%, #3eb2c6 93.750% 95.833%, #42b5c1 95.833% 97.917%, #47b8be 97.917% 100.000%);
background: conic-gradient(from 225deg, oklch(18.11% 0.0703 284.77) 0.000% 2.083%, oklch(18.74% 0.0725 285.28) 2.083% 4.167%, oklch(19.50% 0.0752 285.86) 4.167% 6.250%, oklch(20.37% 0.0785 286.52) 6.250% 8.333%, oklch(21.34% 0.0821 287.24) 8.333% 10.417%, oklch(22.40% 0.0861 288.03) 10.417% 12.500%, oklch(23.53% 0.0904 288.87) 12.500% 14.583%, oklch(24.73% 0.0948 289.78) 14.583% 16.667%, oklch(25.97% 0.0994 290.74) 16.667% 18.750%, oklch(27.26% 0.1039 291.75) 18.750% 20.833%, oklch(28.56% 0.1085 292.81) 20.833% 22.917%, oklch(29.88% 0.1129 293.92) 22.917% 25.000%, oklch(31.20% 0.1171 295.06) 25.000% 27.083%, oklch(32.51% 0.1210 296.24) 27.083% 29.167%, oklch(33.79% 0.1246 297.46) 29.167% 31.250%, oklch(35.03% 0.1277 298.71) 31.250% 33.333%, oklch(36.22% 0.1304 300.03) 33.333% 35.417%, oklch(37.42% 0.1329 301.84) 35.417% 37.500%, oklch(38.64% 0.1354 304.18) 37.500% 39.583%, oklch(39.87% 0.1377 306.93) 39.583% 41.667%, oklch(41.11% 0.1400 309.96) 41.667% 43.750%, oklch(42.37% 0.1421 313.15) 43.750% 45.833%, oklch(43.63% 0.1441 316.36) 45.833% 47.917%, oklch(44.89% 0.1459 319.48) 47.917% 50.000%, oklch(46.15% 0.1474 322.37) 50.000% 52.083%, oklch(47.41% 0.1488 324.92) 52.083% 54.167%, oklch(48.67% 0.1498 327.00) 54.167% 56.250%, oklch(49.91% 0.1506 328.47) 56.250% 58.333%, oklch(51.14% 0.1511 329.23) 58.333% 60.417%, oklch(52.36% 0.1513 329.14) 60.417% 62.500%, oklch(53.56% 0.1511 328.07) 62.500% 64.583%, oklch(54.73% 0.1505 325.91) 64.583% 66.667%, oklch(55.90% 0.1494 322.43) 66.667% 68.750%, oklch(57.11% 0.1477 317.40) 68.750% 70.833%, oklch(58.34% 0.1453 310.99) 70.833% 72.917%, oklch(59.60% 0.1424 303.42) 72.917% 75.000%, oklch(60.86% 0.1390 294.91) 75.000% 77.083%, oklch(62.12% 0.1354 285.67) 77.083% 79.167%, oklch(63.37% 0.1314 275.91) 79.167% 81.250%, oklch(64.59% 0.1274 265.85) 81.250% 83.333%, oklch(65.77% 0.1232 255.70) 83.333% 85.417%, oklch(66.90% 0.1192 245.68) 85.417% 87.500%, oklch(67.98% 0.1152 236.00) 87.500% 89.583%, oklch(68.98% 0.1114 226.88) 89.583% 91.667%, oklch(69.90% 0.1080 218.52) 91.667% 93.750%, oklch(70.73% 0.1050 211.15) 93.750% 95.833%, oklch(71.44% 0.1025 204.98) 95.833% 97.917%, oklch(72.05% 0.1006 200.23) 97.917% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.181 | 0.07 | 284.8 |
| 2 | 0.358 | 0.13 | 299.6 |
| 3 | 0.551 | 0.15 | 324.9 |
| 4 | 0.72 | 0.101 | 200.2 |

## In these collections

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

## Other forms

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