Peach
#EFC79A
OrangeColor Codes
All color formats for development
HEX
#EFC79ARGB
rgb(239, 199, 154)HSL
hsl(32, 73%, 77%)OKLCH
oklch(0.854 0.074 69.9)CMYK
cmyk(0%, 17%, 36%, 6%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#EAB578
2#E5A256
3#DF8F34
4#CC7C20
5#AA671B
6#885215
7#663E10
8#44290B
9#221505
Tints
Lighter variations
1#F1CDA4
2#F2D2AE
3#F4D8B8
4#F5DEC2
5#F7E3CC
6#F9E9D6
7#FAEEE1
8#FCF4EB
9#FDF9F5
Tones
Muted variations
1#EBC79E
2#E7C7A2
3#E2C6A6
4#DEC6AB
5#DAC6AF
6#D5C5B3
7#D1C5B8
8#CDC5BC
9#C9C5C0
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FDF8 #FDF8F2 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FAEE #FAEEE0 | Light backgroundsTable row hoverSkeleton loading |
| 200 | F6DF #F6DFC6 | Secondary backgroundsInput backgroundsDividers |
| 300 | EFC7 #EFC79A | BordersInactive statesPlaceholder text |
| 400 | E7AA #E7AA65 | Disabled statesSecondary iconsMuted text |
| 500 | E092 #E09238 | Primary brand colorCTAsActive elementsLinks |
| 600 | C276 #C2761E | Hover statesFocus ringsPrimary buttons hover |
| 700 | 9A5E #9A5E18 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 6E43 #6E4311 | Text on light backgroundsHeadingsStrong borders |
| 900 | 472B #472B0B | Primary textHigh emphasis contentDark headings |
| 950 | 2C1B #2C1B07 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--peach-50: #FDF8F2;
--peach-100: #FAEEE0;
--peach-200: #F6DFC6;
--peach-300: #EFC79A;
--peach-400: #E7AA65;
--peach-500: #E09238;
--peach-600: #C2761E;
--peach-700: #9A5E18;
--peach-800: #6E4311;
--peach-900: #472B0B;
--peach-950: #2C1B07;
}