Named color · #020308
Ninja
Ninja is #020308: rgb(2 3 8), hsl(230 60% 2%), oklch(0.099 0.018 269.9). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Ninja color name →
#020308
oklch(0.099 0.018 269.9)
Color conversions
- HEX
- #020308
- RGB
- rgb(2 3 8)
- HSL
- hsl(230 60% 2%)
- HWB
- hwb(230 1% 97%)
- OKLCH
- oklch(0.099 0.018 269.9)
- OKLab
- oklab(0.099 0 -0.018)
- CIE Lab
- lab(0.84 0.25 -2)
- LCH
- lch(0.84 2.01 277)
- CMYK
- cmyk(75% 63% 0% 97%)
Tints · Shades · Tones
Tints
- 11131B
- 262830
- 3D3F47
- 55585E
- 6F7177
- 8A8C91
- A6A7AB
- C3C4C6
- E1E1E2
Shades
- 010206
- 010204
- 010103
- 000102
- 000001
- 000001
- 000000
- 000000
- 000000
Tones
- 080B12
- 13161D
- 1F2128
- 2B2E33
- 383A3F
- 46474C
- 545558
- 626365
- 717172
Color harmonies
Complementary +180°
- 020308
Ninja
- 050300
≈ Armour Wash
Analogous -30° +30°
- 020308
Ninja
- 010407
≈ Ninja
- 040207
≈ Raven’s Coat
Triadic +120° +240°
- 020308
Ninja
- 070201
≈ Pupil
- 010402
≈ Armour Wash
Split-complementary +150° +210°
- 020308
Ninja
- 060201
≈ Pupil
- 030401
≈ Armour Wash
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
AAAOn white
WCAG 20.60:1 · APCA Lc 106
Ag
FailOn black
WCAG 1.01:1 · APCA Lc 0
Best text color: #FFFFFF
WCAG 20.60:1 (AAA) · APCA Lc 106
Contrast pairs
Code snippets
CSS
:root {
--ninja: #020308;
--ninja-rgb: 2 3 8;
--ninja-oklch: oklch(0.099 0.018 269.9);
}
.element {
color: var(--ninja);
background-color: hsl(230 60% 2%);
border-color: oklch(0.099 0.018 269.9);
}Tailwind CSS v4
@theme {
--color-ninja: #020308;
--color-ninja-50: #f3f5fa;
--color-ninja-100: #e5e8ee;
--color-ninja-200: #d1d4dc;
--color-ninja-300: #b4b7c1;
--color-ninja-400: #9a9eaa;
--color-ninja-500: #818693;
--color-ninja-600: #6d717c;
--color-ninja-700: #575b63;
--color-ninja-800: #404249;
--color-ninja-900: #2c2e33;
--color-ninja-950: #191b1e;
}SCSS
$ninja: #020308;
$ninja-rgb: 2, 3, 8;
$ninja-light: mix(#fff, $ninja, 20%);
$ninja-dark: mix(#000, $ninja, 20%);
.element {
color: $ninja;
box-shadow: 0 0 0 2px rgba($ninja, 0.35);
}