Peach
#FBC48E
OrangeColor Codes
All color formats for development
HEX
#FBC48ERGB
rgb(251, 196, 142)HSL
hsl(30, 93%, 77%)OKLCH
oklch(0.857 0.094 65.5)CMYK
cmyk(0%, 22%, 43%, 2%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#FAB168
2#F89D42
3#F7891C
4#E37608
5#BD6207
6#984F05
7#723B04
8#4C2703
9#261401
Tints
Lighter variations
1#FBCA99
2#FCD0A4
3#FCD6B0
4#FDDCBB
5#FDE2C6
6#FDE8D2
7#FEEDDD
8#FEF3E8
9#FFF9F4
Tones
Muted variations
1#F5C493
2#F0C499
3#EBC49E
4#E5C4A4
5#E0C4A9
6#DAC4AF
7#D5C4B4
8#CFC4B9
9#CAC4BF
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FEF7 #FEF7F0 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FEED #FEEDDD | Light backgroundsTable row hoverSkeleton loading |
| 200 | FDDE #FDDEBF | Secondary backgroundsInput backgroundsDividers |
| 300 | FBC4 #FBC48E | BordersInactive statesPlaceholder text |
| 400 | F9A6 #F9A653 | Disabled statesSecondary iconsMuted text |
| 500 | F78C #F78C22 | Primary brand colorCTAsActive elementsLinks |
| 600 | D970 #D97008 | Hover statesFocus ringsPrimary buttons hover |
| 700 | AC59 #AC5906 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7B40 #7B4004 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4F29 #4F2903 | Primary textHigh emphasis contentDark headings |
| 950 | 311A #311A02 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--peach-50: #FEF7F0;
--peach-100: #FEEDDD;
--peach-200: #FDDEBF;
--peach-300: #FBC48E;
--peach-400: #F9A653;
--peach-500: #F78C22;
--peach-600: #D97008;
--peach-700: #AC5906;
--peach-800: #7B4004;
--peach-900: #4F2903;
--peach-950: #311A02;
}