Benoemde kleur · #8A496B
Twilight Lavender
Twilight Lavender is #8A496B: rgb(138 73 107), hsl(329 31% 41%), oklch(0.495 0.098 348.6). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Pink mean? → · Twilight Lavender color name →
#8A496B
oklch(0.495 0.098 348.6)
Kleurconversies
- HEX
- #8a496b
- RGB
- rgb(138 73 107)
- HSL
- hsl(329 31% 41%)
- HWB
- hwb(329 29% 46%)
- OKLCH
- oklch(0.495 0.098 348.6)
- OKLab
- oklab(0.495 0.096 -0.019)
- CIE Lab
- lab(40.12 31.44 -6.94)
- LCH
- lch(40.12 32.2 347.6)
- CMYK
- cmyk(0% 47% 22% 46%)
Tinten · Schaduwen · Tonen
Tinten
- 965A79
- A26C87
- AE7D95
- BA8FA4
- C6A1B2
- D1B3C1
- DDC6D0
- E8D9E0
- F4ECEF
Schaduwen
- 773E5C
- 65344E
- 532A3F
- 422032
- 321725
- 220E18
- 14060D
- 070204
- 010000
Tonen
- 8A4F6D
- 89556F
- 895A71
- 886073
- 876576
- 866B78
- 85707A
- 83767C
- 827B7E
Kleurharmonieën
Complementair +180°
- 8A496B
Twilight Lavender
- 077358
≈ Tropical Rainforest
Analoog -30° +30°
- 8A496B
Twilight Lavender
- 794F85
≈ Cleopatra’s Gown
- 91494C
≈ Cowhide
Triadisch +120° +240°
- 8A496B
Twilight Lavender
- 676616
≈ Earthy Khaki Green
- 006C8D
≈ Copacabana
Gesplitst complementair +150° +210°
- 8A496B
Twilight Lavender
- 446F36
≈ Druid Green
- 007074
≈ Active Turquoise
Tetradisch +90° +180° +270°
- 8A496B
Twilight Lavender
- 805A0E
≈ Soil of Avagddu
- 077358
≈ Tropical Rainforest
- 3E6299
≈ Bright Cobalt
Contrast en toegankelijkheid
Ag
AAOp wit
WCAG 6.46:1 · APCA Lc 82
Ag
FailOp zwart
WCAG 3.24:1 · APCA Lc 20
Beste tekstkleur: #FFFFFF
WCAG 6.46:1 (AA) · APCA Lc 82
Contrast pairs
Codefragmenten
CSS
:root {
--twilight-lavender: #8a496b;
--twilight-lavender-rgb: 138 73 107;
--twilight-lavender-oklch: oklch(0.495 0.098 348.6);
}
.element {
color: var(--twilight-lavender);
background-color: hsl(329 31% 41%);
border-color: oklch(0.495 0.098 348.6);
}Tailwind CSS v4
@theme {
--color-twilight-lavender: #8a496b;
--color-twilight-lavender-50: #ffeaf9;
--color-twilight-lavender-100: #ffdbec;
--color-twilight-lavender-200: #f6c4da;
--color-twilight-lavender-300: #dfa3be;
--color-twilight-lavender-400: #ca86a8;
--color-twilight-lavender-500: #b66a91;
--color-twilight-lavender-600: #995a7a;
--color-twilight-lavender-700: #7b4862;
--color-twilight-lavender-800: #5b3449;
--color-twilight-lavender-900: #402333;
--color-twilight-lavender-950: #28121e;
}SCSS
$twilight-lavender: #8a496b;
$twilight-lavender-rgb: 138, 73, 107;
$twilight-lavender-light: mix(#fff, $twilight-lavender, 20%);
$twilight-lavender-dark: mix(#000, $twilight-lavender, 20%);
.element {
color: $twilight-lavender;
box-shadow: 0 0 0 2px rgba($twilight-lavender, 0.35);
}