# Lemon cyan navy red bands

Beige, light blue, black and red linear swatches with 7 colors: #ffefa8, #afffe4, #51c6ff, #1026a9, #000000, #820b00, #ff4b3d. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Beige, light blue, black and red linear swatches
- Seed: `ka8YlFd6jIuO7x0vSkPAABF7E4yLVZb-g`
- Page: https://grabient.com/ka8YlFd6jIuO7x0vSkPAABF7E4yLVZb-g?style=linearSwatches
- Drawn as: linear swatches, 7 steps, 90 degrees
- Kinds: dark center, vivid
- Hues: triadic
- Contrast of its darkest and lightest colors: 18.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 | `#ffefa8` | `oklch(94.88% 0.0911 97.04)` | Sour Lemon | black, 18.1 to 1 |
| 2 | `#afffe4` | `oklch(94.09% 0.0867 171.01)` | Blister Pearl | black, 18.2 to 1 |
| 3 | `#51c6ff` | `oklch(78.35% 0.1316 233.35)` | Thor’s Thunder | black, 10.8 to 1 |
| 4 | `#1026a9` | `oklch(37.01% 0.2039 266.11)` | City Hunter Blue | white, 11.2 to 1 |
| 5 | `#000000` | `oklch(0.00% 0.0000 0.00)` | Black | white, 21 to 1 |
| 6 | `#820b00` | `oklch(38.58% 0.1515 30.73)` | Proton Red | white, 10.5 to 1 |
| 7 | `#ff4b3d` | `oklch(66.93% 0.2182 28.69)` | Orange Dusk | black, 6.3 to 1 |

## CSS

```css
background: linear-gradient(90deg, #ffefa8 0.000% 14.286%, #afffe4 14.286% 28.571%, #51c6ff 28.571% 42.857%, #1026a9 42.857% 57.143%, #000000 57.143% 71.429%, #820b00 71.429% 85.714%, #ff4b3d 85.714% 100.000%);
background: linear-gradient(90deg, oklch(94.88% 0.0911 97.04) 0.000% 14.286%, oklch(94.09% 0.0867 171.01) 14.286% 28.571%, oklch(78.35% 0.1316 233.35) 28.571% 42.857%, oklch(37.01% 0.2039 266.11) 42.857% 57.143%, oklch(0.00% 0.0000 0.00) 57.143% 71.429%, oklch(38.58% 0.1515 30.73) 71.429% 85.714%, oklch(66.93% 0.2182 28.69) 85.714% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.949 | 0.189 | 97 |
| 2 | 0.941 | 0.112 | 171 |
| 3 | 0.783 | 0.164 | 233.4 |
| 4 | 0.37 | 0.204 | 266.1 |
| 5 | 0 | 0 | 316.8 |
| 6 | 0.386 | 0.156 | 390.8 |
| 7 | 0.669 | 0.28 | 388.7 |

## In these collections

- [Bold swatches](https://grabient.com/bold-swatches)

## Other forms

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