# Blue and lavender y2k palette

The Blue and lavender y2k palette brings together off-white, light blue, blue, and light purple. The colors span a broad lightness range, combining moderate color with clear contrast. Its light and open character suits fashion mood boards and lookbook graphics. Its darkest tone is blue, and its lightest tone is off-white.

- Also called: Analogous gray, blue and lavender angular swatches
- Seed: `kW9gq8aJg-tEiv63I0D3qVGY`
- Page: https://grabient.com/kW9gq8aJg-tEiv63I0D3qVGY?style=angularSwatches&steps=5&angle=315
- Drawn as: angular swatches, 5 steps, 315 degrees
- Kinds: dark center, cool
- Hues: analogous
- Contrast of its darkest and lightest colors: 7.3 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 | `#f0f5fe` | `oklch(96.85% 0.0138 264.37)` | Cotton Ball | black, 19.1 to 1 |
| 2 | `#a8c8f0` | `oklch(82.28% 0.0661 253.81)` | Island Light | black, 12.1 to 1 |
| 3 | `#5f8fc4` | `oklch(63.78% 0.0951 251.69)` | Cobalt Glow | black, 6.2 to 1 |
| 4 | `#305085` | `oklch(43.31% 0.0965 260.15)` | Fun Blue | white, 8 to 1 |
| 5 | `#c598d9` | `oklch(74.41% 0.1020 315.10)` | Mauve Mist | black, 8.8 to 1 |

## CSS

```css
background: conic-gradient(from 315deg, #f0f5fe 0.000% 20.000%, #a8c8f0 20.000% 40.000%, #5f8fc4 40.000% 60.000%, #305085 60.000% 80.000%, #c598d9 80.000% 100.000%);
background: conic-gradient(from 315deg, oklch(96.85% 0.0138 264.37) 0.000% 20.000%, oklch(82.28% 0.0661 253.81) 20.000% 40.000%, oklch(63.78% 0.0951 251.69) 40.000% 60.000%, oklch(43.31% 0.0965 260.15) 60.000% 80.000%, oklch(74.41% 0.1020 315.10) 80.000% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.969 | 0.014 | 264.4 |
| 2 | 0.823 | 0.066 | 253.8 |
| 3 | 0.638 | 0.095 | 251.7 |
| 4 | 0.433 | 0.096 | 260.1 |
| 5 | 0.744 | 0.102 | 315.1 |

## In these collections

- [Y2K swatches](https://grabient.com/y2k-swatches)

## Other forms

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