# Red mist blue gradient Red, gray and blue linear gradient with 32 colors: #db363d, #dd3d42, #df4449, #e14c50, #e45659, #e66063, #e76b6f, #e7777c, #e6878b, #e4979a, #e1a7aa, #ddb4b8, #d9bfc4, #d8c6cc, #d7cbd3, #d7cfd9, #d6d1de, #d2d2e2, #c9d0e4, #becce4, #aec3e1, #9bb6dd, #87a8d8, #7598d3, #658acd, #587fc8, #4d75c2, #426cbb, #3a63b5, #325caf, #2c56aa, #2852a6. Edit it and copy or download CSS, SVG, PNG or shader code. - Also called: Red, gray and blue linear gradient - Seed: `kYlpIRVrc_eoJvdsDDRzSs_ro0v-` - Page: https://grabient.com/kYlpIRVrc_eoJvdsDDRzSs_ro0v-?steps=32 - Drawn as: linear gradient, 32 steps, 90 degrees - Kinds: light center - Hues: split-complementary - Contrast of its darkest and lightest colors: 4.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 | `#db363d` | `oklch(59.06% 0.2012 23.91)` | Safflower Red | black, 4.6 to 1 | | 2 | `#dd3d42` | `oklch(59.93% 0.1968 23.61)` | Poppy Red | black, 4.8 to 1 | | 3 | `#df4449` | `oklch(61.08% 0.1915 23.34)` | Cute Crab | black, 5 to 1 | | 4 | `#e14c50` | `oklch(62.47% 0.1850 22.96)` | Thimbleberry | black, 5.3 to 1 | | 5 | `#e45659` | `oklch(64.06% 0.1768 22.37)` | Aphrodisiac | black, 5.7 to 1 | | 6 | `#e66063` | `oklch(65.82% 0.1667 21.43)` | Lovely Little Rosy | black, 6.1 to 1 | | 7 | `#e76b6f` | `oklch(67.72% 0.1543 20.03)` | Redstone | black, 6.7 to 1 | | 8 | `#e7777c` | `oklch(69.88% 0.1381 18.61)` | Passion Pink | black, 7.3 to 1 | | 9 | `#e6878b` | `oklch(72.52% 0.1168 17.84)` | Boho Blush | black, 8.1 to 1 | | 10 | `#e4979a` | `oklch(75.39% 0.0927 16.93)` | Franken Berry | black, 9.1 to 1 | | 11 | `#e1a7aa` | `oklch(78.23% 0.0686 15.06)` | Raspberry Lemonade | black, 10.2 to 1 | | 12 | `#ddb4b8` | `oklch(80.81% 0.0470 11.41)` | Sakura | black, 11.3 to 1 | | 13 | `#d9bfc4` | `oklch(82.85% 0.0307 5.14)` | Pelican Bill | black, 12.2 to 1 | | 14 | `#d8c6cc` | `oklch(84.27% 0.0213 355.03)` | Odyssey Lilac | black, 12.8 to 1 | | 15 | `#d7cbd3` | `oklch(85.49% 0.0166 339.91)` | Light Elusive Dream | black, 13.4 to 1 | | 16 | `#d7cfd9` | `oklch(86.43% 0.0157 321.69)` | Iron Maiden | black, 13.8 to 1 | | 17 | `#d6d1de` | `oklch(86.92% 0.0179 302.59)` | Sword Steel | black, 14 to 1 | | 18 | `#d2d2e2` | `oklch(86.82% 0.0224 284.79)` | Bashful Lilac | black, 14 to 1 | | 19 | `#c9d0e4` | `oklch(85.97% 0.0287 270.48)` | Love Crystal | black, 13.6 to 1 | | 20 | `#becce4` | `oklch(84.18% 0.0365 261.67)` | Periwinkle Grey | black, 12.9 to 1 | | 21 | `#aec3e1` | `oklch(81.10% 0.0482 257.54)` | Light Steel Blue | black, 11.6 to 1 | | 22 | `#9bb6dd` | `oklch(77.05% 0.0632 256.66)` | Honest | black, 10.1 to 1 | | 23 | `#87a8d8` | `oklch(72.47% 0.0796 257.87)` | Swift | black, 8.6 to 1 | | 24 | `#7598d3` | `oklch(67.80% 0.0957 259.99)` | Sea Loch | black, 7.2 to 1 | | 25 | `#658acd` | `oklch(63.51% 0.1098 261.86)` | Livid | black, 6 to 1 | | 26 | `#587fc8` | `oklch(60.00% 0.1203 262.35)` | Sea Note | black, 5.2 to 1 | | 27 | `#4d75c2` | `oklch(56.91% 0.1277 262.25)` | Diva Violet | black, 4.6 to 1 | | 28 | `#426cbb` | `oklch(54.02% 0.1332 262.22)` | Azraq Blue | white, 5.1 to 1 | | 29 | `#3a63b5` | `oklch(51.37% 0.1373 262.25)` | Kakitsubata Blue | white, 5.7 to 1 | | 30 | `#325caf` | `oklch(49.05% 0.1403 262.31)` | Blasphemous Blue | white, 6.3 to 1 | | 31 | `#2c56aa` | `oklch(47.13% 0.1426 262.36)` | Blasphemous Blue | white, 6.9 to 1 | | 32 | `#2852a6` | `oklch(45.67% 0.1447 262.38)` | Ruri Blue | white, 7.4 to 1 | ## CSS ```css background: linear-gradient(90deg, #db363d 0.0%, #dd3d42 3.2%, #df4449 6.5%, #e14c50 9.7%, #e45659 12.9%, #e66063 16.1%, #e76b6f 19.4%, #e7777c 22.6%, #e6878b 25.8%, #e4979a 29.0%, #e1a7aa 32.3%, #ddb4b8 35.5%, #d9bfc4 38.7%, #d8c6cc 41.9%, #d7cbd3 45.2%, #d7cfd9 48.4%, #d6d1de 51.6%, #d2d2e2 54.8%, #c9d0e4 58.1%, #becce4 61.3%, #aec3e1 64.5%, #9bb6dd 67.7%, #87a8d8 71.0%, #7598d3 74.2%, #658acd 77.4%, #587fc8 80.6%, #4d75c2 83.9%, #426cbb 87.1%, #3a63b5 90.3%, #325caf 93.5%, #2c56aa 96.8%, #2852a6 100.0%); background: linear-gradient(90deg in oklch, oklch(59.06% 0.2012 23.91) 0.0%, oklch(59.93% 0.1968 23.61) 3.2%, oklch(61.08% 0.1915 23.34) 6.5%, oklch(62.47% 0.1850 22.96) 9.7%, oklch(64.06% 0.1768 22.37) 12.9%, oklch(65.82% 0.1667 21.43) 16.1%, oklch(67.72% 0.1543 20.03) 19.4%, oklch(69.88% 0.1381 18.61) 22.6%, oklch(72.52% 0.1168 17.84) 25.8%, oklch(75.39% 0.0927 16.93) 29.0%, oklch(78.23% 0.0686 15.06) 32.3%, oklch(80.81% 0.0470 11.41) 35.5%, oklch(82.85% 0.0307 5.14) 38.7%, oklch(84.27% 0.0213 355.03) 41.9%, oklch(85.49% 0.0166 339.91) 45.2%, oklch(86.43% 0.0157 321.69) 48.4%, oklch(86.92% 0.0179 302.59) 51.6%, oklch(86.82% 0.0224 284.79) 54.8%, oklch(85.97% 0.0287 270.48) 58.1%, oklch(84.18% 0.0365 261.67) 61.3%, oklch(81.10% 0.0482 257.54) 64.5%, oklch(77.05% 0.0632 256.66) 67.7%, oklch(72.47% 0.0796 257.87) 71.0%, oklch(67.80% 0.0957 259.99) 74.2%, oklch(63.51% 0.1098 261.86) 77.4%, oklch(60.00% 0.1203 262.35) 80.6%, oklch(56.91% 0.1277 262.25) 83.9%, oklch(54.02% 0.1332 262.22) 87.1%, oklch(51.37% 0.1373 262.25) 90.3%, oklch(49.05% 0.1403 262.31) 93.5%, oklch(47.13% 0.1426 262.36) 96.8%, oklch(45.67% 0.1447 262.38) 100.0%); ``` ## Keyframes 6 OKLCH keyframes joined by a Catmull-Rom spline. Hue is unwrapped degrees. | Keyframe | Lightness | Chroma | Hue | | --- | --- | --- | --- | | 1 | 0.591 | 0.201 | 23.9 | | 2 | 0.681 | 0.152 | 19.7 | | 3 | 0.835 | 0.026 | 1.7 | | 4 | 0.85 | 0.033 | -95.5 | | 5 | 0.606 | 0.119 | -97.6 | | 6 | 0.457 | 0.145 | -97.6 | ## In these collections - [Red and blue gradients](https://grabient.com/red-and-blue-gradients) ## Other forms - [JSON](https://grabient.com/kYlpIRVrc_eoJvdsDDRzSs_ro0v-.json?steps=32) - [PNG](https://grabient.com/kYlpIRVrc_eoJvdsDDRzSs_ro0v-.png?steps=32) - [SVG](https://grabient.com/kYlpIRVrc_eoJvdsDDRzSs_ro0v-.svg?steps=32) - [CSS](https://grabient.com/kYlpIRVrc_eoJvdsDDRzSs_ro0v-.css?steps=32) - [ASE](https://grabient.com/kYlpIRVrc_eoJvdsDDRzSs_ro0v-.ase?steps=32) - [GPL](https://grabient.com/kYlpIRVrc_eoJvdsDDRzSs_ro0v-.gpl?steps=32) - [GRD](https://grabient.com/kYlpIRVrc_eoJvdsDDRzSs_ro0v-.grd?steps=32) - [Design tokens](https://grabient.com/kYlpIRVrc_eoJvdsDDRzSs_ro0v-.tokens.json?steps=32) - [Social card](https://grabient.com/api/og?seed=kYlpIRVrc_eoJvdsDDRzSs_ro0v-&steps=32) - [Palettes like this one](https://grabient.com/palettes?q=kYlpIRVrc_eoJvdsDDRzSs_ro0v-) - [Guide for agents](https://grabient.com/llms.txt)