Black
#000733
BlueColor Codes
All color formats for development
HEX
#000733RGB
rgb(0, 7, 51)HSL
hsl(232, 100%, 10%)OKLCH
oklch(0.164 0.088 263.5)CMYK
cmyk(100%, 86%, 0%, 80%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#00062E
2#000529
3#000524
4#00041F
5#00031A
6#000314
7#00020F
8#00010A
9#000105
Tints
Lighter variations
1#000D61
2#00138F
3#0019BD
4#001FEB
5#1A38FF
6#4760FF
7#7588FF
8#A3AFFF
9#D1D7FF
Tones
Muted variations
1#030930
2#050B2E
3#080C2B
4#0A0E29
5#0D1026
6#0F1224
7#121421
8#14161F
9#17181C
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F0F2 #F0F2FF | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DBE0 #DBE0FF | Light backgroundsTable row hoverSkeleton loading |
| 200 | BDC6 #BDC6FF | Secondary backgroundsInput backgroundsDividers |
| 300 | 8A99 #8A99FF | BordersInactive statesPlaceholder text |
| 400 | 4D64 #4D64FF | Disabled statesSecondary iconsMuted text |
| 500 | 1A38 #1A38FF | Primary brand colorCTAsActive elementsLinks |
| 600 | 001E #001EE0 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 0018 #0018B3 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0011 #001180 | Text on light backgroundsHeadingsStrong borders |
| 900 | 000B #000B52 | Primary textHigh emphasis contentDark headings |
| 950 | 0007 #000733 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--black-50: #F0F2FF;
--black-100: #DBE0FF;
--black-200: #BDC6FF;
--black-300: #8A99FF;
--black-400: #4D64FF;
--black-500: #1A38FF;
--black-600: #001EE0;
--black-700: #0018B3;
--black-800: #001180;
--black-900: #000B52;
--black-950: #000733;
}