Color con nombre más cercano · #55221A
#55221A
Color con nombre más cercano: Torrefacto Roast
#55221A (rgb(85 34 26), hsl(8 53% 22%), oklch(0.325 0.078 30.8)) se parece más al color con nombre Torrefacto Roast. Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
#55221A
oklch(0.325 0.078 30.8)
Conversiones de color
- HEX
- #55221a
- RGB
- rgb(85 34 26)
- HSL
- hsl(8 53% 22%)
- HWB
- hwb(8 10% 67%)
- OKLCH
- oklch(0.325 0.078 30.8)
- OKLab
- oklab(0.325 0.067 0.04)
- CIE Lab
- lab(20.94 23.72 17.46)
- LCH
- lch(20.94 29.46 36.4)
- CMYK
- cmyk(0% 60% 69% 67%)
Tintes · Sombras · Tonos
Tintes
- 66362E
- 774B43
- 885F58
- 99756E
- AA8B85
- BBA19C
- CCB8B4
- DDCFCC
- EEE7E5
Sombras
- 491C15
- 3D1610
- 31110C
- 260B07
- 1C0704
- 110302
- 080101
- 020000
- 000000
Tonos
- 5A2C24
- 5F352E
- 643E37
- 684841
- 6D514B
- 715A56
- 756360
- 796D6B
- 7D7675
Armonías de color
Complementario +180°
- 55221A
Torrefacto Roast
- 003B44
≈ Ghostlands Coal
Análogo -30° +30°
- 55221A
Torrefacto Roast
- 532032
≈ Largest Black Slug
- 4F2900
≈ Stirland Mud
Triádico +120° +240°
- 55221A
Torrefacto Roast
- 0C3F1E
≈ Angel Green
- 25305C
≈ Underwater Realm
Complementario dividido +150° +210°
- 55221A
Torrefacto Roast
- 003E36
≈ Botanical Night
- 003857
≈ Incremental Blue
Tetrádico +90° +180° +270°
- 55221A
Torrefacto Roast
- 2E3900
≈ Wasabi Nori
- 003B44
≈ Ghostlands Coal
- 3B2955
≈ Parachute Purple
Contraste y accesibilidad
Ag
AAASobre blanco
WCAG 12.88:1 · APCA Lc 99
Ag
FailSobre negro
WCAG 1.62:1 · APCA Lc 0
Mejor color de texto: #FFFFFF
WCAG 12.88:1 (AAA) · APCA Lc 99
Contrast pairs
Fragmentos de código
CSS
:root {
--torrefacto-roast: #55221a;
--torrefacto-roast-rgb: 85 34 26;
--torrefacto-roast-oklch: oklch(0.325 0.078 30.8);
}
.element {
color: var(--torrefacto-roast);
background-color: hsl(8 53% 22%);
border-color: oklch(0.325 0.078 30.8);
}Tailwind CSS v4
@theme {
--color-torrefacto-roast: #55221a;
--color-torrefacto-roast-50: #ffeee7;
--color-torrefacto-roast-100: #ffdfd8;
--color-torrefacto-roast-200: #f4c9bf;
--color-torrefacto-roast-300: #dca99e;
--color-torrefacto-roast-400: #c88e83;
--color-torrefacto-roast-500: #b47266;
--color-torrefacto-roast-600: #986157;
--color-torrefacto-roast-700: #7a4d45;
--color-torrefacto-roast-800: #5a3833;
--color-torrefacto-roast-900: #3f2622;
--color-torrefacto-roast-950: #281412;
}SCSS
$torrefacto-roast: #55221a;
$torrefacto-roast-rgb: 85, 34, 26;
$torrefacto-roast-light: mix(#fff, $torrefacto-roast, 20%);
$torrefacto-roast-dark: mix(#000, $torrefacto-roast, 20%);
.element {
color: $torrefacto-roast;
box-shadow: 0 0 0 2px rgba($torrefacto-roast, 0.35);
}