Sienna
#803E00
OrangeColor Codes
All color formats for development
HEX
#803E00RGB
rgb(128, 62, 0)HSL
hsl(29, 100%, 25%)OKLCH
oklch(0.441 0.111 53.8)CMYK
cmyk(0%, 52%, 100%, 50%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#733700
2#663100
3#592B00
4#4D2500
5#401F00
6#331900
7#261200
8#1A0C00
9#0D0600
Tints
Lighter variations
1#A65000
2#CC6300
3#F27500
4#FF881A
5#FF9C40
6#FFB066
7#FFC48C
8#FFD7B3
9#FFEBD9
Tones
Muted variations
1#793E06
2#733E0D
3#6C3E13
4#663E19
5#603F20
6#593F26
7#533F2D
8#4D3F33
9#464039
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FFF7 #FFF7F0 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FFED #FFEDDB | Light backgroundsTable row hoverSkeleton loading |
| 200 | FFDD #FFDDBD | Secondary backgroundsInput backgroundsDividers |
| 300 | FFC2 #FFC28A | BordersInactive statesPlaceholder text |
| 400 | FFA3 #FFA34D | Disabled statesSecondary iconsMuted text |
| 500 | FF88 #FF881A | Primary brand colorCTAsActive elementsLinks |
| 600 | E06C #E06C00 | Hover statesFocus ringsPrimary buttons hover |
| 700 | B356 #B35600 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 803E #803E00 | Text on light backgroundsHeadingsStrong borders |
| 900 | 5227 #522700 | Primary textHigh emphasis contentDark headings |
| 950 | 3319 #331900 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--sienna-50: #FFF7F0;
--sienna-100: #FFEDDB;
--sienna-200: #FFDDBD;
--sienna-300: #FFC28A;
--sienna-400: #FFA34D;
--sienna-500: #FF881A;
--sienna-600: #E06C00;
--sienna-700: #B35600;
--sienna-800: #803E00;
--sienna-900: #522700;
--sienna-950: #331900;
}