Beige
#FBE6DF
OrangeColor Codes
All color formats for development
HEX
#FBE6DFRGB
rgb(251, 230, 223)HSL
hsl(15, 78%, 93%)OKLCH
oklch(0.94 0.025 39.4)CMYK
cmyk(0%, 8%, 11%, 2%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#F6C5B5
2#F1A48B
3#EB8361
4#E66236
5#D3481A
6#A93A15
7#7F2B10
8#541D0A
9#2A0E05
Tints
Lighter variations
1#FBE9E2
2#FCEBE6
3#FCEEE9
4#FDF0EC
5#FDF3EF
6#FDF5F2
7#FEF8F5
8#FEFAF9
9#FFFDFC
Tones
Muted variations
1#FAE7E1
2#F8E8E2
3#F7E8E3
4#F6E9E5
5#F4EAE6
6#F3EAE8
7#F1EBE9
8#F0ECEA
9#EFECEC
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FDF4 #FDF4F1 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FBE6 #FBE6DF | Light backgroundsTable row hoverSkeleton loading |
| 200 | F8D1 #F8D1C4 | Secondary backgroundsInput backgroundsDividers |
| 300 | F2AD #F2AD97 | BordersInactive statesPlaceholder text |
| 400 | EB83 #EB8360 | Disabled statesSecondary iconsMuted text |
| 500 | E65F #E65F33 | Primary brand colorCTAsActive elementsLinks |
| 600 | C844 #C84419 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 9F36 #9F3614 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7127 #71270E | Text on light backgroundsHeadingsStrong borders |
| 900 | 4919 #491909 | Primary textHigh emphasis contentDark headings |
| 950 | 2D10 #2D1006 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--beige-50: #FDF4F1;
--beige-100: #FBE6DF;
--beige-200: #F8D1C4;
--beige-300: #F2AD97;
--beige-400: #EB8360;
--beige-500: #E65F33;
--beige-600: #C84419;
--beige-700: #9F3614;
--beige-800: #71270E;
--beige-900: #491909;
--beige-950: #2D1006;
}