Lemon
#FEF8BD
YellowColor Codes
All color formats for development
HEX
#FEF8BDRGB
rgb(254, 248, 189)HSL
hsl(54, 97%, 87%)OKLCH
oklch(0.97 0.076 102.8)CMYK
cmyk(0%, 2%, 26%, 0%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#FDF392
2#FDEE66
3#FCE93B
4#FBE40F
5#DBC503
6#AF9E03
7#837602
8#574F01
9#2C2701
Tints
Lighter variations
1#FEF8C4
2#FEF9CB
3#FEFAD1
4#FEFBD8
5#FFFBDE
6#FFFCE5
7#FFFDEB
8#FFFEF2
9#FFFEF8
Tones
Muted variations
1#FBF5C1
2#F8F2C4
3#F4F0C7
4#F1EDCB
5#EEEBCE
6#EBE8D1
7#E7E6D4
8#E4E3D7
9#E1E0DB
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FFFD #FFFDF0 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FEFB #FEFBDC | Light backgroundsTable row hoverSkeleton loading |
| 200 | FEF8 #FEF8BE | Secondary backgroundsInput backgroundsDividers |
| 300 | FDF2 #FDF28B | BordersInactive statesPlaceholder text |
| 400 | FCEB #FCEB4F | Disabled statesSecondary iconsMuted text |
| 500 | FCE5 #FCE51D | Primary brand colorCTAsActive elementsLinks |
| 600 | DDC7 #DDC703 | Hover statesFocus ringsPrimary buttons hover |
| 700 | B09F #B09F03 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7E71 #7E7102 | Text on light backgroundsHeadingsStrong borders |
| 900 | 5048 #504801 | Primary textHigh emphasis contentDark headings |
| 950 | 322D #322D01 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--lemon-50: #FFFDF0;
--lemon-100: #FEFBDC;
--lemon-200: #FEF8BE;
--lemon-300: #FDF28B;
--lemon-400: #FCEB4F;
--lemon-500: #FCE51D;
--lemon-600: #DDC703;
--lemon-700: #B09F03;
--lemon-800: #7E7102;
--lemon-900: #504801;
--lemon-950: #322D01;
}