Sienna
#AC4B06
OrangeColor Codes
All color formats for development
HEX
#AC4B06RGB
rgb(172, 75, 6)HSL
hsl(25, 93%, 35%)OKLCH
oklch(0.531 0.144 47.1)CMYK
cmyk(0%, 56%, 97%, 33%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#9B4406
2#8A3C05
3#793504
4#672D04
5#562603
6#451E02
7#341702
8#220F01
9#110801
Tints
Lighter variations
1#CC5907
2#EC6709
3#F7791F
4#F88C3F
5#F99F5F
6#FAB27F
7#FCC69F
8#FDD9BF
9#FEECDF
Tones
Muted variations
1#A44D0F
2#9C4E17
3#93501F
4#8B5127
5#835230
6#7A5438
7#725540
8#6A5649
9#625851
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FEF6 #FEF6F0 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FEEA #FEEADD | Light backgroundsTable row hoverSkeleton loading |
| 200 | FDD9 #FDD9BF | Secondary backgroundsInput backgroundsDividers |
| 300 | FBBB #FBBB8E | BordersInactive statesPlaceholder text |
| 400 | F998 #F99853 | Disabled statesSecondary iconsMuted text |
| 500 | F77A #F77A22 | Primary brand colorCTAsActive elementsLinks |
| 600 | D95F #D95F08 | Hover statesFocus ringsPrimary buttons hover |
| 700 | AC4B #AC4B06 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7B36 #7B3604 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4F22 #4F2203 | Primary textHigh emphasis contentDark headings |
| 950 | 3116 #311602 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--sienna-50: #FEF6F0;
--sienna-100: #FEEADD;
--sienna-200: #FDD9BF;
--sienna-300: #FBBB8E;
--sienna-400: #F99853;
--sienna-500: #F77A22;
--sienna-600: #D95F08;
--sienna-700: #AC4B06;
--sienna-800: #7B3604;
--sienna-900: #4F2203;
--sienna-950: #311602;
}