Benannte Farbe · #605972
Head Over Heels
Head Over Heels ist #605972: rgb(96 89 114), hsl(257 12% 40%), oklch(0.48 0.041 297.7). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Purple mean? → · Head Over Heels color name →
#605972
oklch(0.48 0.041 297.7)
Farbumrechnungen
- HEX
- #605972
- RGB
- rgb(96 89 114)
- HSL
- hsl(257 12% 40%)
- HWB
- hwb(257 35% 55%)
- OKLCH
- oklch(0.48 0.041 297.7)
- OKLab
- oklab(0.48 0.019 -0.036)
- CIE Lab
- lab(39.21 7.09 -13.23)
- LCH
- lch(39.21 15.01 298.2)
- CMYK
- cmyk(16% 22% 0% 55%)
Tints · Shades · Tones
Tints
- 6F687F
- 7D788D
- 8D889A
- 9C98A8
- ACA8B6
- BCB9C5
- CCCAD3
- DDDCE1
- EEEDF0
Shades
- 524C62
- 454053
- 383444
- 2C2836
- 201D28
- 15131B
- 0A090E
- 030304
- 000001
Tones
- 635D73
- 666175
- 696576
- 6D6878
- 706C79
- 73707B
- 76747C
- 79787D
- 7D7C7F
Farbharmonien
Komplementär +180°
- 605972
Head Over Heels
- 5B6147
≈ Old Botanical Garden
Analog -30° +30°
- 605972
Head Over Heels
- 545D75
≈ Vintage Indigo
- 6A5669
≈ Antique Grey
Triadisch +120° +240°
- 605972
Head Over Heels
- 705847
≈ Rustic Tobacco
- 44655D
≈ Pine Haven
Geteilt komplementär +150° +210°
- 605972
Head Over Heels
- 675D43
≈ Gator Tail
- 4E6451
≈ Pasture Green
Tetradisch +90° +180° +270°
- 605972
Head Over Heels
- 735551
≈ Rosy Sandstone
- 5B6147
≈ Old Botanical Garden
- 426469
≈ Wanderlust
Kontrast & Barrierefreiheit
Ag
AAAuf Weiß
WCAG 6.62:1 · APCA Lc 83
Ag
FailAuf Schwarz
WCAG 3.16:1 · APCA Lc 19
Beste Textfarbe: #FFFFFF
WCAG 6.62:1 (AA) · APCA Lc 83
Contrast pairs
Code-Snippets
CSS
:root {
--head-over-heels: #605972;
--head-over-heels-rgb: 96 89 114;
--head-over-heels-oklch: oklch(0.48 0.041 297.7);
}
.element {
color: var(--head-over-heels);
background-color: hsl(257 12% 40%);
border-color: oklch(0.48 0.041 297.7);
}Tailwind CSS v4
@theme {
--color-head-over-heels: #605972;
--color-head-over-heels-50: #f7f3ff;
--color-head-over-heels-100: #eae5f4;
--color-head-over-heels-200: #d6d1e4;
--color-head-over-heels-300: #bab3ca;
--color-head-over-heels-400: #a19ab4;
--color-head-over-heels-500: #89819e;
--color-head-over-heels-600: #746d86;
--color-head-over-heels-700: #5d576b;
--color-head-over-heels-800: #43404f;
--color-head-over-heels-900: #2e2c37;
--color-head-over-heels-950: #1b1922;
}SCSS
$head-over-heels: #605972;
$head-over-heels-rgb: 96, 89, 114;
$head-over-heels-light: mix(#fff, $head-over-heels, 20%);
$head-over-heels-dark: mix(#000, $head-over-heels, 20%);
.element {
color: $head-over-heels;
box-shadow: 0 0 0 2px rgba($head-over-heels, 0.35);
}