# Teal ruby diagonal panes Rainbow from navy to beige linear gradient with 32 colors: #1b1a1f, #1e1f27, #212733, #22333f, #1f4049, #1c4e4e, #205a4e, #26634e, #226850, #006b59, #006765, #006072, #005785, #34488d, #503986, #632e79, #72286d, #7f2564, #8b225c, #972254, #a4254e, #b02b47, #bb3540, #c54239, #cd5332, #d56833, #db7f3e, #df9653, #e3ab6b, #e6be83, #eacd98, #ecd7a8. Edit it and copy or download CSS, SVG, PNG or shader code. - Also called: Rainbow from navy to beige linear gradient - Seed: `kWOAfRuxywrQwUpIvUfcJhGo` - Page: https://grabient.com/kWOAfRuxywrQwUpIvUfcJhGo?steps=32&angle=135 - Drawn as: linear gradient, 32 steps, 135 degrees - Kinds: vivid, rainbow - Hues: two-hue - Contrast of its darkest and lightest colors: 12.2 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 | `#1b1a1f` | `oklch(22.05% 0.0096 294.61)` | Gluon Grey | white, 17.3 to 1 | | 2 | `#1e1f27` | `oklch(24.22% 0.0153 282.21)` | Inkwell Inception | white, 16.3 to 1 | | 3 | `#212733` | `oklch(27.35% 0.0229 263.42)` | Infinity | white, 14.9 to 1 | | 4 | `#22333f` | `oklch(31.10% 0.0320 240.93)` | Blue Whale | white, 13 to 1 | | 5 | `#1f4049` | `oklch(35.10% 0.0420 217.40)` | Bay Isle Pointe | white, 11 to 1 | | 6 | `#1c4e4e` | `oklch(39.01% 0.0524 195.52)` | Hornblende Green | white, 9.3 to 1 | | 7 | `#205a4e` | `oklch(42.49% 0.0627 177.96)` | Country Meadow | white, 8 to 1 | | 8 | `#26634e` | `oklch(45.17% 0.0722 167.40)` | Embracing | white, 7.1 to 1 | | 9 | `#226850` | `oklch(46.72% 0.0805 166.48)` | Celtic Green | white, 6.6 to 1 | | 10 | `#006b59` | `oklch(47.03% 0.0881 175.81)` | Chrysocolla Medium Green | white, 6.4 to 1 | | 11 | `#006765` | `oklch(46.40% 0.0794 193.18)` | Barbados Bay | white, 6.7 to 1 | | 12 | `#006072` | `oklch(45.16% 0.0803 216.13)` | Ocean Radiance | white, 7.1 to 1 | | 13 | `#005785` | `oklch(43.64% 0.1040 242.23)` | Beyond the Sea | white, 7.8 to 1 | | 14 | `#34488d` | `oklch(42.17% 0.1168 268.98)` | Blue Highlight | white, 8.5 to 1 | | 15 | `#503986` | `oklch(41.10% 0.1232 294.06)` | Blue Gem | white, 9.2 to 1 | | 16 | `#632e79` | `oklch(40.75% 0.1294 314.99)` | Purple Magic | white, 9.5 to 1 | | 17 | `#72286d` | `oklch(41.35% 0.1354 330.02)` | Byzantium | white, 9.3 to 1 | | 18 | `#7f2564` | `oklch(42.47% 0.1424 341.89)` | Smooch | white, 8.9 to 1 | | 19 | `#8b225c` | `oklch(44.01% 0.1500 351.68)` | Violettuce | white, 8.4 to 1 | | 20 | `#972254` | `oklch(45.91% 0.1574 359.91)` | Figue Pulp | white, 7.8 to 1 | | 21 | `#a4254e` | `oklch(48.13% 0.1637 7.11)` | Cherries Jubilee | white, 7.1 to 1 | | 22 | `#b02b47` | `oklch(50.63% 0.1683 13.80)` | Con Brio | white, 6.4 to 1 | | 23 | `#bb3540` | `oklch(53.38% 0.1703 20.51)` | Rockin Red | white, 5.6 to 1 | | 24 | `#c54239` | `oklch(56.32% 0.1690 27.76)` | 100 Mph | white, 4.9 to 1 | | 25 | `#cd5332` | `oklch(59.66% 0.1633 35.86)` | Bronze Satin | black, 4.8 to 1 | | 26 | `#d56833` | `oklch(63.78% 0.1524 44.37)` | Gold Drop | black, 5.8 to 1 | | 27 | `#db7f3e` | `oklch(68.41% 0.1380 52.99)` | Sweet Potato | black, 7 to 1 | | 28 | `#df9653` | `oklch(73.24% 0.1215 61.39)` | Magic Melon | black, 8.6 to 1 | | 29 | `#e3ab6b` | `oklch(77.98% 0.1045 69.28)` | Montana Wheat Field | black, 10.3 to 1 | | 30 | `#e6be83` | `oklch(82.31% 0.0886 76.34)` | Oats and Honey | black, 12 to 1 | | 31 | `#eacd98` | `oklch(85.95% 0.0753 82.28)` | Chamois | black, 13.6 to 1 | | 32 | `#ecd7a8` | `oklch(88.58% 0.0661 86.78)` | Subtle Glow | black, 14.8 to 1 | ## CSS ```css background: linear-gradient(135deg, #1b1a1f 0.0%, #1e1f27 3.2%, #212733 6.5%, #22333f 9.7%, #1f4049 12.9%, #1c4e4e 16.1%, #205a4e 19.4%, #26634e 22.6%, #226850 25.8%, #006b59 29.0%, #006765 32.3%, #006072 35.5%, #005785 38.7%, #34488d 41.9%, #503986 45.2%, #632e79 48.4%, #72286d 51.6%, #7f2564 54.8%, #8b225c 58.1%, #972254 61.3%, #a4254e 64.5%, #b02b47 67.7%, #bb3540 71.0%, #c54239 74.2%, #cd5332 77.4%, #d56833 80.6%, #db7f3e 83.9%, #df9653 87.1%, #e3ab6b 90.3%, #e6be83 93.5%, #eacd98 96.8%, #ecd7a8 100.0%); background: linear-gradient(135deg in oklch, oklch(22.05% 0.0096 294.61) 0.0%, oklch(24.22% 0.0153 282.21) 3.2%, oklch(27.35% 0.0229 263.42) 6.5%, oklch(31.10% 0.0320 240.93) 9.7%, oklch(35.10% 0.0420 217.40) 12.9%, oklch(39.01% 0.0524 195.52) 16.1%, oklch(42.49% 0.0627 177.96) 19.4%, oklch(45.17% 0.0722 167.40) 22.6%, oklch(46.72% 0.0805 166.48) 25.8%, oklch(47.03% 0.0881 175.81) 29.0%, oklch(46.40% 0.0794 193.18) 32.3%, oklch(45.16% 0.0803 216.13) 35.5%, oklch(43.64% 0.1040 242.23) 38.7%, oklch(42.17% 0.1168 268.98) 41.9%, oklch(41.10% 0.1232 294.06) 45.2%, oklch(40.75% 0.1294 314.99) 48.4%, oklch(41.35% 0.1354 330.02) 51.6%, oklch(42.47% 0.1424 341.89) 54.8%, oklch(44.01% 0.1500 351.68) 58.1%, oklch(45.91% 0.1574 359.91) 61.3%, oklch(48.13% 0.1637 7.11) 64.5%, oklch(50.63% 0.1683 13.80) 67.7%, oklch(53.38% 0.1703 20.51) 71.0%, oklch(56.32% 0.1690 27.76) 74.2%, oklch(59.66% 0.1633 35.86) 77.4%, oklch(63.78% 0.1524 44.37) 80.6%, oklch(68.41% 0.1380 52.99) 83.9%, oklch(73.24% 0.1215 61.39) 87.1%, oklch(77.98% 0.1045 69.28) 90.3%, oklch(82.31% 0.0886 76.34) 93.5%, oklch(85.95% 0.0753 82.28) 96.8%, oklch(88.58% 0.0661 86.78) 100.0%); ``` ## Keyframes 5 OKLCH keyframes joined by a Catmull-Rom spline. Hue is unwrapped degrees. | Keyframe | Lightness | Chroma | Hue | | --- | --- | --- | --- | | 1 | 0.22 | 0.01 | 294.6 | | 2 | 0.465 | 0.079 | 165.7 | | 3 | 0.409 | 0.132 | 323.1 | | 4 | 0.571 | 0.168 | 389.7 | | 5 | 0.886 | 0.066 | 446.8 | ## In these collections - [Stained glass colors](https://grabient.com/stained-glass-colors) ## Other forms - [JSON](https://grabient.com/kWOAfRuxywrQwUpIvUfcJhGo.json?steps=32&angle=135) - [PNG](https://grabient.com/kWOAfRuxywrQwUpIvUfcJhGo.png?steps=32&angle=135) - [SVG](https://grabient.com/kWOAfRuxywrQwUpIvUfcJhGo.svg?steps=32&angle=135) - [CSS](https://grabient.com/kWOAfRuxywrQwUpIvUfcJhGo.css?steps=32&angle=135) - [ASE](https://grabient.com/kWOAfRuxywrQwUpIvUfcJhGo.ase?steps=32&angle=135) - [GPL](https://grabient.com/kWOAfRuxywrQwUpIvUfcJhGo.gpl?steps=32&angle=135) - [GRD](https://grabient.com/kWOAfRuxywrQwUpIvUfcJhGo.grd?steps=32&angle=135) - [Design tokens](https://grabient.com/kWOAfRuxywrQwUpIvUfcJhGo.tokens.json?steps=32&angle=135) - [Social card](https://grabient.com/api/og?seed=kWOAfRuxywrQwUpIvUfcJhGo&steps=32&angle=135) - [Palettes like this one](https://grabient.com/palettes?q=kWOAfRuxywrQwUpIvUfcJhGo) - [Guide for agents](https://grabient.com/llms.txt)