Coral
#F47457
RedColor Codes
All color formats for development
HEX
#F47457RGB
rgb(244, 116, 87)HSL
hsl(11, 88%, 65%)OKLCH
oklch(0.705 0.164 34.1)CMYK
cmyk(0%, 52%, 64%, 4%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#F25A38
2#F04019
3#DA330E
4#BB2C0C
5#9C250A
6#7D1D08
7#5D1606
8#3E0F04
9#1F0702
Tints
Lighter variations
1#F58268
2#F69079
3#F89E8A
4#F9AC9A
5#FABAAB
6#FBC7BC
7#FCD5CD
8#FDE3DD
9#FEF1EE
Tones
Muted variations
1#EC795F
2#E57E67
3#DD836F
4#D58877
5#CD8D7E
6#C59286
7#BD978E
8#B59C96
9#AEA19E
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FEF3 #FEF3F1 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FDE3 #FDE3DD | Light backgroundsTable row hoverSkeleton loading |
| 200 | FBCB #FBCBC1 | Secondary backgroundsInput backgroundsDividers |
| 300 | F8A4 #F8A491 | BordersInactive statesPlaceholder text |
| 400 | F474 #F47457 | Disabled statesSecondary iconsMuted text |
| 500 | F14C #F14C27 | Primary brand colorCTAsActive elementsLinks |
| 600 | D332 #D3320D | Hover statesFocus ringsPrimary buttons hover |
| 700 | A828 #A8280B | Active/pressed statesDark mode accentsSecondary text |
| 800 | 781C #781C08 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4D12 #4D1205 | Primary textHigh emphasis contentDark headings |
| 950 | 300B #300B03 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--coral-50: #FEF3F1;
--coral-100: #FDE3DD;
--coral-200: #FBCBC1;
--coral-300: #F8A491;
--coral-400: #F47457;
--coral-500: #F14C27;
--coral-600: #D3320D;
--coral-700: #A8280B;
--coral-800: #781C08;
--coral-900: #4D1205;
--coral-950: #300B03;
}