Coral
#F37C58
RedColor Codes
All color formats for development
HEX
#F37C58RGB
rgb(243, 124, 88)HSL
hsl(14, 87%, 65%)OKLCH
oklch(0.715 0.155 37.6)CMYK
cmyk(0%, 49%, 64%, 5%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#F16439
2#EF4C1A
3#D93E0F
4#BA350D
5#9B2C0B
6#7C2409
7#5D1B06
8#3E1204
9#1F0902
Tints
Lighter variations
1#F58969
2#F69679
3#F7A48A
4#F8B19B
5#F9BEAC
6#FACBBC
7#FCD8CD
8#FDE5DE
9#FEF2EE
Tones
Muted variations
1#EC8060
2#E48568
3#DC896F
4#D48D77
5#CD917F
6#C59587
7#BD998E
8#B59D96
9#AEA29E
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FEF4 #FEF4F1 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FDE5 #FDE5DE | Light backgroundsTable row hoverSkeleton loading |
| 200 | FBCE #FBCEC1 | Secondary backgroundsInput backgroundsDividers |
| 300 | F7A9 #F7A991 | BordersInactive statesPlaceholder text |
| 400 | F37C #F37C58 | Disabled statesSecondary iconsMuted text |
| 500 | F057 #F05728 | Primary brand colorCTAsActive elementsLinks |
| 600 | D23C #D23C0F | Hover statesFocus ringsPrimary buttons hover |
| 700 | A730 #A7300C | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7722 #772208 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4C16 #4C1605 | Primary textHigh emphasis contentDark headings |
| 950 | 300E #300E03 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--coral-50: #FEF4F1;
--coral-100: #FDE5DE;
--coral-200: #FBCEC1;
--coral-300: #F7A991;
--coral-400: #F37C58;
--coral-500: #F05728;
--coral-600: #D23C0F;
--coral-700: #A7300C;
--coral-800: #772208;
--coral-900: #4C1605;
--coral-950: #300E03;
}