# Blue, green, yellow and tan linear swatches

Blue, green, yellow and tan linear swatches with 6 colors: #3c82d6, #93c2ec, #b9d67a, #d7e36b, #f0d149, #c8b38a. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kYmWq1ZRy--ossXwNL7bbe92KWPo`
- Page: https://grabient.com/kYmWq1ZRy--ossXwNL7bbe92KWPo?style=linearSwatches&steps=6&angle=180
- Drawn as: linear swatches, 6 steps, 180 degrees
- Kinds: pastel, light, multicolor
- Hues: complementary
- Contrast of its darkest and lightest colors: 2.8 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 | `#3c82d6` | `oklch(60.24% 0.1461 254.53)` | Soothing Sapphire | black, 5.3 to 1 |
| 2 | `#93c2ec` | `oklch(79.53% 0.0785 246.08)` | Sail to the Sea | black, 11.1 to 1 |
| 3 | `#b9d67a` | `oklch(83.46% 0.1226 123.49)` | Wasabi | black, 12.9 to 1 |
| 4 | `#d7e36b` | `oklch(88.19% 0.1447 113.98)` | Green Glitter | black, 15 to 1 |
| 5 | `#f0d149` | `oklch(86.22% 0.1530 96.02)` | Golden Week | black, 13.8 to 1 |
| 6 | `#c8b38a` | `oklch(77.56% 0.0606 84.39)` | Earthy Cane | black, 10.3 to 1 |

## CSS

```css
background: linear-gradient(180deg, #3c82d6 0.000% 16.667%, #93c2ec 16.667% 33.333%, #b9d67a 33.333% 50.000%, #d7e36b 50.000% 66.667%, #f0d149 66.667% 83.333%, #c8b38a 83.333% 100.000%);
background: linear-gradient(180deg, oklch(60.24% 0.1461 254.53) 0.000% 16.667%, oklch(79.53% 0.0785 246.08) 16.667% 33.333%, oklch(83.46% 0.1226 123.49) 33.333% 50.000%, oklch(88.19% 0.1447 113.98) 50.000% 66.667%, oklch(86.22% 0.1530 96.02) 66.667% 83.333%, oklch(77.56% 0.0606 84.39) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.602 | 0.146 | 254.5 |
| 2 | 0.795 | 0.079 | 246.1 |
| 3 | 0.835 | 0.123 | 123.5 |
| 4 | 0.882 | 0.145 | 114 |
| 5 | 0.862 | 0.153 | 96 |
| 6 | 0.776 | 0.061 | 84.4 |

## Other forms

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