# Coral cream aqua horizon

Vivid duotone orange to cyan linear gradient 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.

- Also called: Vivid duotone orange to cyan linear gradient
- Seed: `kcqYsX2kRAV-3QFnqMAbhBA3KIzV0n0Icq8_Q`
- Page: https://grabient.com/kcqYsX2kRAV-3QFnqMAbhBA3KIzV0n0Icq8_Q?steps=21&angle=180
- Drawn as: linear gradient, 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.0%, #f65f3e 5.0%, #fc6640 10.0%, #ff6f46 15.0%, #ff784f 20.0%, #fe8259 25.0%, #fe8d66 30.0%, #ff9875 35.0%, #ffa485 40.0%, #ffaf92 45.0%, #f8baa8 50.0%, #f0c6b7 55.0%, #e7d2be 60.0%, #dadcca 65.0%, #d3e2d7 70.0%, #cbe8de 75.0%, #baf0e3 80.0%, #a6f6e4 85.0%, #93f9e4 90.0%, #81fadd 95.0%, #74fbd7 100.0%);
background: linear-gradient(180deg in oklch, oklch(66.54% 0.1915 33.05) 0.0%, oklch(67.73% 0.1917 33.92) 5.0%, oklch(69.43% 0.1911 35.17) 10.0%, oklch(71.08% 0.1853 36.38) 15.0%, oklch(72.50% 0.1743 37.59) 20.0%, oklch(73.98% 0.1616 38.74) 25.0%, oklch(75.75% 0.1479 39.55) 30.0%, oklch(77.96% 0.1333 39.66) 35.0%, oklch(80.28% 0.1168 39.86) 40.0%, oklch(82.34% 0.1025 40.20) 45.0%, oklch(84.23% 0.0766 37.14) 50.0%, oklch(85.94% 0.0519 40.94) 55.0%, oklch(87.46% 0.0356 65.21) 60.0%, oklch(88.78% 0.0245 110.62) 65.0%, oklch(89.89% 0.0219 152.98) 70.0%, oklch(90.76% 0.0335 172.64) 75.0%, oklch(91.42% 0.0580 177.93) 80.0%, oklch(91.73% 0.0826 178.62) 85.0%, oklch(91.44% 0.1014 178.84) 90.0%, oklch(90.72% 0.1181 175.98) 95.0%, oklch(90.16% 0.1295 173.59) 100.0%);
```

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