Dichtstbijzijnde benoemde kleur · #D87444
#D87444
Dichtstbijzijnde benoemde kleur: Jaffa
#D87444 (rgb(216 116 68), hsl(19 65% 56%), oklch(0.664 0.14 45)) komt het dichtst bij de benoemde kleur Jaffa. Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
#D87444
oklch(0.664 0.14 45)
Kleurconversies
- HEX
- #d87444
- RGB
- rgb(216 116 68)
- HSL
- hsl(19 65% 56%)
- HWB
- hwb(19 27% 15%)
- OKLCH
- oklch(0.664 0.14 45)
- OKLab
- oklab(0.664 0.099 0.099)
- CIE Lab
- lab(60.02 37.27 44.13)
- LCH
- lch(60.02 57.76 49.8)
- CMYK
- cmyk(0% 46% 69% 15%)
Tinten · Schaduwen · Tonen
Tinten
- DD8258
- E2916B
- E79F7E
- ECAC90
- F0BAA3
- F3C8B5
- F7D6C7
- FAE3DA
- FDF1EC
Schaduwen
- BC643A
- A05430
- 854526
- 6B371D
- 532914
- 3B1B0C
- 250F05
- 110502
- 020100
Tonen
- D0764C
- C77853
- BF7A5A
- B77B60
- AE7C66
- A57D6C
- 9C7E71
- 937F76
- 8A807B
Kleurharmonieën
Complementair +180°
- D87444
Jaffa
- 00A2CD
≈ Charybdis
Analoog -30° +30°
- D87444
Jaffa
- DB6B77
≈ Feverish
- C48500
≈ Bubonic Brown
Triadisch +120° +240°
Gesplitst complementair +150° +210°
Tetradisch +90° +180° +270°
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 3.23:1 · APCA Lc 59
Ag
AAOp zwart
WCAG 6.50:1 · APCA Lc 43
Beste tekstkleur: #000000
WCAG 6.50:1 (AA) · APCA Lc 43
Contrast pairs
Codefragmenten
CSS
:root {
--jaffa: #d87444;
--jaffa-rgb: 216 116 68;
--jaffa-oklch: oklch(0.664 0.14 45);
}
.element {
color: var(--jaffa);
background-color: hsl(19 65% 56%);
border-color: oklch(0.664 0.14 45);
}Tailwind CSS v4
@theme {
--color-jaffa: #d87444;
--color-jaffa-50: #ffead4;
--color-jaffa-100: #ffdac1;
--color-jaffa-200: #ffc2a1;
--color-jaffa-300: #f2a178;
--color-jaffa-400: #e18154;
--color-jaffa-500: #cf6229;
--color-jaffa-600: #af5425;
--color-jaffa-700: #8c431d;
--color-jaffa-800: #692f15;
--color-jaffa-900: #4a200e;
--color-jaffa-950: #300f02;
}SCSS
$jaffa: #d87444;
$jaffa-rgb: 216, 116, 68;
$jaffa-light: mix(#fff, $jaffa, 20%);
$jaffa-dark: mix(#000, $jaffa, 20%);
.element {
color: $jaffa;
box-shadow: 0 0 0 2px rgba($jaffa, 0.35);
}