# Duotone beige to red angular gradient

Duotone beige to red angular gradient with 32 colors: #feffd2, #feffc8, #feffbf, #fefeb5, #fefaae, #fff2a9, #ffe6a6, #ffd89e, #ffca95, #febd8f, #feb087, #ffa27e, #ff9478, #ff8673, #ff776d, #fe6966, #fd5b5f, #fb4c59, #f73f53, #f2324d, #ed2647, #e81b41, #e20e3b, #dd0335, #d80030, #d3022b, #ce0525, #c80420, #c2031a, #bc0215, #b6020f, #b2010b. Edit it and copy or download CSS, SVG, PNG or shader code.

- Seed: `kc-zpNeqM_WwiupeubyU06-8nTP_DzcBvUdAQ`
- Page: https://grabient.com/kc-zpNeqM_WwiupeubyU06-8nTP_DzcBvUdAQ?style=angularGradient&steps=32&angle=135
- Drawn as: angular gradient, 32 steps, 135 degrees
- Kinds: light to dark, vivid, warm, multicolor
- Hues: monochromatic
- Contrast of its darkest and lightest colors: 7 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 | `#feffd2` | `oklch(98.82% 0.0580 108.27)` | Matt White | black, 20.4 to 1 |
| 2 | `#feffc8` | `oklch(98.62% 0.0698 108.23)` | Bright Ecru | black, 20.3 to 1 |
| 3 | `#feffbf` | `oklch(98.42% 0.0812 108.49)` | Sour Veil | black, 20.2 to 1 |
| 4 | `#fefeb5` | `oklch(97.97% 0.0919 107.86)` | Lamenters Yellow | black, 20 to 1 |
| 5 | `#fefaae` | `oklch(97.05% 0.0955 105.12)` | Creamy Sunshine Pastel | black, 19.4 to 1 |
| 6 | `#fff2a9` | `oklch(95.42% 0.0921 98.98)` | Buttered Popcorn | black, 18.4 to 1 |
| 7 | `#ffe6a6` | `oklch(93.04% 0.0859 89.16)` | Lady Banksia | black, 17.1 to 1 |
| 8 | `#ffd89e` | `oklch(90.23% 0.0861 77.48)` | August Morning | black, 15.5 to 1 |
| 9 | `#ffca95` | `oklch(87.34% 0.0910 65.90)` | Peachy Breezes | black, 14.1 to 1 |
| 10 | `#febd8f` | `oklch(84.68% 0.0961 56.37)` | Fuzzy Peach | black, 12.8 to 1 |
| 11 | `#feb087` | `oklch(82.20% 0.1070 48.50)` | Spice Pink | black, 11.7 to 1 |
| 12 | `#ffa27e` | `oklch(79.75% 0.1215 41.45)` | Orchid Orange | black, 10.7 to 1 |
| 13 | `#ff9478` | `oklch(77.36% 0.1355 35.34)` | Coralistic | black, 9.7 to 1 |
| 14 | `#ff8673` | `oklch(75.05% 0.1509 30.27)` | Fusion Coral | black, 8.8 to 1 |
| 15 | `#ff776d` | `oklch(72.84% 0.1675 26.43)` | Salmon | black, 8.1 to 1 |
| 16 | `#fe6966` | `oklch(70.72% 0.1834 23.90)` | Pompelmo | black, 7.4 to 1 |
| 17 | `#fd5b5f` | `oklch(68.67% 0.1975 22.31)` | Grapefruit | black, 6.8 to 1 |
| 18 | `#fb4c59` | `oklch(66.71% 0.2096 21.24)` | Watermelon | black, 6.2 to 1 |
| 19 | `#f73f53` | `oklch(64.82% 0.2185 20.32)` | Red Salsa | black, 5.7 to 1 |
| 20 | `#f2324d` | `oklch(62.99% 0.2241 19.83)` | Flowerhorn Cichlid Red | black, 5.3 to 1 |
| 21 | `#ed2647` | `oklch(61.22% 0.2273 19.79)` | Charismatic Red | black, 4.9 to 1 |
| 22 | `#e81b41` | `oklch(59.57% 0.2286 20.06)` | Red Ribbon | black, 4.6 to 1 |
| 23 | `#e20e3b` | `oklch(58.07% 0.2288 20.50)` | Red Potion | white, 4.8 to 1 |
| 24 | `#dd0335` | `oklch(56.79% 0.2276 21.14)` | Red Hot | white, 5 to 1 |
| 25 | `#d80030` | `oklch(55.72% 0.2245 22.10)` | Carmine | white, 5.2 to 1 |
| 26 | `#d3022b` | `oklch(54.74% 0.2203 23.20)` | Vermilion Scarlet | white, 5.5 to 1 |
| 27 | `#ce0525` | `oklch(53.76% 0.2159 24.27)` | Philippine Red | white, 5.7 to 1 |
| 28 | `#c80420` | `oklch(52.65% 0.2119 25.16)` | Marilyn MonRouge | white, 5.9 to 1 |
| 29 | `#c2031a` | `oklch(51.35% 0.2074 26.01)` | Tedious Red | white, 6.3 to 1 |
| 30 | `#bc0215` | `oklch(50.02% 0.2027 26.81)` | Red Baron | white, 6.6 to 1 |
| 31 | `#b6020f` | `oklch(48.85% 0.1986 27.49)` | Red Lust | white, 6.9 to 1 |
| 32 | `#b2010b` | `oklch(48.03% 0.1957 27.97)` | All Systems Red | white, 7.2 to 1 |

## CSS

```css
background: conic-gradient(from 135deg, #feffd2 0.0%, #feffc8 3.2%, #feffbf 6.5%, #fefeb5 9.7%, #fefaae 12.9%, #fff2a9 16.1%, #ffe6a6 19.4%, #ffd89e 22.6%, #ffca95 25.8%, #febd8f 29.0%, #feb087 32.3%, #ffa27e 35.5%, #ff9478 38.7%, #ff8673 41.9%, #ff776d 45.2%, #fe6966 48.4%, #fd5b5f 51.6%, #fb4c59 54.8%, #f73f53 58.1%, #f2324d 61.3%, #ed2647 64.5%, #e81b41 67.7%, #e20e3b 71.0%, #dd0335 74.2%, #d80030 77.4%, #d3022b 80.6%, #ce0525 83.9%, #c80420 87.1%, #c2031a 90.3%, #bc0215 93.5%, #b6020f 96.8%, #b2010b 100.0%);
background: conic-gradient(from 135deg in oklch, oklch(98.82% 0.0580 108.27) 0.0%, oklch(98.62% 0.0698 108.23) 3.2%, oklch(98.42% 0.0812 108.49) 6.5%, oklch(97.97% 0.0919 107.86) 9.7%, oklch(97.05% 0.0955 105.12) 12.9%, oklch(95.42% 0.0921 98.98) 16.1%, oklch(93.04% 0.0859 89.16) 19.4%, oklch(90.23% 0.0861 77.48) 22.6%, oklch(87.34% 0.0910 65.90) 25.8%, oklch(84.68% 0.0961 56.37) 29.0%, oklch(82.20% 0.1070 48.50) 32.3%, oklch(79.75% 0.1215 41.45) 35.5%, oklch(77.36% 0.1355 35.34) 38.7%, oklch(75.05% 0.1509 30.27) 41.9%, oklch(72.84% 0.1675 26.43) 45.2%, oklch(70.72% 0.1834 23.90) 48.4%, oklch(68.67% 0.1975 22.31) 51.6%, oklch(66.71% 0.2096 21.24) 54.8%, oklch(64.82% 0.2185 20.32) 58.1%, oklch(62.99% 0.2241 19.83) 61.3%, oklch(61.22% 0.2273 19.79) 64.5%, oklch(59.57% 0.2286 20.06) 67.7%, oklch(58.07% 0.2288 20.50) 71.0%, oklch(56.79% 0.2276 21.14) 74.2%, oklch(55.72% 0.2245 22.10) 77.4%, oklch(54.74% 0.2203 23.20) 80.6%, oklch(53.76% 0.2159 24.27) 83.9%, oklch(52.65% 0.2119 25.16) 87.1%, oklch(51.35% 0.2074 26.01) 90.3%, oklch(50.02% 0.2027 26.81) 93.5%, oklch(48.85% 0.1986 27.49) 96.8%, oklch(48.03% 0.1957 27.97) 100.0%);
```

## Keyframes

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

| Keyframe | Lightness | Chroma | Hue |
| --- | --- | --- | --- |
| 1 | 0.988 | 0.08 | 108.3 |
| 2 | 0.965 | 0.096 | 103 |
| 3 | 0.85 | 0.095 | 57.6 |
| 4 | 0.744 | 0.158 | 29 |
| 5 | 0.654 | 0.216 | 20.6 |
| 6 | 0.579 | 0.229 | 20.6 |
| 7 | 0.531 | 0.214 | 24.8 |
| 8 | 0.48 | 0.196 | 28 |

## In these collections

- [Fire gradients](https://grabient.com/fire-gradients)

## Other forms

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