Peach
#FFC68A
OrangeColor Codes
All color formats for development
HEX
#FFC68ARGB
rgb(255, 198, 138)HSL
hsl(31, 100%, 77%)OKLCH
oklch(0.864 0.1 67.3)CMYK
cmyk(0%, 22%, 46%, 0%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#FFB362
2#FFA03B
3#FF8D14
4#EC7A00
5#C46500
6#9D5100
7#763D00
8#4F2900
9#271400
Tints
Lighter variations
1#FFCC95
2#FFD2A1
3#FFD7AD
4#FFDDB9
5#FFE3C4
6#FFE8D0
7#FFEEDC
8#FFF4E8
9#FFF9F3
Tones
Muted variations
1#F9C690
2#F3C695
3#EDC69B
4#E8C6A1
5#E2C5A7
6#DCC5AD
7#D6C5B3
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 | FFDF #FFDFBD | Secondary backgroundsInput backgroundsDividers |
| 300 | FFC6 #FFC68A | BordersInactive statesPlaceholder text |
| 400 | FFA9 #FFA94D | Disabled statesSecondary iconsMuted text |
| 500 | FF90 #FF901A | Primary brand colorCTAsActive elementsLinks |
| 600 | E074 #E07400 | Hover statesFocus ringsPrimary buttons hover |
| 700 | B35C #B35C00 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 8042 #804200 | Text on light backgroundsHeadingsStrong borders |
| 900 | 522A #522A00 | Primary textHigh emphasis contentDark headings |
| 950 | 331A #331A00 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--peach-50: #FFF8F0;
--peach-100: #FFEEDB;
--peach-200: #FFDFBD;
--peach-300: #FFC68A;
--peach-400: #FFA94D;
--peach-500: #FF901A;
--peach-600: #E07400;
--peach-700: #B35C00;
--peach-800: #804200;
--peach-900: #522A00;
--peach-950: #331A00;
}