Nächste benannte Farbe · #8B4E43
#8B4E43
Nächste benannte Farbe: Chocolate Explosion
#8B4E43 (rgb(139 78 67), hsl(9 35% 40%), oklch(0.493 0.085 31.2)) liegt am nächsten an der benannten Farbe Chocolate Explosion. Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
#8B4E43
oklch(0.493 0.085 31.2)
Farbumrechnungen
- HEX
- #8b4e43
- RGB
- rgb(139 78 67)
- HSL
- hsl(9 35% 40%)
- HWB
- hwb(9 26% 45%)
- OKLCH
- oklch(0.493 0.085 31.2)
- OKLab
- oklab(0.493 0.073 0.044)
- CIE Lab
- lab(40.49 25.41 18.27)
- LCH
- lch(40.49 31.3 35.7)
- CMYK
- cmyk(0% 44% 52% 45%)
Tints · Shades · Tones
Tints
- 975F54
- A37066
- AF8178
- BB928A
- C6A49D
- D2B5B0
- DDC7C3
- E9DAD7
- F4ECEB
Shades
- 784339
- 66382F
- 542D26
- 43231D
- 321914
- 230F0C
- 140705
- 070201
- 010000
Tones
- 8B5349
- 8A594F
- 895E55
- 89635B
- 886862
- 866D68
- 85726E
- 847674
- 827B7A
Farbharmonien
Komplementär +180°
- 8B4E43
Chocolate Explosion
- 046E7D
≈ Coastal Jetty
Analog -30° +30°
- 8B4E43
Chocolate Explosion
- 884C5E
≈ Hawthorn Rose
- 84552B
≈ Precious Copper
Triadisch +120° +240°
- 8B4E43
Chocolate Explosion
- 396F48
≈ Parsley Sprig
- 505E92
≈ Fresh Take
Geteilt komplementär +150° +210°
- 8B4E43
Chocolate Explosion
- 107164
≈ Falcon Turquoise
- 2F678D
≈ Drake’s Neck
Tetradisch +90° +180° +270°
- 8B4E43
Chocolate Explosion
- 5A692E
≈ Deathworld Forest
- 046E7D
≈ Coastal Jetty
- 6A558A
≈ Magenta Violet
Kontrast & Barrierefreiheit
Ag
AAAuf Weiß
WCAG 6.42:1 · APCA Lc 82
Ag
FailAuf Schwarz
WCAG 3.26:1 · APCA Lc 20
Beste Textfarbe: #FFFFFF
WCAG 6.42:1 (AA) · APCA Lc 82
Contrast pairs
Code-Snippets
CSS
:root {
--chocolate-explosion: #8b4e43;
--chocolate-explosion-rgb: 139 78 67;
--chocolate-explosion-oklch: oklch(0.493 0.085 31.2);
}
.element {
color: var(--chocolate-explosion);
background-color: hsl(9 35% 40%);
border-color: oklch(0.493 0.085 31.2);
}Tailwind CSS v4
@theme {
--color-chocolate-explosion: #8b4e43;
--color-chocolate-explosion-50: #ffede6;
--color-chocolate-explosion-100: #ffded6;
--color-chocolate-explosion-200: #f6c8bd;
--color-chocolate-explosion-300: #dfa89c;
--color-chocolate-explosion-400: #cc8c80;
--color-chocolate-explosion-500: #b77063;
--color-chocolate-explosion-600: #9b5f54;
--color-chocolate-explosion-700: #7c4c43;
--color-chocolate-explosion-800: #5c3731;
--color-chocolate-explosion-900: #412521;
--color-chocolate-explosion-950: #291411;
}SCSS
$chocolate-explosion: #8b4e43;
$chocolate-explosion-rgb: 139, 78, 67;
$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);
}