Coral
#FDB74E
OrangeColor Codes
All color formats for development
HEX
#FDB74ERGB
rgb(253, 183, 78)HSL
hsl(36, 98%, 65%)OKLCH
oklch(0.827 0.143 74.2)CMYK
cmyk(0%, 28%, 69%, 1%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#FDAA2D
2#FD9D0D
3#E68B02
4#C57702
5#A46302
6#834F01
7#623B01
8#422801
9#211400
Tints
Lighter variations
1#FDBE60
2#FEC672
3#FECD83
4#FED495
5#FEDBA7
6#FEE2B8
7#FEE9CA
8#FFF1DC
9#FFF8ED
Tones
Muted variations
1#F4B557
2#ECB460
3#E3B269
4#DAB071
5#D1AE7A
6#C9AD83
7#C0AB8C
8#B7A994
9#AEA79D
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FFF9 #FFF9F0 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FFF1 #FFF1DC | Light backgroundsTable row hoverSkeleton loading |
| 200 | FEE4 #FEE4BD | Secondary backgroundsInput backgroundsDividers |
| 300 | FED0 #FED08B | BordersInactive statesPlaceholder text |
| 400 | FDB7 #FDB74E | Disabled statesSecondary iconsMuted text |
| 500 | FDA3 #FDA31C | Primary brand colorCTAsActive elementsLinks |
| 600 | DE86 #DE8602 | Hover statesFocus ringsPrimary buttons hover |
| 700 | B16B #B16B02 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7E4C #7E4C01 | Text on light backgroundsHeadingsStrong borders |
| 900 | 5131 #513101 | Primary textHigh emphasis contentDark headings |
| 950 | 321E #321E01 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--coral-50: #FFF9F0;
--coral-100: #FFF1DC;
--coral-200: #FEE4BD;
--coral-300: #FED08B;
--coral-400: #FDB74E;
--coral-500: #FDA31C;
--coral-600: #DE8602;
--coral-700: #B16B02;
--coral-800: #7E4C01;
--coral-900: #513101;
--coral-950: #321E01;
}