# Blue and violet text palette

The Blue and violet text palette brings together blue and purple. The colors span a moderate lightness range, combining moderate color with gentle contrast. Its balanced and composed character suits website sections and interface mockups. Its darkest tone is blue, and its lightest tone is purple.

- Also called: Analogous blue to lavender linear gradient
- Seed: `kSYD67RaK_VUiRI`
- Page: https://grabient.com/kSYD67RaK_VUiRI?steps=32
- Drawn as: linear gradient, 32 steps, 90 degrees
- Kinds: cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 3.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 | `#29406f` | `oklch(37.80% 0.0854 262.97)` | Mystification | white, 10.1 to 1 |
| 2 | `#2a4271` | `oklch(38.42% 0.0858 262.69)` | Napoleonic Blue | white, 9.9 to 1 |
| 3 | `#2b4473` | `oklch(39.19% 0.0863 262.22)` | Blue Funk | white, 9.6 to 1 |
| 4 | `#2d4776` | `oklch(40.08% 0.0869 261.61)` | Dragonfly | white, 9.2 to 1 |
| 5 | `#2e4a7a` | `oklch(41.08% 0.0875 260.88)` | Nautical | white, 8.8 to 1 |
| 6 | `#304d7d` | `oklch(42.17% 0.0882 260.09)` | High Altar | white, 8.4 to 1 |
| 7 | `#325081` | `oklch(43.33% 0.0890 259.27)` | Fun Blue | white, 8 to 1 |
| 8 | `#345485` | `oklch(44.56% 0.0898 258.46)` | Glimpse of Void | white, 7.6 to 1 |
| 9 | `#365889` | `oklch(45.81% 0.0905 257.70)` | Handsome Blue | white, 7.2 to 1 |
| 10 | `#385c8e` | `oklch(47.09% 0.0913 257.03)` | Antilles Blue | white, 6.8 to 1 |
| 11 | `#3b6092` | `oklch(48.38% 0.0921 256.50)` | Portuguese Blue | white, 6.4 to 1 |
| 12 | `#3d6396` | `oklch(49.65% 0.0928 256.13)` | Blue Regatta | white, 6.1 to 1 |
| 13 | `#40679a` | `oklch(50.89% 0.0935 255.98)` | Too Blue | white, 5.7 to 1 |
| 14 | `#436a9f` | `oklch(52.08% 0.0940 256.08)` | Star Sapphire | white, 5.4 to 1 |
| 15 | `#476ea2` | `oklch(53.20% 0.0945 256.47)` | San Marino | white, 5.2 to 1 |
| 16 | `#4b70a6` | `oklch(54.24% 0.0949 257.19)` | Song of the Sea | white, 5 to 1 |
| 17 | `#4f73a9` | `oklch(55.20% 0.0952 258.30)` | Plunder | white, 4.8 to 1 |
| 18 | `#5375ad` | `oklch(56.14% 0.0954 259.88)` | Flying Fish | white, 4.6 to 1 |
| 19 | `#5877b0` | `oklch(57.09% 0.0955 261.90)` | Sapphire Shimmer Blue | black, 4.6 to 1 |
| 20 | `#5e79b3` | `oklch(58.04% 0.0955 264.28)` | Blue Android Base | black, 4.8 to 1 |
| 21 | `#637bb6` | `oklch(58.98% 0.0954 266.96)` | Ultramarine Blue | black, 5 to 1 |
| 22 | `#6a7db9` | `oklch(59.90% 0.0953 269.87)` | Persian Jewel | black, 5.2 to 1 |
| 23 | `#707ebc` | `oklch(60.80% 0.0952 272.94)` | Persian Jewel | black, 5.4 to 1 |
| 24 | `#7680be` | `oklch(61.67% 0.0950 276.11)` | Deep Periwinkle | black, 5.5 to 1 |
| 25 | `#7c81c0` | `oklch(62.51% 0.0948 279.30)` | Deep Periwinkle | black, 5.7 to 1 |
| 26 | `#8183c2` | `oklch(63.31% 0.0946 282.45)` | Twilight Twinkle | black, 5.9 to 1 |
| 27 | `#8784c3` | `oklch(64.06% 0.0944 285.50)` | Faraway Sky | black, 6.1 to 1 |
| 28 | `#8c85c5` | `oklch(64.76% 0.0942 288.38)` | Brocade | black, 6.2 to 1 |
| 29 | `#9086c6` | `oklch(65.41% 0.0940 291.01)` | Amethyst Grey | black, 6.4 to 1 |
| 30 | `#9487c7` | `oklch(65.99% 0.0939 293.33)` | Amethyst Grey | black, 6.5 to 1 |
| 31 | `#9888c7` | `oklch(66.50% 0.0938 295.28)` | Petrified Purple | black, 6.6 to 1 |
| 32 | `#9b89c8` | `oklch(66.93% 0.0937 296.78)` | Petrified Purple | black, 6.7 to 1 |

## CSS

```css
background: linear-gradient(90deg, #29406f 0.0%, #2a4271 3.2%, #2b4473 6.5%, #2d4776 9.7%, #2e4a7a 12.9%, #304d7d 16.1%, #325081 19.4%, #345485 22.6%, #365889 25.8%, #385c8e 29.0%, #3b6092 32.3%, #3d6396 35.5%, #40679a 38.7%, #436a9f 41.9%, #476ea2 45.2%, #4b70a6 48.4%, #4f73a9 51.6%, #5375ad 54.8%, #5877b0 58.1%, #5e79b3 61.3%, #637bb6 64.5%, #6a7db9 67.7%, #707ebc 71.0%, #7680be 74.2%, #7c81c0 77.4%, #8183c2 80.6%, #8784c3 83.9%, #8c85c5 87.1%, #9086c6 90.3%, #9487c7 93.5%, #9888c7 96.8%, #9b89c8 100.0%);
background: linear-gradient(90deg in oklch, oklch(37.80% 0.0854 262.97) 0.0%, oklch(38.42% 0.0858 262.69) 3.2%, oklch(39.19% 0.0863 262.22) 6.5%, oklch(40.08% 0.0869 261.61) 9.7%, oklch(41.08% 0.0875 260.88) 12.9%, oklch(42.17% 0.0882 260.09) 16.1%, oklch(43.33% 0.0890 259.27) 19.4%, oklch(44.56% 0.0898 258.46) 22.6%, oklch(45.81% 0.0905 257.70) 25.8%, oklch(47.09% 0.0913 257.03) 29.0%, oklch(48.38% 0.0921 256.50) 32.3%, oklch(49.65% 0.0928 256.13) 35.5%, oklch(50.89% 0.0935 255.98) 38.7%, oklch(52.08% 0.0940 256.08) 41.9%, oklch(53.20% 0.0945 256.47) 45.2%, oklch(54.24% 0.0949 257.19) 48.4%, oklch(55.20% 0.0952 258.30) 51.6%, oklch(56.14% 0.0954 259.88) 54.8%, oklch(57.09% 0.0955 261.90) 58.1%, oklch(58.04% 0.0955 264.28) 61.3%, oklch(58.98% 0.0954 266.96) 64.5%, oklch(59.90% 0.0953 269.87) 67.7%, oklch(60.80% 0.0952 272.94) 71.0%, oklch(61.67% 0.0950 276.11) 74.2%, oklch(62.51% 0.0948 279.30) 77.4%, oklch(63.31% 0.0946 282.45) 80.6%, oklch(64.06% 0.0944 285.50) 83.9%, oklch(64.76% 0.0942 288.38) 87.1%, oklch(65.41% 0.0940 291.01) 90.3%, oklch(65.99% 0.0939 293.33) 93.5%, oklch(66.50% 0.0938 295.28) 96.8%, oklch(66.93% 0.0937 296.78) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.378 | 0.085 | 263 |
| 2 | 0.547 | 0.095 | 257.7 |
| 3 | 0.669 | 0.094 | 296.8 |

## In these collections

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

## Other forms

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