# Terracotta gold descent Analogous brown to orange linear gradient with 32 colors: #7d6c4f, #806e4f, #857150, #8b7450, #927851, #997b51, #a07f52, #a88252, #af8551, #b58750, #ba884f, #be884c, #c18749, #c38545, #c58241, #c67f3c, #c77c36, #c87831, #c8742c, #c87026, #c86c22, #c8691d, #c86519, #c76115, #c55d11, #c4590d, #c25409, #c05005, #be4c03, #bd4901, #bb4600, #ba4400. Edit it and copy or download CSS, SVG, PNG or shader code. - Also called: Analogous brown to orange linear gradient - Seed: `kUiSI51KO-c80vjFPD6A` - Page: https://grabient.com/kUiSI51KO-c80vjFPD6A?steps=32&angle=225 - Drawn as: linear gradient, 32 steps, 225 degrees - Kinds: vivid, warm - Hues: analogous - Contrast of its darkest and lightest colors: 1.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 | `#7d6c4f` | `oklch(53.94% 0.0469 80.86)` | Juicy Fig | white, 5 to 1 | | 2 | `#806e4f` | `oklch(54.73% 0.0498 80.14)` | Muskrat | white, 4.9 to 1 | | 3 | `#857150` | `oklch(55.84% 0.0536 79.24)` | Favourite Fudge | white, 4.7 to 1 | | 4 | `#8b7450` | `oklch(57.18% 0.0580 78.17)` | Rutherford | black, 4.7 to 1 | | 5 | `#927851` | `oklch(58.68% 0.0631 76.97)` | Beaumont Brown | black, 5 to 1 | | 6 | `#997b51` | `oklch(60.24% 0.0685 75.67)` | Alluring Umber | black, 5.3 to 1 | | 7 | `#a07f52` | `oklch(61.81% 0.0741 74.29)` | Fantan | black, 5.6 to 1 | | 8 | `#a88252` | `oklch(63.28% 0.0799 72.87)` | Muddy Waters | black, 5.9 to 1 | | 9 | `#af8551` | `oklch(64.59% 0.0856 71.44)` | Gold Plated | black, 6.2 to 1 | | 10 | `#b58750` | `oklch(65.65% 0.0911 70.01)` | Sand Mountain | black, 6.5 to 1 | | 11 | `#ba884f` | `oklch(66.38% 0.0962 68.63)` | Canvas | black, 6.7 to 1 | | 12 | `#be884c` | `oklch(66.74% 0.1010 67.28)` | Toffee Tart | black, 6.8 to 1 | | 13 | `#c18749` | `oklch(66.84% 0.1059 65.88)` | Automn Fox | black, 6.8 to 1 | | 14 | `#c38545` | `oklch(66.71% 0.1109 64.43)` | Butterscotch Glaze | black, 6.7 to 1 | | 15 | `#c58241` | `oklch(66.39% 0.1158 62.96)` | Butterscotch Glaze | black, 6.6 to 1 | | 16 | `#c67f3c` | `oklch(65.93% 0.1207 61.46)` | Ginger Beer | black, 6.5 to 1 | | 17 | `#c77c36` | `oklch(65.35% 0.1255 59.97)` | Exotic Honey | black, 6.3 to 1 | | 18 | `#c87831` | `oklch(64.69% 0.1302 58.49)` | Ochre Maroon | black, 6.1 to 1 | | 19 | `#c8742c` | `oklch(63.99% 0.1346 57.03)` | October | black, 5.9 to 1 | | 20 | `#c87026` | `oklch(63.29% 0.1387 55.61)` | Caramelised Peach | black, 5.8 to 1 | | 21 | `#c86c22` | `oklch(62.62% 0.1424 54.25)` | Kincha Brown | black, 5.6 to 1 | | 22 | `#c8691d` | `oklch(62.00% 0.1458 52.96)` | Kohaku Amber | black, 5.4 to 1 | | 23 | `#c86519` | `oklch(61.31% 0.1488 51.64)` | Brusque Brown | black, 5.3 to 1 | | 24 | `#c76115` | `oklch(60.51% 0.1515 50.32)` | Kvass | black, 5.1 to 1 | | 25 | `#c55d11` | `oklch(59.65% 0.1540 48.99)` | Storybook Sundown | black, 4.9 to 1 | | 26 | `#c4590d` | `oklch(58.75% 0.1563 47.69)` | Rust Orange | black, 4.7 to 1 | | 27 | `#c25409` | `oklch(57.85% 0.1583 46.44)` | Rust Orange | white, 4.5 to 1 | | 28 | `#c05005` | `oklch(56.97% 0.1601 45.27)` | Crustose Lichen | white, 4.7 to 1 | | 29 | `#be4c03` | `oklch(56.15% 0.1616 44.19)` | Crustose Lichen | white, 4.9 to 1 | | 30 | `#bd4901` | `oklch(55.41% 0.1631 43.23)` | Brick Orange | white, 5.1 to 1 | | 31 | `#bb4600` | `oklch(54.80% 0.1642 42.38)` | Bolognese | white, 5.2 to 1 | | 32 | `#ba4400` | `oklch(54.33% 0.1648 41.72)` | Bolognese | white, 5.3 to 1 | ## CSS ```css background: linear-gradient(225deg, #7d6c4f 0.0%, #806e4f 3.2%, #857150 6.5%, #8b7450 9.7%, #927851 12.9%, #997b51 16.1%, #a07f52 19.4%, #a88252 22.6%, #af8551 25.8%, #b58750 29.0%, #ba884f 32.3%, #be884c 35.5%, #c18749 38.7%, #c38545 41.9%, #c58241 45.2%, #c67f3c 48.4%, #c77c36 51.6%, #c87831 54.8%, #c8742c 58.1%, #c87026 61.3%, #c86c22 64.5%, #c8691d 67.7%, #c86519 71.0%, #c76115 74.2%, #c55d11 77.4%, #c4590d 80.6%, #c25409 83.9%, #c05005 87.1%, #be4c03 90.3%, #bd4901 93.5%, #bb4600 96.8%, #ba4400 100.0%); background: linear-gradient(225deg in oklch, oklch(53.94% 0.0469 80.86) 0.0%, oklch(54.73% 0.0498 80.14) 3.2%, oklch(55.84% 0.0536 79.24) 6.5%, oklch(57.18% 0.0580 78.17) 9.7%, oklch(58.68% 0.0631 76.97) 12.9%, oklch(60.24% 0.0685 75.67) 16.1%, oklch(61.81% 0.0741 74.29) 19.4%, oklch(63.28% 0.0799 72.87) 22.6%, oklch(64.59% 0.0856 71.44) 25.8%, oklch(65.65% 0.0911 70.01) 29.0%, oklch(66.38% 0.0962 68.63) 32.3%, oklch(66.74% 0.1010 67.28) 35.5%, oklch(66.84% 0.1059 65.88) 38.7%, oklch(66.71% 0.1109 64.43) 41.9%, oklch(66.39% 0.1158 62.96) 45.2%, oklch(65.93% 0.1207 61.46) 48.4%, oklch(65.35% 0.1255 59.97) 51.6%, oklch(64.69% 0.1302 58.49) 54.8%, oklch(63.99% 0.1346 57.03) 58.1%, oklch(63.29% 0.1387 55.61) 61.3%, oklch(62.62% 0.1424 54.25) 64.5%, oklch(62.00% 0.1458 52.96) 67.7%, oklch(61.31% 0.1488 51.64) 71.0%, oklch(60.51% 0.1515 50.32) 74.2%, oklch(59.65% 0.1540 48.99) 77.4%, oklch(58.75% 0.1563 47.69) 80.6%, oklch(57.85% 0.1583 46.44) 83.9%, oklch(56.97% 0.1601 45.27) 87.1%, oklch(56.15% 0.1616 44.19) 90.3%, oklch(55.41% 0.1631 43.23) 93.5%, oklch(54.80% 0.1642 42.38) 96.8%, oklch(54.33% 0.1648 41.72) 100.0%); ``` ## Keyframes 4 OKLCH keyframes joined by a Catmull-Rom spline. Hue is unwrapped degrees. | Keyframe | Lightness | Chroma | Hue | | --- | --- | --- | --- | | 1 | 0.539 | 0.047 | 80.9 | | 2 | 0.665 | 0.098 | 68.2 | | 3 | 0.622 | 0.145 | 53.4 | | 4 | 0.543 | 0.165 | 41.8 | ## In these collections - [Warm gradients](https://grabient.com/warm-gradients) ## Other forms - [JSON](https://grabient.com/kUiSI51KO-c80vjFPD6A.json?steps=32&angle=225) - [PNG](https://grabient.com/kUiSI51KO-c80vjFPD6A.png?steps=32&angle=225) - [SVG](https://grabient.com/kUiSI51KO-c80vjFPD6A.svg?steps=32&angle=225) - [CSS](https://grabient.com/kUiSI51KO-c80vjFPD6A.css?steps=32&angle=225) - [ASE](https://grabient.com/kUiSI51KO-c80vjFPD6A.ase?steps=32&angle=225) - [GPL](https://grabient.com/kUiSI51KO-c80vjFPD6A.gpl?steps=32&angle=225) - [GRD](https://grabient.com/kUiSI51KO-c80vjFPD6A.grd?steps=32&angle=225) - [Design tokens](https://grabient.com/kUiSI51KO-c80vjFPD6A.tokens.json?steps=32&angle=225) - [Social card](https://grabient.com/api/og?seed=kUiSI51KO-c80vjFPD6A&steps=32&angle=225) - [Palettes like this one](https://grabient.com/palettes?q=kUiSI51KO-c80vjFPD6A) - [Guide for agents](https://grabient.com/llms.txt)