Peach
#F3B396
OrangeColor Codes
All color formats for development
HEX
#F3B396RGB
rgb(243, 179, 150)HSL
hsl(19, 79%, 77%)OKLCH
oklch(0.819 0.085 45.4)CMYK
cmyk(0%, 26%, 38%, 5%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#EF9A73
2#EA8150
3#E6672D
4#D35419
5#B04615
6#8D3810
7#692A0C
8#461C08
9#230E04
Tints
Lighter variations
1#F4BBA1
2#F5C2AB
3#F6CAB6
4#F8D2C0
5#F9D9CB
6#FAE1D5
7#FBE8E0
8#FDF0EA
9#FEF7F5
Tones
Muted variations
1#EEB59B
2#E9B79F
3#E5B8A4
4#E0BAA9
5#DCBCAD
6#D7BEB2
7#D2BFB6
8#CEC1BB
9#C9C3C0
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FDF5 #FDF5F1 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FBE8 #FBE8DF | Light backgroundsTable row hoverSkeleton loading |
| 200 | F8D4 #F8D4C4 | Secondary backgroundsInput backgroundsDividers |
| 300 | F3B3 #F3B396 | BordersInactive statesPlaceholder text |
| 400 | EC8C #EC8C5F | Disabled statesSecondary iconsMuted text |
| 500 | E76B #E76B32 | Primary brand colorCTAsActive elementsLinks |
| 600 | C950 #C95018 | Hover statesFocus ringsPrimary buttons hover |
| 700 | A03F #A03F13 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 722D #722D0D | Text on light backgroundsHeadingsStrong borders |
| 900 | 491D #491D09 | Primary textHigh emphasis contentDark headings |
| 950 | 2E12 #2E1205 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--peach-50: #FDF5F1;
--peach-100: #FBE8DF;
--peach-200: #F8D4C4;
--peach-300: #F3B396;
--peach-400: #EC8C5F;
--peach-500: #E76B32;
--peach-600: #C95018;
--peach-700: #A03F13;
--peach-800: #722D0D;
--peach-900: #491D09;
--peach-950: #2E1205;
}