Nearest named color · #333340
#333340
Nearest named color: Witches Cauldron
#333340 (rgb(51 51 64), hsl(240 11% 23%), oklch(0.326 0.023 285.1)) is closest to the named color Witches Cauldron. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#333340
oklch(0.326 0.023 285.1)
Color conversions
- HEX
- #333340
- RGB
- rgb(51 51 64)
- HSL
- hsl(240 11% 23%)
- HWB
- hwb(240 20% 75%)
- OKLCH
- oklch(0.326 0.023 285.1)
- OKLab
- oklab(0.326 0.006 -0.022)
- CIE Lab
- lab(21.66 2.48 -8.18)
- LCH
- lch(21.66 8.55 286.9)
- CMYK
- cmyk(20% 20% 0% 75%)
Tints · Shades · Tones
Tints
- 454551
- 575762
- 6A6A75
- 7E7E87
- 92929A
- A7A7AE
- BCBCC1
- D2D2D6
- E8E8EA
Shades
- 2B2B36
- 23232D
- 1C1C24
- 14141B
- 0D0D13
- 07070B
- 030305
- 010101
- 000000
Tones
- 3A3A46
- 41414C
- 494953
- 505059
- 58585F
- 606066
- 68686C
- 707073
- 787879
Color harmonies
Complementary +180°
- 333340
Witches Cauldron
- 363528
≈ Graphite
Analogous -30° +30°
- 333340
Witches Cauldron
- 2D3540
≈ Anchorman
- 39313D
≈ Persian Prince
Triadic +120° +240°
- 333340
Witches Cauldron
- 3F312B
≈ Chinese Ink
- 2A3832
≈ Tetsu Black
Split-complementary +150° +210°
- 333340
Witches Cauldron
- 3B3327
≈ Sensaicha Brown
- 2F372C
≈ Aimiru Brown
Tetradic +90° +180° +270°
- 333340
Witches Cauldron
- 3F3031
≈ Chocolate Plum
- 363528
≈ Graphite
- 273838
≈ Tetsuonando Black
Contrast & accessibility
Ag
AAAOn white
WCAG 12.43:1 · APCA Lc 98
Ag
FailOn black
WCAG 1.68:1 · APCA Lc 0
Best text color: #FFFFFF
WCAG 12.43:1 (AAA) · APCA Lc 98
Contrast pairs
Code snippets
CSS
:root {
--witches-cauldron: #333340;
--witches-cauldron-rgb: 51 51 64;
--witches-cauldron-oklch: oklch(0.326 0.023 285.1);
}
.element {
color: var(--witches-cauldron);
background-color: hsl(240 11% 23%);
border-color: oklch(0.326 0.023 285.1);
}Tailwind CSS v4
@theme {
--color-witches-cauldron: #333340;
--color-witches-cauldron-50: #f4f4fc;
--color-witches-cauldron-100: #e7e7ef;
--color-witches-cauldron-200: #d3d3de;
--color-witches-cauldron-300: #b6b6c3;
--color-witches-cauldron-400: #9d9dac;
--color-witches-cauldron-500: #848495;
--color-witches-cauldron-600: #70707e;
--color-witches-cauldron-700: #595a65;
--color-witches-cauldron-800: #41414a;
--color-witches-cauldron-900: #2d2d34;
--color-witches-cauldron-950: #1a1a1f;
}SCSS
$witches-cauldron: #333340;
$witches-cauldron-rgb: 51, 51, 64;
$witches-cauldron-light: mix(#fff, $witches-cauldron, 20%);
$witches-cauldron-dark: mix(#000, $witches-cauldron, 20%);
.element {
color: $witches-cauldron;
box-shadow: 0 0 0 2px rgba($witches-cauldron, 0.35);
}