Benannte Farbe · #5B5354
Bittersweet Molasses
Bittersweet Molasses ist #5B5354: rgb(91 83 84), hsl(353 5% 34%), oklch(0.45 0.011 8.9). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Gray mean? → · Bittersweet Molasses color name →
#5B5354
oklch(0.45 0.011 8.9)
Farbumrechnungen
- HEX
- #5b5354
- RGB
- rgb(91 83 84)
- HSL
- hsl(353 5% 34%)
- HWB
- hwb(353 33% 64%)
- OKLCH
- oklch(0.45 0.011 8.9)
- OKLab
- oklab(0.45 0.01 0.002)
- CIE Lab
- lab(36.11 3.54 0.66)
- LCH
- lch(36.11 3.6 10.6)
- CMYK
- cmyk(0% 9% 8% 64%)
Tints · Shades · Tones
Tints
- 6A6363
- 797373
- 898384
- 999494
- A9A5A5
- BAB6B7
- CBC8C8
- DCDADA
- EDECEC
Shades
- 4E4748
- 413B3C
- 353031
- 292526
- 1E1B1B
- 131111
- 090808
- 030202
- 000000
Tones
- 5F5758
- 625C5D
- 666061
- 6A6565
- 6D696A
- 716E6E
- 757272
- 787777
- 7C7B7B
Farbharmonien
Komplementär +180°
- 5B5354
Bittersweet Molasses
- 4F5756
≈ Mako
Analog -30° +30°
- 5B5354
Bittersweet Molasses
- 5A5357
≈ Bittersweet Molasses
- 5B5351
≈ Wolf’s Fur
Triadisch +120° +240°
- 5B5354
Bittersweet Molasses
- 535750
≈ Twilight Forest
- 51565B
≈ Orion Grey
Geteilt komplementär +150° +210°
- 5B5354
Bittersweet Molasses
- 515753
≈ Addo
- 4F5759
≈ Cobalt Cannon
Tetradisch +90° +180° +270°
- 5B5354
Bittersweet Molasses
- 57564F
≈ Twilight Forest
- 4F5756
≈ Mako
- 54555B
≈ Coal Tipple
Kontrast & Barrierefreiheit
Ag
AAAAuf Weiß
WCAG 7.47:1 · APCA Lc 86
Ag
FailAuf Schwarz
WCAG 2.81:1 · APCA Lc 16
Beste Textfarbe: #FFFFFF
WCAG 7.47:1 (AAA) · APCA Lc 86
Contrast pairs
Code-Snippets
CSS
:root {
--bittersweet-molasses: #5b5354;
--bittersweet-molasses-rgb: 91 83 84;
--bittersweet-molasses-oklch: oklch(0.45 0.011 8.9);
}
.element {
color: var(--bittersweet-molasses);
background-color: hsl(353 5% 34%);
border-color: oklch(0.45 0.011 8.9);
}Tailwind CSS v4
@theme {
--color-bittersweet-molasses: #5b5354;
--color-bittersweet-molasses-50: #f8f4f4;
--color-bittersweet-molasses-100: #ebe6e7;
--color-bittersweet-molasses-200: #d9d2d3;
--color-bittersweet-molasses-300: #bdb5b6;
--color-bittersweet-molasses-400: #a49c9d;
--color-bittersweet-molasses-500: #8d8385;
--color-bittersweet-molasses-600: #776f70;
--color-bittersweet-molasses-700: #5f595a;
--color-bittersweet-molasses-800: #464142;
--color-bittersweet-molasses-900: #302d2d;
--color-bittersweet-molasses-950: #1d1a1a;
}SCSS
$bittersweet-molasses: #5b5354;
$bittersweet-molasses-rgb: 91, 83, 84;
$bittersweet-molasses-light: mix(#fff, $bittersweet-molasses, 20%);
$bittersweet-molasses-dark: mix(#000, $bittersweet-molasses, 20%);
.element {
color: $bittersweet-molasses;
box-shadow: 0 0 0 2px rgba($bittersweet-molasses, 0.35);
}