# Vivid duotone orange and cyan linear swatches

Vivid duotone orange and cyan linear swatches with 21 colors: #f25b3d, #f65f3e, #fc6640, #ff6f46, #ff784f, #fe8259, #fe8d66, #ff9875, #ffa485, #ffaf92, #f8baa8, #f0c6b7, #e7d2be, #dadcca, #d3e2d7, #cbe8de, #baf0e3, #a6f6e4, #93f9e4, #81fadd, #74fbd7. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kcqYsX2kRAV-3QFnqMAbhBA3KIzV0n0Icq8_Q`
- Page: https://grabient.com/kcqYsX2kRAV-3QFnqMAbhBA3KIzV0n0Icq8_Q?style=linearSwatches&steps=21&angle=180
- Drawn as: linear swatches, 21 steps, 180 degrees
- Kinds: vivid, light
- Hues: complementary
- Contrast of its darkest and lightest colors: 2.6 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 | `#f25b3d` | `oklch(66.54% 0.1915 33.05)` | Hot Embers | black, 6.3 to 1 |
| 2 | `#f65f3e` | `oklch(67.73% 0.1917 33.92)` | Vermilion Orange | black, 6.6 to 1 |
| 3 | `#fc6640` | `oklch(69.43% 0.1911 35.17)` | Halloween | black, 7.1 to 1 |
| 4 | `#ff6f46` | `oklch(71.08% 0.1853 36.38)` | Outrageous Orange | black, 7.5 to 1 |
| 5 | `#ff784f` | `oklch(72.50% 0.1743 37.59)` | Rinsed-Out Red | black, 8 to 1 |
| 6 | `#fe8259` | `oklch(73.98% 0.1616 38.74)` | Ballet Cream | black, 8.5 to 1 |
| 7 | `#fe8d66` | `oklch(75.75% 0.1479 39.55)` | Salmon Orange | black, 9.1 to 1 |
| 8 | `#ff9875` | `oklch(77.96% 0.1333 39.66)` | Flash in the Pan | black, 10 to 1 |
| 9 | `#ffa485` | `oklch(80.28% 0.1168 39.86)` | Orchid Orange | black, 10.9 to 1 |
| 10 | `#ffaf92` | `oklch(82.34% 0.1025 40.20)` | Peach Nectar | black, 11.7 to 1 |
| 11 | `#f8baa8` | `oklch(84.23% 0.0766 37.14)` | Yahoo | black, 12.6 to 1 |
| 12 | `#f0c6b7` | `oklch(85.94% 0.0519 40.94)` | Brilliant Beige | black, 13.4 to 1 |
| 13 | `#e7d2be` | `oklch(87.46% 0.0356 65.21)` | Simply Subtle Pink | black, 14.3 to 1 |
| 14 | `#dadcca` | `oklch(88.78% 0.0245 110.62)` | Smell of Garlic | black, 15 to 1 |
| 15 | `#d3e2d7` | `oklch(89.89% 0.0219 152.98)` | Delicate Snow Goose | black, 15.6 to 1 |
| 16 | `#cbe8de` | `oklch(90.76% 0.0335 172.64)` | Light Short Phase | black, 16.1 to 1 |
| 17 | `#baf0e3` | `oklch(91.42% 0.0580 177.93)` | Fresh Breeze | black, 16.6 to 1 |
| 18 | `#a6f6e4` | `oklch(91.73% 0.0826 178.62)` | Pale King’s Blue | black, 16.9 to 1 |
| 19 | `#93f9e4` | `oklch(91.44% 0.1014 178.84)` | Turquoise Pearl | black, 16.9 to 1 |
| 20 | `#81fadd` | `oklch(90.72% 0.1181 175.98)` | Tibetan Plateau | black, 16.6 to 1 |
| 21 | `#74fbd7` | `oklch(90.16% 0.1295 173.59)` | Spindrift | black, 16.4 to 1 |

## CSS

```css
background: linear-gradient(180deg, #f25b3d 0.000% 4.762%, #f65f3e 4.762% 9.524%, #fc6640 9.524% 14.286%, #ff6f46 14.286% 19.048%, #ff784f 19.048% 23.810%, #fe8259 23.810% 28.571%, #fe8d66 28.571% 33.333%, #ff9875 33.333% 38.095%, #ffa485 38.095% 42.857%, #ffaf92 42.857% 47.619%, #f8baa8 47.619% 52.381%, #f0c6b7 52.381% 57.143%, #e7d2be 57.143% 61.905%, #dadcca 61.905% 66.667%, #d3e2d7 66.667% 71.429%, #cbe8de 71.429% 76.190%, #baf0e3 76.190% 80.952%, #a6f6e4 80.952% 85.714%, #93f9e4 85.714% 90.476%, #81fadd 90.476% 95.238%, #74fbd7 95.238% 100.000%);
background: linear-gradient(180deg, oklch(66.54% 0.1915 33.05) 0.000% 4.762%, oklch(67.73% 0.1917 33.92) 4.762% 9.524%, oklch(69.43% 0.1911 35.17) 9.524% 14.286%, oklch(71.08% 0.1853 36.38) 14.286% 19.048%, oklch(72.50% 0.1743 37.59) 19.048% 23.810%, oklch(73.98% 0.1616 38.74) 23.810% 28.571%, oklch(75.75% 0.1479 39.55) 28.571% 33.333%, oklch(77.96% 0.1333 39.66) 33.333% 38.095%, oklch(80.28% 0.1168 39.86) 38.095% 42.857%, oklch(82.34% 0.1025 40.20) 42.857% 47.619%, oklch(84.23% 0.0766 37.14) 47.619% 52.381%, oklch(85.94% 0.0519 40.94) 52.381% 57.143%, oklch(87.46% 0.0356 65.21) 57.143% 61.905%, oklch(88.78% 0.0245 110.62) 61.905% 66.667%, oklch(89.89% 0.0219 152.98) 66.667% 71.429%, oklch(90.76% 0.0335 172.64) 71.429% 76.190%, oklch(91.42% 0.0580 177.93) 76.190% 80.952%, oklch(91.73% 0.0826 178.62) 80.952% 85.714%, oklch(91.44% 0.1014 178.84) 85.714% 90.476%, oklch(90.72% 0.1181 175.98) 90.476% 95.238%, oklch(90.16% 0.1295 173.59) 95.238% 100.000%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.665 | 0.192 | 33 |
| 2 | 0.709 | 0.187 | 36.2 |
| 3 | 0.752 | 0.152 | 39.4 |
| 4 | 0.815 | 0.112 | 40.4 |
| 5 | 0.866 | 0.044 | 47.8 |
| 6 | 0.902 | 0.023 | 160.9 |
| 7 | 0.917 | 0.085 | 178.9 |
| 8 | 0.902 | 0.13 | 173.6 |

## In these collections

- [Summer gradients](https://grabient.com/summer-gradients)

## Other forms

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