# Blue and violet text palette

The Blue and violet text 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: `kSjq68zdrCUnXQu`
- Page: https://grabient.com/kSjq68zdrCUnXQu?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.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 | `#2c60fe` | `oklch(55.91% 0.2398 265.08)` | YInMn Blue | white, 4.9 to 1 |
| 2 | `#3160ff` | `oklch(56.11% 0.2402 265.80)` | Gentian Flower | white, 4.9 to 1 |
| 3 | `#3660ff` | `oklch(56.37% 0.2393 266.65)` | Gentian Flower | white, 4.8 to 1 |
| 4 | `#3c61ff` | `oklch(56.70% 0.2373 267.62)` | Gentian Flower | white, 4.8 to 1 |
| 5 | `#4262ff` | `oklch(57.07% 0.2350 268.70)` | Blue Titmouse | white, 4.7 to 1 |
| 6 | `#4862ff` | `oklch(57.47% 0.2327 269.88)` | Blue Titmouse | white, 4.6 to 1 |
| 7 | `#4e63ff` | `oklch(57.89% 0.2303 271.15)` | Blue Titmouse | white, 4.6 to 1 |
| 8 | `#5364ff` | `oklch(58.33% 0.2280 272.49)` | Blue Heath Butterfly | black, 4.6 to 1 |
| 9 | `#5965ff` | `oklch(58.77% 0.2258 273.89)` | Blue Heath Butterfly | black, 4.7 to 1 |
| 10 | `#5f65ff` | `oklch(59.20% 0.2239 275.34)` | Blue Genie | black, 4.7 to 1 |
| 11 | `#6466ff` | `oklch(59.61% 0.2222 276.83)` | Blue Genie | black, 4.8 to 1 |
| 12 | `#6966ff` | `oklch(59.99% 0.2209 278.34)` | Blue Genie | black, 4.9 to 1 |
| 13 | `#6e66ff` | `oklch(60.33% 0.2200 279.87)` | Blue Genie | black, 4.9 to 1 |
| 14 | `#7266ff` | `oklch(60.61% 0.2196 281.40)` | Blue Genie | black, 5 to 1 |
| 15 | `#7765ff` | `oklch(60.83% 0.2198 282.92)` | Blue Genie | black, 5 to 1 |
| 16 | `#7b64ff` | `oklch(60.98% 0.2205 284.42)` | Purple Anemone | black, 5 to 1 |
| 17 | `#7e62ff` | `oklch(61.04% 0.2220 285.91)` | Purple Anemone | black, 5 to 1 |
| 18 | `#8260ff` | `oklch(61.03% 0.2243 287.51)` | Purple Anemone | black, 5 to 1 |
| 19 | `#855eff` | `oklch(60.95% 0.2275 289.23)` | Purple Honeycreeper | black, 5 to 1 |
| 20 | `#895aff` | `oklch(60.81% 0.2316 291.03)` | Purple Honeycreeper | black, 4.9 to 1 |
| 21 | `#8d56ff` | `oklch(60.62% 0.2365 292.89)` | Purple Honeycreeper | black, 4.9 to 1 |
| 22 | `#9151ff` | `oklch(60.39% 0.2421 294.80)` | Purple Honeycreeper | black, 4.8 to 1 |
| 23 | `#944dfe` | `oklch(60.13% 0.2462 296.71)` | Irrigo Purple | black, 4.7 to 1 |
| 24 | `#974afa` | `oklch(59.84% 0.2454 298.62)` | Chaste Blossoms | black, 4.6 to 1 |
| 25 | `#9a48f6` | `oklch(59.54% 0.2445 300.49)` | Chaste Blossoms | black, 4.6 to 1 |
| 26 | `#9c45f2` | `oklch(59.24% 0.2437 302.30)` | Chaste Blossoms | white, 4.5 to 1 |
| 27 | `#9e43ee` | `oklch(58.95% 0.2428 304.03)` | Chaste Blossoms | white, 4.6 to 1 |
| 28 | `#a041eb` | `oklch(58.67% 0.2420 305.64)` | Chaste Blossoms | white, 4.7 to 1 |
| 29 | `#a23fe7` | `oklch(58.41% 0.2413 307.13)` | Chaste Blossoms | white, 4.7 to 1 |
| 30 | `#a33de4` | `oklch(58.19% 0.2407 308.45)` | Sweet Desire | white, 4.8 to 1 |
| 31 | `#a43ce2` | `oklch(58.00% 0.2402 309.59)` | Magenta Affair | white, 4.8 to 1 |
| 32 | `#a53adf` | `oklch(57.87% 0.2398 310.52)` | Magenta Affair | white, 4.8 to 1 |

## CSS

```css
background: linear-gradient(90deg, #2c60fe 0.0%, #3160ff 3.2%, #3660ff 6.5%, #3c61ff 9.7%, #4262ff 12.9%, #4862ff 16.1%, #4e63ff 19.4%, #5364ff 22.6%, #5965ff 25.8%, #5f65ff 29.0%, #6466ff 32.3%, #6966ff 35.5%, #6e66ff 38.7%, #7266ff 41.9%, #7765ff 45.2%, #7b64ff 48.4%, #7e62ff 51.6%, #8260ff 54.8%, #855eff 58.1%, #895aff 61.3%, #8d56ff 64.5%, #9151ff 67.7%, #944dfe 71.0%, #974afa 74.2%, #9a48f6 77.4%, #9c45f2 80.6%, #9e43ee 83.9%, #a041eb 87.1%, #a23fe7 90.3%, #a33de4 93.5%, #a43ce2 96.8%, #a53adf 100.0%);
background: linear-gradient(90deg in oklch, oklch(55.91% 0.2398 265.08) 0.0%, oklch(56.11% 0.2402 265.80) 3.2%, oklch(56.37% 0.2393 266.65) 6.5%, oklch(56.70% 0.2373 267.62) 9.7%, oklch(57.07% 0.2350 268.70) 12.9%, oklch(57.47% 0.2327 269.88) 16.1%, oklch(57.89% 0.2303 271.15) 19.4%, oklch(58.33% 0.2280 272.49) 22.6%, oklch(58.77% 0.2258 273.89) 25.8%, oklch(59.20% 0.2239 275.34) 29.0%, oklch(59.61% 0.2222 276.83) 32.3%, oklch(59.99% 0.2209 278.34) 35.5%, oklch(60.33% 0.2200 279.87) 38.7%, oklch(60.61% 0.2196 281.40) 41.9%, oklch(60.83% 0.2198 282.92) 45.2%, oklch(60.98% 0.2205 284.42) 48.4%, oklch(61.04% 0.2220 285.91) 51.6%, oklch(61.03% 0.2243 287.51) 54.8%, oklch(60.95% 0.2275 289.23) 58.1%, oklch(60.81% 0.2316 291.03) 61.3%, oklch(60.62% 0.2365 292.89) 64.5%, oklch(60.39% 0.2421 294.80) 67.7%, oklch(60.13% 0.2462 296.71) 71.0%, oklch(59.84% 0.2454 298.62) 74.2%, oklch(59.54% 0.2445 300.49) 77.4%, oklch(59.24% 0.2437 302.30) 80.6%, oklch(58.95% 0.2428 304.03) 83.9%, oklch(58.67% 0.2420 305.64) 87.1%, oklch(58.41% 0.2413 307.13) 90.3%, oklch(58.19% 0.2407 308.45) 93.5%, oklch(58.00% 0.2402 309.59) 96.8%, oklch(57.87% 0.2398 310.52) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.559 | 0.24 | 265.1 |
| 2 | 0.61 | 0.249 | 285.2 |
| 3 | 0.579 | 0.24 | 310.5 |

## In these collections

- [Text gradients](https://grabient.com/text-gradients)

## Other forms

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