# Blue and violet color palette

The Blue and violet color palette brings together blue and purple. The colors span a narrow lightness range, combining strong color with gentle contrast. Its balanced and composed character suits website sections and interface mockups. Its lightest and darkest tones both fall within the blue color family.

- Also called: Vivid analogous blue to purple linear gradient
- Seed: `kSjKCySNPCUdQQk`
- Page: https://grabient.com/kSjKCySNPCUdQQk?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: even lightness, vivid, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 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 | `#0074c9` | `oklch(55.12% 0.1574 250.33)` | Science Blue | white, 4.8 to 1 |
| 2 | `#0074cb` | `oklch(55.20% 0.1608 251.06)` | Science Blue | white, 4.8 to 1 |
| 3 | `#0073cf` | `oklch(55.30% 0.1652 251.94)` | Wizard Blue | white, 4.8 to 1 |
| 4 | `#0073d2` | `oklch(55.43% 0.1707 252.95)` | Wizard Blue | white, 4.8 to 1 |
| 5 | `#0072d7` | `oklch(55.57% 0.1774 254.08)` | Bright Navy Blue | white, 4.8 to 1 |
| 6 | `#0071dc` | `oklch(55.72% 0.1856 255.32)` | Enchanting Sapphire | white, 4.7 to 1 |
| 7 | `#006fe3` | `oklch(55.88% 0.1956 256.64)` | Níu Zǎi Sè Denim | white, 4.7 to 1 |
| 8 | `#006deb` | `oklch(56.05% 0.2078 258.03)` | Níu Zǎi Sè Denim | white, 4.7 to 1 |
| 9 | `#006af4` | `oklch(56.22% 0.2231 259.48)` | Epic Blue | white, 4.8 to 1 |
| 10 | `#1469f7` | `oklch(56.38% 0.2269 260.95)` | Bright Blue | white, 4.7 to 1 |
| 11 | `#2268f9` | `oklch(56.54% 0.2277 262.45)` | Bluerocratic | white, 4.7 to 1 |
| 12 | `#2c66fa` | `oklch(56.69% 0.2284 263.96)` | Gentian Flower | white, 4.7 to 1 |
| 13 | `#3465fb` | `oklch(56.82% 0.2291 265.46)` | Gentian Flower | white, 4.7 to 1 |
| 14 | `#3b64fb` | `oklch(56.93% 0.2296 266.93)` | Gentian Flower | white, 4.7 to 1 |
| 15 | `#4163fc` | `oklch(57.01% 0.2299 268.36)` | Blue Titmouse | white, 4.7 to 1 |
| 16 | `#4762fc` | `oklch(57.07% 0.2301 269.73)` | Blue Titmouse | white, 4.7 to 1 |
| 17 | `#4b61fc` | `oklch(57.10% 0.2301 271.05)` | Blue Titmouse | white, 4.7 to 1 |
| 18 | `#505ffc` | `oklch(57.09% 0.2299 272.42)` | Blue Heath Butterfly | white, 4.7 to 1 |
| 19 | `#545efb` | `oklch(57.06% 0.2296 273.85)` | Aquarius Mood Indigo | white, 4.8 to 1 |
| 20 | `#595dfa` | `oklch(57.01% 0.2291 275.32)` | Shady Neon Blue | white, 4.8 to 1 |
| 21 | `#5d5bf9` | `oklch(56.94% 0.2284 276.82)` | Shady Neon Blue | white, 4.8 to 1 |
| 22 | `#615af8` | `oklch(56.85% 0.2277 278.33)` | Shady Neon Blue | white, 4.8 to 1 |
| 23 | `#6458f6` | `oklch(56.75% 0.2269 279.84)` | Shady Neon Blue | white, 4.9 to 1 |
| 24 | `#6857f5` | `oklch(56.65% 0.2261 281.32)` | Candy Grape Fizz | white, 4.9 to 1 |
| 25 | `#6b55f3` | `oklch(56.53% 0.2253 282.76)` | Candy Grape Fizz | white, 4.9 to 1 |
| 26 | `#6e54f1` | `oklch(56.42% 0.2244 284.16)` | Candy Grape Fizz | white, 5 to 1 |
| 27 | `#7052ef` | `oklch(56.31% 0.2235 285.48)` | Candy Grape Fizz | white, 5 to 1 |
| 28 | `#7351ee` | `oklch(56.20% 0.2228 286.71)` | Candy Grape Fizz | white, 5 to 1 |
| 29 | `#7550ec` | `oklch(56.11% 0.2220 287.85)` | Candy Grape Fizz | white, 5 to 1 |
| 30 | `#774feb` | `oklch(56.02% 0.2214 288.86)` | Candy Grape Fizz | white, 5.1 to 1 |
| 31 | `#784ee9` | `oklch(55.95% 0.2209 289.74)` | Candy Grape Fizz | white, 5.1 to 1 |
| 32 | `#7a4ee8` | `oklch(55.91% 0.2205 290.47)` | Candy Grape Fizz | white, 5.1 to 1 |

## CSS

```css
background: linear-gradient(90deg, #0074c9 0.0%, #0074cb 3.2%, #0073cf 6.5%, #0073d2 9.7%, #0072d7 12.9%, #0071dc 16.1%, #006fe3 19.4%, #006deb 22.6%, #006af4 25.8%, #1469f7 29.0%, #2268f9 32.3%, #2c66fa 35.5%, #3465fb 38.7%, #3b64fb 41.9%, #4163fc 45.2%, #4762fc 48.4%, #4b61fc 51.6%, #505ffc 54.8%, #545efb 58.1%, #595dfa 61.3%, #5d5bf9 64.5%, #615af8 67.7%, #6458f6 71.0%, #6857f5 74.2%, #6b55f3 77.4%, #6e54f1 80.6%, #7052ef 83.9%, #7351ee 87.1%, #7550ec 90.3%, #774feb 93.5%, #784ee9 96.8%, #7a4ee8 100.0%);
background: linear-gradient(90deg in oklch, oklch(55.12% 0.1574 250.33) 0.0%, oklch(55.20% 0.1608 251.06) 3.2%, oklch(55.30% 0.1652 251.94) 6.5%, oklch(55.43% 0.1707 252.95) 9.7%, oklch(55.57% 0.1774 254.08) 12.9%, oklch(55.72% 0.1856 255.32) 16.1%, oklch(55.88% 0.1956 256.64) 19.4%, oklch(56.05% 0.2078 258.03) 22.6%, oklch(56.22% 0.2231 259.48) 25.8%, oklch(56.38% 0.2269 260.95) 29.0%, oklch(56.54% 0.2277 262.45) 32.3%, oklch(56.69% 0.2284 263.96) 35.5%, oklch(56.82% 0.2291 265.46) 38.7%, oklch(56.93% 0.2296 266.93) 41.9%, oklch(57.01% 0.2299 268.36) 45.2%, oklch(57.07% 0.2301 269.73) 48.4%, oklch(57.10% 0.2301 271.05) 51.6%, oklch(57.09% 0.2299 272.42) 54.8%, oklch(57.06% 0.2296 273.85) 58.1%, oklch(57.01% 0.2291 275.32) 61.3%, oklch(56.94% 0.2284 276.82) 64.5%, oklch(56.85% 0.2277 278.33) 67.7%, oklch(56.75% 0.2269 279.84) 71.0%, oklch(56.65% 0.2261 281.32) 74.2%, oklch(56.53% 0.2253 282.76) 77.4%, oklch(56.42% 0.2244 284.16) 80.6%, oklch(56.31% 0.2235 285.48) 83.9%, oklch(56.20% 0.2228 286.71) 87.1%, oklch(56.11% 0.2220 287.85) 90.3%, oklch(56.02% 0.2214 288.86) 93.5%, oklch(55.95% 0.2209 289.74) 96.8%, oklch(55.91% 0.2205 290.47) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.551 | 0.22 | 250.3 |
| 2 | 0.571 | 0.23 | 270.4 |
| 3 | 0.559 | 0.22 | 290.5 |

## In these collections

- [Indigo gradients](https://grabient.com/indigo-gradients)
- [Hero section gradients](https://grabient.com/hero-section-gradients)

## Other forms

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