Red
#DD1D03
RedColor Codes
All color formats for development
HEX
#DD1D03RGB
rgb(221, 29, 3)HSL
hsl(7, 97%, 44%)OKLCH
oklch(0.572 0.223 30.7)CMYK
cmyk(0%, 87%, 99%, 13%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#C71A03
2#B11703
3#9B1402
4#851102
5#6F0E02
6#580C01
7#420901
8#2C0601
9#160300
Tints
Lighter variations
1#F92004
2#FC381E
3#FC513A
4#FC6A56
5#FD8372
6#FD9B8E
7#FEB4AB
8#FECDC7
9#FFE6E3
Tones
Muted variations
1#D2250E
2#C72D19
3#BC3624
4#B23E2F
5#A7463A
6#9C4F45
7#915750
8#86605A
9#7B6865
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FFF2 #FFF2F0 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FEE0 #FEE0DC | Light backgroundsTable row hoverSkeleton loading |
| 200 | FEC5 #FEC5BE | Secondary backgroundsInput backgroundsDividers |
| 300 | FD99 #FD998B | BordersInactive statesPlaceholder text |
| 400 | FC63 #FC634F | Disabled statesSecondary iconsMuted text |
| 500 | FC37 #FC371D | Primary brand colorCTAsActive elementsLinks |
| 600 | DD1D #DD1D03 | Hover statesFocus ringsPrimary buttons hover |
| 700 | B017 #B01703 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7E10 #7E1002 | Text on light backgroundsHeadingsStrong borders |
| 900 | 500A #500A01 | Primary textHigh emphasis contentDark headings |
| 950 | 3207 #320701 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--red-50: #FFF2F0;
--red-100: #FEE0DC;
--red-200: #FEC5BE;
--red-300: #FD998B;
--red-400: #FC634F;
--red-500: #FC371D;
--red-600: #DD1D03;
--red-700: #B01703;
--red-800: #7E1002;
--red-900: #500A01;
--red-950: #320701;
}