# Sky orange cream stripe stack

Light blue, light pink and orange linear swatches with 6 colors: #83d0f1, #0081e3, #f4b26a, #f7e5f6, #d86e08, #e87a2f. Edit it and copy or download CSS, SVG, PNG or shader code.

- Also called: Light blue, light pink and orange linear swatches
- Seed: `kY0EGiTEDCucq1N3izQ0rrKFg6P4`
- Page: https://grabient.com/kY0EGiTEDCucq1N3izQ0rrKFg6P4?style=linearSwatches&steps=6&angle=180
- Drawn as: linear swatches, 6 steps, 180 degrees
- Kinds: vivid
- Hues: complementary
- Contrast of its darkest and lightest colors: 3.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 | `#83d0f1` | `oklch(81.89% 0.0896 227.81)` | Pool Tiles | black, 12.2 to 1 |
| 2 | `#0081e3` | `oklch(59.84% 0.1744 251.08)` | Blue Cola | black, 5.2 to 1 |
| 3 | `#f4b26a` | `oklch(81.10% 0.1171 67.54)` | November Gold | black, 11.4 to 1 |
| 4 | `#f7e5f6` | `oklch(94.09% 0.0303 328.20)` | Soft Lavender | black, 17.4 to 1 |
| 5 | `#d86e08` | `oklch(64.96% 0.1612 53.80)` | Marmalade | black, 6.1 to 1 |
| 6 | `#e87a2f` | `oklch(69.29% 0.1598 50.63)` | Spiced up Orange | black, 7.2 to 1 |

## CSS

```css
background: linear-gradient(180deg, #83d0f1 0.000% 16.667%, #0081e3 16.667% 33.333%, #f4b26a 33.333% 50.000%, #f7e5f6 50.000% 66.667%, #d86e08 66.667% 83.333%, #e87a2f 83.333% 100.000%);
background: linear-gradient(180deg, oklch(81.89% 0.0896 227.81) 0.000% 16.667%, oklch(59.84% 0.1744 251.08) 16.667% 33.333%, oklch(81.10% 0.1171 67.54) 33.333% 50.000%, oklch(94.09% 0.0303 328.20) 50.000% 66.667%, oklch(64.96% 0.1612 53.80) 66.667% 83.333%, oklch(69.29% 0.1598 50.63) 83.333% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.819 | 0.09 | 227.8 |
| 2 | 0.598 | 0.178 | 251.1 |
| 3 | 0.811 | 0.117 | 427.5 |
| 4 | 0.941 | 0.03 | 328.2 |
| 5 | 0.65 | 0.161 | 413.8 |
| 6 | 0.693 | 0.16 | 410.6 |

## In these collections

- [Blue and orange swatches](https://grabient.com/blue-and-orange-swatches)

## Other forms

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