Peach
#FFC88A
OrangeColor Codes
All color formats for development
HEX
#FFC88ARGB
rgb(255, 200, 138)HSL
hsl(32, 100%, 77%)OKLCH
oklch(0.868 0.1 69.2)CMYK
cmyk(0%, 22%, 46%, 0%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#FFB662
2#FFA43B
3#FF9114
4#EC7E00
5#C46900
6#9D5400
7#763F00
8#4F2A00
9#271500
Tints
Lighter variations
1#FFCE95
2#FFD3A1
3#FFD9AD
4#FFDEB9
5#FFE4C4
6#FFE9D0
7#FFEFDC
8#FFF4E8
9#FFFAF3
Tones
Muted variations
1#F9C890
2#F3C795
3#EDC79B
4#E8C7A1
5#E2C6A7
6#DCC6AD
7#D6C6B3
8#D0C5B9
9#CAC5BE
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FFF8 #FFF8F0 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FFEE #FFEEDB | Light backgroundsTable row hoverSkeleton loading |
| 200 | FFE0 #FFE0BD | Secondary backgroundsInput backgroundsDividers |
| 300 | FFC8 #FFC88A | BordersInactive statesPlaceholder text |
| 400 | FFAC #FFAC4D | Disabled statesSecondary iconsMuted text |
| 500 | FF94 #FF941A | Primary brand colorCTAsActive elementsLinks |
| 600 | E078 #E07800 | Hover statesFocus ringsPrimary buttons hover |
| 700 | B35F #B35F00 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 8044 #804400 | Text on light backgroundsHeadingsStrong borders |
| 900 | 522C #522C00 | Primary textHigh emphasis contentDark headings |
| 950 | 331B #331B00 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--peach-50: #FFF8F0;
--peach-100: #FFEEDB;
--peach-200: #FFE0BD;
--peach-300: #FFC88A;
--peach-400: #FFAC4D;
--peach-500: #FF941A;
--peach-600: #E07800;
--peach-700: #B35F00;
--peach-800: #804400;
--peach-900: #522C00;
--peach-950: #331B00;
}