Peach
#FCC88D
OrangeColor Codes
All color formats for development
HEX
#FCC88DRGB
rgb(252, 200, 141)HSL
hsl(32, 95%, 77%)OKLCH
oklch(0.866 0.096 69.5)CMYK
cmyk(0%, 21%, 44%, 1%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#FBB666
2#FAA340
3#F9911A
4#E67D06
5#BF6805
6#995404
7#733F03
8#4D2A02
9#261501
Tints
Lighter variations
1#FCCE98
2#FDD3A4
3#FDD9AF
4#FDDEBA
5#FEE4C6
6#FEE9D1
7#FEEFDD
8#FEF4E8
9#FFFAF4
Tones
Muted variations
1#F6C892
2#F1C798
3#EBC79D
4#E6C7A3
5#E0C6A8
6#DBC6AE
7#D5C5B4
8#CFC5B9
9#CAC5BF
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FFF8 #FFF8F0 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FEEE #FEEEDC | Light backgroundsTable row hoverSkeleton loading |
| 200 | FDE0 #FDE0BE | Secondary backgroundsInput backgroundsDividers |
| 300 | FCC8 #FCC88D | BordersInactive statesPlaceholder text |
| 400 | FBAB #FBAB51 | Disabled statesSecondary iconsMuted text |
| 500 | F994 #F9941F | Primary brand colorCTAsActive elementsLinks |
| 600 | DB77 #DB7706 | Hover statesFocus ringsPrimary buttons hover |
| 700 | AE5F #AE5F04 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7C44 #7C4403 | Text on light backgroundsHeadingsStrong borders |
| 900 | 502B #502B02 | Primary textHigh emphasis contentDark headings |
| 950 | 321B #321B01 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--peach-50: #FFF8F0;
--peach-100: #FEEEDC;
--peach-200: #FDE0BE;
--peach-300: #FCC88D;
--peach-400: #FBAB51;
--peach-500: #F9941F;
--peach-600: #DB7706;
--peach-700: #AE5F04;
--peach-800: #7C4403;
--peach-900: #502B02;
--peach-950: #321B01;
}