# Tritone blue, purple and brown linear gradient Tritone blue, purple and brown linear gradient with 32 colors: #0e006d, #110170, #140574, #180a77, #1c107b, #211580, #261a84, #2c1f87, #31248a, #35288d, #3a2d8f, #3f3291, #443793, #4a3c94, #4f4195, #564596, #5c4996, #634e95, #695293, #6f5691, #745b8f, #7a5f8c, #80638a, #866789, #8c6a87, #946e85, #9c7182, #a4747d, #aa7878, #af7d73, #b2816f, #b3846d. Edit it and copy or download CSS, SVG, PNG or shader code. - Seed: `kWP3jALDrBDotQVHFsP0xjJo` - Page: https://grabient.com/kWP3jALDrBDotQVHFsP0xjJo?steps=32 - Drawn as: linear gradient, 32 steps, 90 degrees - Kinds: dark to light - Hues: analogous - Contrast of its darkest and lightest colors: 5.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 | `#0e006d` | `oklch(24.84% 0.1628 269.99)` | The Vast of Night | white, 16.9 to 1 | | 2 | `#110170` | `oklch(25.58% 0.1653 270.75)` | Quantum of Light | white, 16.6 to 1 | | 3 | `#140574` | `oklch(26.61% 0.1654 271.73)` | Quantum of Light | white, 16.1 to 1 | | 4 | `#180a77` | `oklch(27.84% 0.1656 272.89)` | Prunelle | white, 15.5 to 1 | | 5 | `#1c107b` | `oklch(29.21% 0.1656 274.20)` | Outer Rim | white, 14.8 to 1 | | 6 | `#211580` | `oklch(30.67% 0.1653 275.59)` | Nightly Expedition | white, 14.1 to 1 | | 7 | `#261a84` | `oklch(32.15% 0.1645 277.03)` | Nightly Expedition | white, 13.4 to 1 | | 8 | `#2c1f87` | `oklch(33.60% 0.1629 278.47)` | Indiglow | white, 12.7 to 1 | | 9 | `#31248a` | `oklch(34.98% 0.1605 279.84)` | Cosmic Cobalt | white, 12 to 1 | | 10 | `#35288d` | `oklch(36.37% 0.1574 281.02)` | Cosmic Cobalt | white, 11.3 to 1 | | 11 | `#3a2d8f` | `oklch(37.78% 0.1536 282.07)` | Perfect Dark | white, 10.7 to 1 | | 12 | `#3f3291` | `oklch(39.23% 0.1492 283.10)` | Majestic Eggplant | white, 10 to 1 | | 13 | `#443793` | `oklch(40.68% 0.1444 284.26)` | Royal Wisteria | white, 9.4 to 1 | | 14 | `#4a3c94` | `oklch(42.13% 0.1390 285.67)` | Blue Gem | white, 8.8 to 1 | | 15 | `#4f4195` | `oklch(43.57% 0.1333 287.46)` | Blueberry | white, 8.3 to 1 | | 16 | `#564596` | `oklch(44.98% 0.1272 289.75)` | Liberty | white, 7.8 to 1 | | 17 | `#5c4996` | `oklch(46.35% 0.1206 292.60)` | Liberty | white, 7.3 to 1 | | 18 | `#634e95` | `oklch(47.71% 0.1126 295.55)` | Purple Corallite | white, 6.9 to 1 | | 19 | `#695293` | `oklch(49.06% 0.1035 298.69)` | Pure Mauve | white, 6.5 to 1 | | 20 | `#6f5691` | `oklch(50.39% 0.0939 302.18)` | Pure Mauve | white, 6.1 to 1 | | 21 | `#745b8f` | `oklch(51.71% 0.0845 306.20)` | Emperor Jewel | white, 5.7 to 1 | | 22 | `#7a5f8c` | `oklch(53.01% 0.0758 310.92)` | Super Violet | white, 5.4 to 1 | | 23 | `#80638a` | `oklch(54.31% 0.0684 316.50)` | Dusty Purple | white, 5.1 to 1 | | 24 | `#866789` | `oklch(55.59% 0.0630 323.11)` | Sunshone Plum | white, 4.8 to 1 | | 25 | `#8c6a87` | `oklch(56.89% 0.0599 331.36)` | Dianthus Mauve | white, 4.6 to 1 | | 26 | `#946e85` | `oklch(58.28% 0.0588 341.90)` | Sophisticated Lilac | black, 4.8 to 1 | | 27 | `#9c7182` | `oklch(59.70% 0.0592 353.96)` | Meadow Flower | black, 5 to 1 | | 28 | `#a4747d` | `oklch(61.10% 0.0607 6.68)` | Nostalgia Rose | black, 5.3 to 1 | | 29 | `#aa7878` | `oklch(62.42% 0.0627 19.23)` | Salon Rose | black, 5.6 to 1 | | 30 | `#af7d73` | `oklch(63.61% 0.0648 30.76)` | Ferris Wheel | black, 5.9 to 1 | | 31 | `#b2816f` | `oklch(64.60% 0.0666 40.42)` | Brick Fence | black, 6.2 to 1 | | 32 | `#b3846d` | `oklch(65.35% 0.0675 47.38)` | Light Mocha | black, 6.4 to 1 | ## CSS ```css background: linear-gradient(90deg, #0e006d 0.0%, #110170 3.2%, #140574 6.5%, #180a77 9.7%, #1c107b 12.9%, #211580 16.1%, #261a84 19.4%, #2c1f87 22.6%, #31248a 25.8%, #35288d 29.0%, #3a2d8f 32.3%, #3f3291 35.5%, #443793 38.7%, #4a3c94 41.9%, #4f4195 45.2%, #564596 48.4%, #5c4996 51.6%, #634e95 54.8%, #695293 58.1%, #6f5691 61.3%, #745b8f 64.5%, #7a5f8c 67.7%, #80638a 71.0%, #866789 74.2%, #8c6a87 77.4%, #946e85 80.6%, #9c7182 83.9%, #a4747d 87.1%, #aa7878 90.3%, #af7d73 93.5%, #b2816f 96.8%, #b3846d 100.0%); background: linear-gradient(90deg in oklch, oklch(24.84% 0.1628 269.99) 0.0%, oklch(25.58% 0.1653 270.75) 3.2%, oklch(26.61% 0.1654 271.73) 6.5%, oklch(27.84% 0.1656 272.89) 9.7%, oklch(29.21% 0.1656 274.20) 12.9%, oklch(30.67% 0.1653 275.59) 16.1%, oklch(32.15% 0.1645 277.03) 19.4%, oklch(33.60% 0.1629 278.47) 22.6%, oklch(34.98% 0.1605 279.84) 25.8%, oklch(36.37% 0.1574 281.02) 29.0%, oklch(37.78% 0.1536 282.07) 32.3%, oklch(39.23% 0.1492 283.10) 35.5%, oklch(40.68% 0.1444 284.26) 38.7%, oklch(42.13% 0.1390 285.67) 41.9%, oklch(43.57% 0.1333 287.46) 45.2%, oklch(44.98% 0.1272 289.75) 48.4%, oklch(46.35% 0.1206 292.60) 51.6%, oklch(47.71% 0.1126 295.55) 54.8%, oklch(49.06% 0.1035 298.69) 58.1%, oklch(50.39% 0.0939 302.18) 61.3%, oklch(51.71% 0.0845 306.20) 64.5%, oklch(53.01% 0.0758 310.92) 67.7%, oklch(54.31% 0.0684 316.50) 71.0%, oklch(55.59% 0.0630 323.11) 74.2%, oklch(56.89% 0.0599 331.36) 77.4%, oklch(58.28% 0.0588 341.90) 80.6%, oklch(59.70% 0.0592 353.96) 83.9%, oklch(61.10% 0.0607 6.68) 87.1%, oklch(62.42% 0.0627 19.23) 90.3%, oklch(63.61% 0.0648 30.76) 93.5%, oklch(64.60% 0.0666 40.42) 96.8%, oklch(65.35% 0.0675 47.38) 100.0%); ``` ## Keyframes 5 OKLCH keyframes joined by a Catmull-Rom spline. Hue is unwrapped degrees. | Keyframe | Lightness | Chroma | Hue | | --- | --- | --- | --- | | 1 | 0.248 | 0.165 | 270 | | 2 | 0.346 | 0.161 | 279.5 | | 3 | 0.457 | 0.124 | 291.1 | | 4 | 0.559 | 0.062 | 325 | | 5 | 0.654 | 0.068 | 407.4 | ## In these collections - [Moody gradients](https://grabient.com/moody-gradients) ## Other forms - [JSON](https://grabient.com/kWP3jALDrBDotQVHFsP0xjJo.json?steps=32) - [PNG](https://grabient.com/kWP3jALDrBDotQVHFsP0xjJo.png?steps=32) - [SVG](https://grabient.com/kWP3jALDrBDotQVHFsP0xjJo.svg?steps=32) - [CSS](https://grabient.com/kWP3jALDrBDotQVHFsP0xjJo.css?steps=32) - [ASE](https://grabient.com/kWP3jALDrBDotQVHFsP0xjJo.ase?steps=32) - [GPL](https://grabient.com/kWP3jALDrBDotQVHFsP0xjJo.gpl?steps=32) - [GRD](https://grabient.com/kWP3jALDrBDotQVHFsP0xjJo.grd?steps=32) - [Design tokens](https://grabient.com/kWP3jALDrBDotQVHFsP0xjJo.tokens.json?steps=32) - [Social card](https://grabient.com/api/og?seed=kWP3jALDrBDotQVHFsP0xjJo&steps=32) - [Palettes like this one](https://grabient.com/palettes?q=kWP3jALDrBDotQVHFsP0xjJo) - [Guide for agents](https://grabient.com/llms.txt)