Cor nomeada · #53433E
Spiced Hot Chocolate
Spiced Hot Chocolate é #53433E: rgb(83 67 62), hsl(14 14% 28%), oklch(0.398 0.024 38.1). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Gray mean? → · Spiced Hot Chocolate color name →
#53433E
oklch(0.398 0.024 38.1)
Conversões de cor
- HEX
- #53433e
- RGB
- rgb(83 67 62)
- HSL
- hsl(14 14% 28%)
- HWB
- hwb(14 24% 67%)
- OKLCH
- oklch(0.398 0.024 38.1)
- OKLab
- oklab(0.398 0.019 0.015)
- CIE Lab
- lab(30.01 6.44 5.77)
- LCH
- lch(30.01 8.65 41.9)
- CMYK
- cmyk(0% 19% 25% 67%)
Tons claros · Sombras · Tons
Tons claros
- 63544F
- 736561
- 837773
- 948986
- A59C99
- B7AFAC
- C8C2C1
- DAD6D5
- ECEAEA
Sombras
- 473935
- 3B2F2B
- 302623
- 251D1A
- 1B1412
- 110C0A
- 080504
- 020101
- 000000
Tons
- 574944
- 5C4F4B
- 605551
- 655B58
- 69615E
- 6E6765
- 726D6B
- 777372
- 7B7A79
Harmonias de cor
Complementar +180°
- 53433E
Spiced Hot Chocolate
- 394A50
≈ Galenite Blue
Análoga -30° +30°
- 53433E
Spiced Hot Chocolate
- 534245
≈ Rich Bordeaux
- 50453A
≈ Peppercorn Rent
Tríade +120° +240°
- 53433E
Spiced Hot Chocolate
- 3D4B42
≈ Deep Mooring
- 444654
≈ Black Sapphire
Complementar dividida +150° +210°
- 53433E
Spiced Hot Chocolate
- 394B49
≈ Deep Mooring
- 3D4954
≈ Club Navy
Tétrade +90° +180° +270°
- 53433E
Spiced Hot Chocolate
- 434A3C
≈ Laurel Woods
- 394A50
≈ Galenite Blue
- 4B4451
≈ Ishtar
Contraste e acessibilidade
Ag
AAASobre branco
WCAG 9.37:1 · APCA Lc 92
Ag
FailSobre preto
WCAG 2.24:1 · APCA Lc 11
Melhor cor de texto: #FFFFFF
WCAG 9.37:1 (AAA) · APCA Lc 92
Contrast pairs
Trechos de código
CSS
:root {
--spiced-hot-chocolate: #53433e;
--spiced-hot-chocolate-rgb: 83 67 62;
--spiced-hot-chocolate-oklch: oklch(0.398 0.024 38.1);
}
.element {
color: var(--spiced-hot-chocolate);
background-color: hsl(14 14% 28%);
border-color: oklch(0.398 0.024 38.1);
}Tailwind CSS v4
@theme {
--color-spiced-hot-chocolate: #53433e;
--color-spiced-hot-chocolate-50: #fcf3f0;
--color-spiced-hot-chocolate-100: #efe5e2;
--color-spiced-hot-chocolate-200: #ded1cd;
--color-spiced-hot-chocolate-300: #c3b4ae;
--color-spiced-hot-chocolate-400: #ac9a94;
--color-spiced-hot-chocolate-500: #95817b;
--color-spiced-hot-chocolate-600: #7e6d68;
--color-spiced-hot-chocolate-700: #655753;
--color-spiced-hot-chocolate-800: #4a403d;
--color-spiced-hot-chocolate-900: #332c2a;
--color-spiced-hot-chocolate-950: #1f1917;
}SCSS
$spiced-hot-chocolate: #53433e;
$spiced-hot-chocolate-rgb: 83, 67, 62;
$spiced-hot-chocolate-light: mix(#fff, $spiced-hot-chocolate, 20%);
$spiced-hot-chocolate-dark: mix(#000, $spiced-hot-chocolate, 20%);
.element {
color: $spiced-hot-chocolate;
box-shadow: 0 0 0 2px rgba($spiced-hot-chocolate, 0.35);
}