Peach
#F8A991
RedColor Codes
All color formats for development
HEX
#F8A991RGB
rgb(248, 169, 145)HSL
hsl(14, 88%, 77%)OKLCH
oklch(0.806 0.1 37.6)CMYK
cmyk(0%, 32%, 42%, 3%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#F68C6C
2#F36F47
3#F15222
4#DD3F0E
5#B9340C
6#942A09
7#6F1F07
8#4A1505
9#250A02
Tints
Lighter variations
1#F9B19C
2#F9BAA7
3#FAC3B2
4#FBCBBD
5#FBD4C8
6#FCDDD3
7#FDE5DE
8#FEEEE9
9#FEF6F4
Tones
Muted variations
1#F3AC96
2#EEAE9B
3#E8B1A0
4#E3B4A5
5#DEB7AB
6#D9B9B0
7#D4BCB5
8#CFBFBA
9#CAC2BF
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FEF4 #FEF4F1 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FDE5 #FDE5DD | Light backgroundsTable row hoverSkeleton loading |
| 200 | FBCE #FBCEC1 | Secondary backgroundsInput backgroundsDividers |
| 300 | F8A9 #F8A991 | BordersInactive statesPlaceholder text |
| 400 | F47C #F47C57 | Disabled statesSecondary iconsMuted text |
| 500 | F156 #F15627 | Primary brand colorCTAsActive elementsLinks |
| 600 | D33C #D33C0D | Hover statesFocus ringsPrimary buttons hover |
| 700 | A82F #A82F0B | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7822 #782208 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4D16 #4D1605 | Primary textHigh emphasis contentDark headings |
| 950 | 300E #300E03 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--peach-50: #FEF4F1;
--peach-100: #FDE5DD;
--peach-200: #FBCEC1;
--peach-300: #F8A991;
--peach-400: #F47C57;
--peach-500: #F15627;
--peach-600: #D33C0D;
--peach-700: #A82F0B;
--peach-800: #782208;
--peach-900: #4D1605;
--peach-950: #300E03;
}