Fire Brick
#A60C30
RedColor Codes
All color formats for development
HEX
#A60C30RGB
rgb(166, 12, 48)HSL
hsl(346, 87%, 35%)OKLCH
oklch(0.464 0.18 18.1)CMYK
cmyk(0%, 93%, 71%, 35%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#960A2B
2#860926
3#750821
4#64071D
5#530618
6#430513
7#32030E
8#21020A
9#110105
Tints
Lighter variations
1#C60E39
2#E51042
3#F02655
4#F2456D
5#F46486
6#F6839E
7#F9A2B6
8#FBC1CE
9#FDE0E7
Tones
Muted variations
1#9F1334
2#971B38
3#90233C
4#882B40
5#803245
6#783A49
7#71424D
8#694A51
9#615155
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FEF1 #FEF1F4 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FDDE #FDDEE5 | Light backgroundsTable row hoverSkeleton loading |
| 200 | FBC1 #FBC1CE | Secondary backgroundsInput backgroundsDividers |
| 300 | F791 #F791A9 | BordersInactive statesPlaceholder text |
| 400 | F358 #F3587C | Disabled statesSecondary iconsMuted text |
| 500 | F028 #F02857 | Primary brand colorCTAsActive elementsLinks |
| 600 | D20F #D20F3C | Hover statesFocus ringsPrimary buttons hover |
| 700 | A70C #A70C30 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7708 #770822 | Text on light backgroundsHeadingsStrong borders |
| 900 | 4C05 #4C0516 | Primary textHigh emphasis contentDark headings |
| 950 | 3003 #30030E | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--fire-brick-50: #FEF1F4;
--fire-brick-100: #FDDEE5;
--fire-brick-200: #FBC1CE;
--fire-brick-300: #F791A9;
--fire-brick-400: #F3587C;
--fire-brick-500: #F02857;
--fire-brick-600: #D20F3C;
--fire-brick-700: #A70C30;
--fire-brick-800: #770822;
--fire-brick-900: #4C0516;
--fire-brick-950: #30030E;
}