Peach
#F6D393
OrangeColor Codes
All color formats for development
HEX
#F6D393RGB
rgb(246, 211, 147)HSL
hsl(39, 85%, 77%)OKLCH
oklch(0.882 0.09 82.1)CMYK
cmyk(0%, 14%, 40%, 4%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#F3C56E
2#F0B64A
3#EDA726
4#DA9412
5#B67B0F
6#91630C
7#6D4A09
8#493106
9#241903
Tints
Lighter variations
1#F7D89D
2#F8DCA8
3#F9E0B3
4#FAE5BE
5#FBE9C9
6#FBEED4
7#FCF2DE
8#FDF6E9
9#FEFBF4
Tones
Muted variations
1#F1D297
2#ECD09C
3#E7CFA1
4#E2CDA6
5#DDCCAB
6#D8CAB0
7#D3C9B5
8#CEC7BA
9#C9C6BF
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FEF9 #FEF9F1 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FCF2 #FCF2DE | Light backgroundsTable row hoverSkeleton loading |
| 200 | FAE6 #FAE6C2 | Secondary backgroundsInput backgroundsDividers |
| 300 | F6D3 #F6D392 | BordersInactive statesPlaceholder text |
| 400 | F2BD #F2BD5A | Disabled statesSecondary iconsMuted text |
| 500 | EEAA #EEAA2B | Primary brand colorCTAsActive elementsLinks |
| 600 | D08D #D08D11 | Hover statesFocus ringsPrimary buttons hover |
| 700 | A570 #A5700D | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7650 #76500A | Text on light backgroundsHeadingsStrong borders |
| 900 | 4B33 #4B3306 | Primary textHigh emphasis contentDark headings |
| 950 | 2F20 #2F2004 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--peach-50: #FEF9F1;
--peach-100: #FCF2DE;
--peach-200: #FAE6C2;
--peach-300: #F6D392;
--peach-400: #F2BD5A;
--peach-500: #EEAA2B;
--peach-600: #D08D11;
--peach-700: #A5700D;
--peach-800: #76500A;
--peach-900: #4B3306;
--peach-950: #2F2004;
}