Dichtstbijzijnde benoemde kleur · #55221A
#55221A
Dichtstbijzijnde benoemde kleur: Torrefacto Roast
#55221A (rgb(85 34 26), hsl(8 53% 22%), oklch(0.325 0.078 30.8)) komt het dichtst bij de benoemde kleur Torrefacto Roast. Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
#55221A
oklch(0.325 0.078 30.8)
Kleurconversies
- 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%)
Tinten · Schaduwen · Tonen
Tinten
- 66362E
- 774B43
- 885F58
- 99756E
- AA8B85
- BBA19C
- CCB8B4
- DDCFCC
- EEE7E5
Schaduwen
- 491C15
- 3D1610
- 31110C
- 260B07
- 1C0704
- 110302
- 080101
- 020000
- 000000
Tonen
- 5A2C24
- 5F352E
- 643E37
- 684841
- 6D514B
- 715A56
- 756360
- 796D6B
- 7D7675
Kleurharmonieën
Complementair +180°
- 55221A
Torrefacto Roast
- 003B44
≈ Ghostlands Coal
Analoog -30° +30°
- 55221A
Torrefacto Roast
- 532032
≈ Largest Black Slug
- 4F2900
≈ Stirland Mud
Triadisch +120° +240°
- 55221A
Torrefacto Roast
- 0C3F1E
≈ Angel Green
- 25305C
≈ Underwater Realm
Gesplitst complementair +150° +210°
- 55221A
Torrefacto Roast
- 003E36
≈ Botanical Night
- 003857
≈ Incremental Blue
Tetradisch +90° +180° +270°
- 55221A
Torrefacto Roast
- 2E3900
≈ Wasabi Nori
- 003B44
≈ Ghostlands Coal
- 3B2955
≈ Parachute Purple
Contrast en toegankelijkheid
Ag
AAAOp wit
WCAG 12.88:1 · APCA Lc 99
Ag
FailOp zwart
WCAG 1.62:1 · APCA Lc 0
Beste tekstkleur: #FFFFFF
WCAG 12.88:1 (AAA) · APCA Lc 99
Contrast pairs
Codefragmenten
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);
}