Coral
#FAB952
OrangeColor Codes
All color formats for development
HEX
#FAB952RGB
rgb(250, 185, 82)HSL
hsl(37, 94%, 65%)OKLCH
oklch(0.827 0.139 76)CMYK
cmyk(0%, 26%, 67%, 2%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#F9AC32
2#F89F12
3#E18D07
4#C17906
5#A16505
6#815104
7#603D03
8#402802
9#201401
Tints
Lighter variations
1#FAC063
2#FBC774
3#FBCE86
4#FCD597
5#FCDCA8
6#FDE3BA
7#FDEACB
8#FEF1DC
9#FEF8EE
Tones
Muted variations
1#F1B75A
2#E9B563
3#E0B36B
4#D8B173
5#D0B07C
6#C7AE84
7#BFAC8D
8#B7AA95
9#AEA89D
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FFF9 #FFF9F0 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FEF1 #FEF1DC | Light backgroundsTable row hoverSkeleton loading |
| 200 | FDE5 #FDE5BF | Secondary backgroundsInput backgroundsDividers |
| 300 | FBD1 #FBD18D | BordersInactive statesPlaceholder text |
| 400 | FAB9 #FAB952 | Disabled statesSecondary iconsMuted text |
| 500 | F8A5 #F8A520 | Primary brand colorCTAsActive elementsLinks |
| 600 | DA89 #DA8907 | Hover statesFocus ringsPrimary buttons hover |
| 700 | AD6D #AD6D05 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7C4E #7C4E04 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4F32 #4F3202 | Primary textHigh emphasis contentDark headings |
| 950 | 311F #311F02 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--coral-50: #FFF9F0;
--coral-100: #FEF1DC;
--coral-200: #FDE5BF;
--coral-300: #FBD18D;
--coral-400: #FAB952;
--coral-500: #F8A520;
--coral-600: #DA8907;
--coral-700: #AD6D05;
--coral-800: #7C4E04;
--coral-900: #4F3202;
--coral-950: #311F02;
}