Peach
#FBB48D
OrangeColor Codes
All color formats for development
HEX
#FBB48DRGB
rgb(251, 180, 141)HSL
hsl(21, 93%, 77%)OKLCH
oklch(0.828 0.098 49.7)CMYK
cmyk(0%, 28%, 44%, 2%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#FA9B68
2#F88242
3#F7691C
4#E35508
5#BD4707
6#983905
7#722A04
8#4C1C03
9#260E01
Tints
Lighter variations
1#FBBB99
2#FCC3A4
3#FCCAB0
4#FDD2BB
5#FDD9C6
6#FDE1D2
7#FEE8DD
8#FEF0E8
9#FFF7F4
Tones
Muted variations
1#F5B693
2#F0B799
3#EBB99E
4#E5BBA4
5#E0BCA9
6#DABEAF
7#D5BFB4
8#CFC1B9
9#CAC3BF
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FEF5 #FEF5F0 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FEE8 #FEE8DD | Light backgroundsTable row hoverSkeleton loading |
| 200 | FDD5 #FDD5BF | Secondary backgroundsInput backgroundsDividers |
| 300 | FBB4 #FBB48E | BordersInactive statesPlaceholder text |
| 400 | F98D #F98D53 | Disabled statesSecondary iconsMuted text |
| 500 | F76C #F76C22 | Primary brand colorCTAsActive elementsLinks |
| 600 | D951 #D95108 | Hover statesFocus ringsPrimary buttons hover |
| 700 | AC40 #AC4006 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7B2E #7B2E04 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4F1D #4F1D03 | Primary textHigh emphasis contentDark headings |
| 950 | 3112 #311202 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--peach-50: #FEF5F0;
--peach-100: #FEE8DD;
--peach-200: #FDD5BF;
--peach-300: #FBB48E;
--peach-400: #F98D53;
--peach-500: #F76C22;
--peach-600: #D95108;
--peach-700: #AC4006;
--peach-800: #7B2E04;
--peach-900: #4F1D03;
--peach-950: #311202;
}