Benoemde kleur · #6F4E43
Chocolate Sprinkle
Chocolate Sprinkle is #6F4E43: rgb(111 78 67), hsl(15 25% 35%), oklch(0.457 0.048 39.2). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Red mean? → · Chocolate Sprinkle color name →
#6F4E43
oklch(0.457 0.048 39.2)
Kleurconversies
- HEX
- #6f4e43
- RGB
- rgb(111 78 67)
- HSL
- hsl(15 25% 35%)
- HWB
- hwb(15 26% 56%)
- OKLCH
- oklch(0.457 0.048 39.2)
- OKLab
- oklab(0.457 0.037 0.031)
- CIE Lab
- lab(36.63 13.19 12.34)
- LCH
- lch(36.63 18.06 43.1)
- CMYK
- cmyk(0% 30% 40% 56%)
Tinten · Schaduwen · Tonen
Tinten
- 7D5E54
- 8B6F65
- 998077
- A79189
- B5A29C
- C4B4AF
- D3C7C3
- E1D9D6
- F0ECEB
Schaduwen
- 604339
- 51382F
- 422D26
- 34231D
- 271914
- 1A0F0C
- 0E0705
- 040201
- 010000
Tonen
- 715349
- 73584F
- 755D55
- 77625B
- 786761
- 7A6C67
- 7C716D
- 7D7674
- 7F7B7A
Kleurharmonieën
Complementair +180°
- 6F4E43
Chocolate Sprinkle
- 365E6A
≈ Under the Sea
Analoog -30° +30°
- 6F4E43
Chocolate Sprinkle
- 6F4C51
≈ Marron
- 695239
≈ Cowboy Boots
Triadisch +120° +240°
- 6F4E43
Chocolate Sprinkle
- 3F604D
≈ Windy Pine
- 515472
≈ Sombre Grey
Gesplitst complementair +150° +210°
- 6F4E43
Chocolate Sprinkle
- 35605D
≈ Royal Pine
- 425A71
≈ Infinite Deep Sea
Tetradisch +90° +180° +270°
- 6F4E43
Chocolate Sprinkle
- 4F5D40
≈ Bavarian
- 365E6A
≈ Under the Sea
- 5F506C
≈ Blackberry Farm
Contrast en toegankelijkheid
Ag
AAAOp wit
WCAG 7.37:1 · APCA Lc 86
Ag
FailOp zwart
WCAG 2.84:1 · APCA Lc 16
Beste tekstkleur: #FFFFFF
WCAG 7.37:1 (AAA) · APCA Lc 86
Contrast pairs
Codefragmenten
CSS
:root {
--chocolate-sprinkle: #6f4e43;
--chocolate-sprinkle-rgb: 111 78 67;
--chocolate-sprinkle-oklch: oklch(0.457 0.048 39.2);
}
.element {
color: var(--chocolate-sprinkle);
background-color: hsl(15 25% 35%);
border-color: oklch(0.457 0.048 39.2);
}Tailwind CSS v4
@theme {
--color-chocolate-sprinkle: #6f4e43;
--color-chocolate-sprinkle-50: #fff1eb;
--color-chocolate-sprinkle-100: #f7e3dc;
--color-chocolate-sprinkle-200: #e7cec5;
--color-chocolate-sprinkle-300: #ceb0a5;
--color-chocolate-sprinkle-400: #b9958a;
--color-chocolate-sprinkle-500: #a37c6f;
--color-chocolate-sprinkle-600: #8a695e;
--color-chocolate-sprinkle-700: #6e544b;
--color-chocolate-sprinkle-800: #523d37;
--color-chocolate-sprinkle-900: #392a25;
--color-chocolate-sprinkle-950: #231714;
}SCSS
$chocolate-sprinkle: #6f4e43;
$chocolate-sprinkle-rgb: 111, 78, 67;
$chocolate-sprinkle-light: mix(#fff, $chocolate-sprinkle, 20%);
$chocolate-sprinkle-dark: mix(#000, $chocolate-sprinkle, 20%);
.element {
color: $chocolate-sprinkle;
box-shadow: 0 0 0 2px rgba($chocolate-sprinkle, 0.35);
}