Cor nomeada · #5B5354
Bittersweet Molasses
Bittersweet Molasses é #5B5354: rgb(91 83 84), hsl(353 5% 34%), oklch(0.45 0.011 8.9). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Gray mean? → · Bittersweet Molasses color name →
#5B5354
oklch(0.45 0.011 8.9)
Conversões de cor
- 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%)
Tons claros · Sombras · Tons
Tons claros
- 6A6363
- 797373
- 898384
- 999494
- A9A5A5
- BAB6B7
- CBC8C8
- DCDADA
- EDECEC
Sombras
- 4E4748
- 413B3C
- 353031
- 292526
- 1E1B1B
- 131111
- 090808
- 030202
- 000000
Tons
- 5F5758
- 625C5D
- 666061
- 6A6565
- 6D696A
- 716E6E
- 757272
- 787777
- 7C7B7B
Harmonias de cor
Complementar +180°
- 5B5354
Bittersweet Molasses
- 4F5756
≈ Mako
Análoga -30° +30°
- 5B5354
Bittersweet Molasses
- 5A5357
≈ Bittersweet Molasses
- 5B5351
≈ Wolf’s Fur
Tríade +120° +240°
- 5B5354
Bittersweet Molasses
- 535750
≈ Twilight Forest
- 51565B
≈ Orion Grey
Complementar dividida +150° +210°
- 5B5354
Bittersweet Molasses
- 515753
≈ Addo
- 4F5759
≈ Cobalt Cannon
Tétrade +90° +180° +270°
- 5B5354
Bittersweet Molasses
- 57564F
≈ Twilight Forest
- 4F5756
≈ Mako
- 54555B
≈ Coal Tipple
Contraste e acessibilidade
Ag
AAASobre branco
WCAG 7.47:1 · APCA Lc 86
Ag
FailSobre preto
WCAG 2.81:1 · APCA Lc 16
Melhor cor de texto: #FFFFFF
WCAG 7.47:1 (AAA) · APCA Lc 86
Contrast pairs
Trechos de código
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);
}