Cor nomeada mais próxima · #8F493A
#8F493A
Cor nomeada mais próxima: Chocolate Explosion
#8F493A (rgb(143 73 58), hsl(11 42% 39%), oklch(0.488 0.098 33.3)) é mais próxima da cor nomeada Chocolate Explosion. Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
#8F493A
oklch(0.488 0.098 33.3)
Conversões de cor
- HEX
- #8f493a
- RGB
- rgb(143 73 58)
- HSL
- hsl(11 42% 39%)
- HWB
- hwb(11 23% 44%)
- OKLCH
- oklch(0.488 0.098 33.3)
- OKLab
- oklab(0.488 0.082 0.054)
- CIE Lab
- lab(39.82 29.18 23.01)
- LCH
- lch(39.82 37.16 38.3)
- CMYK
- cmyk(0% 49% 59% 44%)
Tons claros · Sombras · Tons
Tons claros
- 9B5B4C
- A76C5F
- B37E72
- BE9085
- C9A298
- D4B4AC
- DFC6C0
- EAD9D5
- F5ECEA
Sombras
- 7C3E31
- 693428
- 572A20
- 452018
- 341710
- 240E09
- 150604
- 070201
- 010000
Tons
- 8E4F41
- 8E5548
- 8D5B4F
- 8B6056
- 8A665D
- 896B64
- 87706B
- 857672
- 837B79
Harmonias de cor
Complementar +180°
- 8F493A
Chocolate Explosion
- 006C7D
≈ Shinbashi Azure
Análoga -30° +30°
- 8F493A
Chocolate Explosion
- 8D465A
≈ Dull Magenta
- 865219
≈ Precious Copper
Tríade +120° +240°
- 8F493A
Chocolate Explosion
- 2B7045
≈ Felt
- 4E5B97
≈ Nightly Silhouette
Complementar dividida +150° +210°
- 8F493A
Chocolate Explosion
- 007065
≈ Falcon Turquoise
- 246593
≈ Starry Night
Tétrade +90° +180° +270°
- 8F493A
Chocolate Explosion
- 556923
≈ Bowser Shell
- 006C7D
≈ Shinbashi Azure
- 6C518D
≈ Pure Mauve
Contraste e acessibilidade
Ag
AASobre branco
WCAG 6.59:1 · APCA Lc 82
Ag
FailSobre preto
WCAG 3.18:1 · APCA Lc 20
Melhor cor de texto: #FFFFFF
WCAG 6.59:1 (AA) · APCA Lc 82
Contrast pairs
Trechos de código
CSS
:root {
--chocolate-explosion: #8f493a;
--chocolate-explosion-rgb: 143 73 58;
--chocolate-explosion-oklch: oklch(0.488 0.098 33.3);
}
.element {
color: var(--chocolate-explosion);
background-color: hsl(11 42% 39%);
border-color: oklch(0.488 0.098 33.3);
}Tailwind CSS v4
@theme {
--color-chocolate-explosion: #8f493a;
--color-chocolate-explosion-50: #ffece2;
--color-chocolate-explosion-100: #ffddd2;
--color-chocolate-explosion-200: #fbc6b8;
--color-chocolate-explosion-300: #e5a695;
--color-chocolate-explosion-400: #d28978;
--color-chocolate-explosion-500: #be6c5b;
--color-chocolate-explosion-600: #a15c4d;
--color-chocolate-explosion-700: #814a3d;
--color-chocolate-explosion-800: #60352d;
--color-chocolate-explosion-900: #43241e;
--color-chocolate-explosion-950: #2b130e;
}SCSS
$chocolate-explosion: #8f493a;
$chocolate-explosion-rgb: 143, 73, 58;
$chocolate-explosion-light: mix(#fff, $chocolate-explosion, 20%);
$chocolate-explosion-dark: mix(#000, $chocolate-explosion, 20%);
.element {
color: $chocolate-explosion;
box-shadow: 0 0 0 2px rgba($chocolate-explosion, 0.35);
}