Color con nombre más cercano · #320B14
#320B14
Color con nombre más cercano: Chocolate Kiss
#320B14 (rgb(50 11 20), hsl(346 64% 12%), oklch(0.221 0.063 10)) se parece más al color con nombre Chocolate Kiss. Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
#320B14
oklch(0.221 0.063 10)
Conversiones de color
- HEX
- #320b14
- RGB
- rgb(50 11 20)
- HSL
- hsl(346 64% 12%)
- HWB
- hwb(346 4% 80%)
- OKLCH
- oklch(0.221 0.063 10)
- OKLab
- oklab(0.221 0.062 0.011)
- CIE Lab
- lab(8.92 20.62 4.51)
- LCH
- lch(8.92 21.11 12.3)
- CMYK
- cmyk(0% 78% 60% 80%)
Tintes · Sombras · Tonos
Tintes
- 452027
- 59363B
- 6D4C51
- 816467
- 957C7F
- AA9597
- BFAEB0
- D4C9CA
- E9E4E4
Sombras
- 2A0810
- 22060C
- 1B0408
- 140205
- 0D0103
- 070101
- 030001
- 010000
- 000000
Tonos
- 3A171D
- 432227
- 4B2D31
- 52383C
- 5A4446
- 624F52
- 6A5B5D
- 716768
- 797474
Armonías de color
Complementario +180°
- 320B14
Chocolate Kiss
- 00201F
≈ Stellar Explorer
Análogo -30° +30°
- 320B14
Chocolate Kiss
- 2D0D24
≈ Dark Prom Queen
- 320E02
≈ Chocolate Melange
Triádico +120° +240°
- 320B14
Chocolate Kiss
- 112000
≈ Yuzu Soy
- 001C36
≈ Naval Night
Complementario dividido +150° +210°
- 320B14
Chocolate Kiss
- 002213
≈ Clock Chimes Thirteen
- 001F28
≈ Stellar Explorer
Tetrádico +90° +180° +270°
- 320B14
Chocolate Kiss
- 201B00
≈ Noir Mystique
- 00201F
≈ Stellar Explorer
- 161637
≈ Lost in Sadness
Contraste y accesibilidad
Ag
AAASobre blanco
WCAG 17.59:1 · APCA Lc 104
Ag
FailSobre negro
WCAG 1.19:1 · APCA Lc 0
Mejor color de texto: #FFFFFF
WCAG 17.59:1 (AAA) · APCA Lc 104
Contrast pairs
Fragmentos de código
CSS
:root {
--chocolate-kiss: #320b14;
--chocolate-kiss-rgb: 50 11 20;
--chocolate-kiss-oklch: oklch(0.221 0.063 10);
}
.element {
color: var(--chocolate-kiss);
background-color: hsl(346 64% 12%);
border-color: oklch(0.221 0.063 10);
}Tailwind CSS v4
@theme {
--color-chocolate-kiss: #320b14;
--color-chocolate-kiss-50: #ffeef0;
--color-chocolate-kiss-100: #fce0e2;
--color-chocolate-kiss-200: #eecacd;
--color-chocolate-kiss-300: #d6abaf;
--color-chocolate-kiss-400: #c08f96;
--color-chocolate-kiss-500: #ab757c;
--color-chocolate-kiss-600: #916369;
--color-chocolate-kiss-700: #744f54;
--color-chocolate-kiss-800: #56393e;
--color-chocolate-kiss-900: #3c272b;
--color-chocolate-kiss-950: #261518;
}SCSS
$chocolate-kiss: #320b14;
$chocolate-kiss-rgb: 50, 11, 20;
$chocolate-kiss-light: mix(#fff, $chocolate-kiss, 20%);
$chocolate-kiss-dark: mix(#000, $chocolate-kiss, 20%);
.element {
color: $chocolate-kiss;
box-shadow: 0 0 0 2px rgba($chocolate-kiss, 0.35);
}