Black
#320D01
OrangeColor Codes
All color formats for development
HEX
#320D01RGB
rgb(50, 13, 1)HSL
hsl(15, 96%, 10%)OKLCH
oklch(0.22 0.065 41.1)CMYK
cmyk(0%, 74%, 98%, 80%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#2D0C01
2#280B01
3#230901
4#1E0801
5#190701
6#140500
7#0F0400
8#0A0300
9#050100
Tints
Lighter variations
1#5F1902
2#8C2503
3#B93104
4#E63D05
5#FA551E
6#FB774B
7#FC9978
8#FDBBA5
9#FEDDD2
Tones
Muted variations
1#300E03
2#2D1006
3#2B1108
4#28120B
5#26130D
6#231510
7#211612
8#1E1715
9#1C1817
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | FFF4 #FFF4F0 | BackgroundsSubtle highlightsCard backgrounds |
| 100 | FEE5 #FEE5DC | Light backgroundsTable row hoverSkeleton loading |
| 200 | FECE #FECEBE | Secondary backgroundsInput backgroundsDividers |
| 300 | FDA8 #FDA88C | BordersInactive statesPlaceholder text |
| 400 | FB7B #FB7B50 | Disabled statesSecondary iconsMuted text |
| 500 | FA55 #FA551E | Primary brand colorCTAsActive elementsLinks |
| 600 | DC3A #DC3A04 | Hover statesFocus ringsPrimary buttons hover |
| 700 | AF2E #AF2E04 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 7D21 #7D2103 | Text on light backgroundsHeadingsStrong borders |
| 900 | 5015 #501502 | Primary textHigh emphasis contentDark headings |
| 950 | 320D #320D01 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--black-50: #FFF4F0;
--black-100: #FEE5DC;
--black-200: #FECEBE;
--black-300: #FDA88C;
--black-400: #FB7B50;
--black-500: #FA551E;
--black-600: #DC3A04;
--black-700: #AF2E04;
--black-800: #7D2103;
--black-900: #501502;
--black-950: #320D01;
}