Beige
#FDEFDD
OrangeColor Codes
All color formats for development
HEX
#FDEFDDRGB
rgb(253, 239, 221)HSL
hsl(34, 89%, 93%)OKLCH
oklch(0.958 0.028 74.3)CMYK
cmyk(0%, 6%, 13%, 1%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#FADAB0
2#F8C584
3#F5B157
4#F39C2A
5#E0850D
6#B36A0A
7#865008
8#5A3505
9#2D1B03
Tints
Lighter variations
1#FDF1E1
2#FDF2E4
3#FEF4E7
4#FEF6EB
5#FEF7EE
6#FEF9F2
7#FEFAF5
8#FFFCF8
9#FFFDFC
Tones
Muted variations
1#FBEFDF
2#FAEFE0
3#F8EFE2
4#F7EEE4
5#F5EEE5
6#F4EEE7
7#F2EEE8
8#F0EEEA
9#EFEDEC
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FEF8 #FEF8F1 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FDEF #FDEFDD | Light backgroundsTable row hoverSkeleton loading |
| 200 | FBE2 #FBE2C0 | Secondary backgroundsInput backgroundsDividers |
| 300 | F9CB #F9CB90 | BordersInactive statesPlaceholder text |
| 400 | F5B0 #F5B056 | Disabled statesSecondary iconsMuted text |
| 500 | F29A #F29A26 | Primary brand colorCTAsActive elementsLinks |
| 600 | D47E #D47E0C | Hover statesFocus ringsPrimary buttons hover |
| 700 | A964 #A9640A | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7847 #784707 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4D2E #4D2E04 | Primary textHigh emphasis contentDark headings |
| 950 | 301D #301D03 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--beige-50: #FEF8F1;
--beige-100: #FDEFDD;
--beige-200: #FBE2C0;
--beige-300: #F9CB90;
--beige-400: #F5B056;
--beige-500: #F29A26;
--beige-600: #D47E0C;
--beige-700: #A9640A;
--beige-800: #784707;
--beige-900: #4D2E04;
--beige-950: #301D03;
}