Fire Brick
#A80B37
PinkColor Codes
All color formats for development
HEX
#A80B37RGB
rgb(168, 11, 55)HSL
hsl(343, 88%, 35%)OKLCH
oklch(0.469 0.182 15.4)CMYK
cmyk(0%, 93%, 67%, 34%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#970A32
2#86092C
3#750727
4#650621
5#54051C
6#430416
7#320311
8#22020B
9#110106
Tints
Lighter variations
1#C70D41
2#E60F4C
3#F1255F
4#F34476
5#F5638D
6#F782A3
7#F9A2BA
8#FBC1D1
9#FDE0E8
Tones
Muted variations
1#A0133B
2#981A3E
3#902241
4#882A45
5#813248
6#793A4C
7#71424F
8#694A52
9#615156
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FEF1 #FEF1F4 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FDDD #FDDDE6 | Light backgroundsTable row hoverSkeleton loading |
| 200 | FBC1 #FBC1D1 | Secondary backgroundsInput backgroundsDividers |
| 300 | F891 #F891AE | BordersInactive statesPlaceholder text |
| 400 | F457 #F45784 | Disabled statesSecondary iconsMuted text |
| 500 | F127 #F12760 | Primary brand colorCTAsActive elementsLinks |
| 600 | D30D #D30D45 | Hover statesFocus ringsPrimary buttons hover |
| 700 | A80B #A80B37 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7808 #780827 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4D05 #4D0519 | Primary textHigh emphasis contentDark headings |
| 950 | 3003 #300310 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--fire-brick-50: #FEF1F4;
--fire-brick-100: #FDDDE6;
--fire-brick-200: #FBC1D1;
--fire-brick-300: #F891AE;
--fire-brick-400: #F45784;
--fire-brick-500: #F12760;
--fire-brick-600: #D30D45;
--fire-brick-700: #A80B37;
--fire-brick-800: #780827;
--fire-brick-900: #4D0519;
--fire-brick-950: #300310;
}