Lemon
#FCE5C0
OrangeColor Codes
All color formats for development
HEX
#FCE5C0RGB
rgb(252, 229, 192)HSL
hsl(37, 91%, 87%)OKLCH
oklch(0.931 0.054 79.7)CMYK
cmyk(0%, 9%, 24%, 1%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#FAD395
2#F8C26B
3#F6B041
4#F49F16
5#D4860A
6#A96C08
7#7F5106
8#553604
9#2A1B02
Tints
Lighter variations
1#FCE7C6
2#FDEACC
3#FDEDD3
4#FDEFD9
5#FEF2DF
6#FEF5E6
7#FEF7EC
8#FEFAF2
9#FFFCF9
Tones
Muted variations
1#F9E4C3
2#F6E3C6
3#F3E3C9
4#F0E2CC
5#EDE1CF
6#EAE1D2
7#E7E0D5
8#E4DFD8
9#E1DFDB
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FEF9 #FEF9F0 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FDF1 #FDF1DD | Light backgroundsTable row hoverSkeleton loading |
| 200 | FCE5 #FCE5C0 | Secondary backgroundsInput backgroundsDividers |
| 300 | FAD1 #FAD18F | BordersInactive statesPlaceholder text |
| 400 | F7B9 #F7B955 | Disabled statesSecondary iconsMuted text |
| 500 | F5A5 #F5A524 | Primary brand colorCTAsActive elementsLinks |
| 600 | D688 #D6880A | Hover statesFocus ringsPrimary buttons hover |
| 700 | AA6C #AA6C08 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7A4D #7A4D06 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4E31 #4E3104 | Primary textHigh emphasis contentDark headings |
| 950 | 311F #311F02 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--lemon-50: #FEF9F0;
--lemon-100: #FDF1DD;
--lemon-200: #FCE5C0;
--lemon-300: #FAD18F;
--lemon-400: #F7B955;
--lemon-500: #F5A524;
--lemon-600: #D6880A;
--lemon-700: #AA6C08;
--lemon-800: #7A4D06;
--lemon-900: #4E3104;
--lemon-950: #311F02;
}