Benannte Farbe · #A085A6
Wonder Violet
Wonder Violet ist #A085A6: rgb(160 133 166), hsl(289 16% 59%), oklch(0.653 0.057 320.1). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Purple mean? → · Wonder Violet color name →
#A085A6
oklch(0.653 0.057 320.1)
Farbumrechnungen
- HEX
- #a085a6
- RGB
- rgb(160 133 166)
- HSL
- hsl(289 16% 59%)
- HWB
- hwb(289 52% 35%)
- OKLCH
- oklch(0.653 0.057 320.1)
- OKLab
- oklab(0.653 0.044 -0.037)
- CIE Lab
- lab(58.93 15.16 -13.56)
- LCH
- lch(58.93 20.34 318.2)
- CMYK
- cmyk(4% 20% 0% 35%)
Tints · Shades · Tones
Tints
- A991AF
- B39CB7
- BCA8C0
- C5B4C9
- CFC0D2
- D8CDDB
- E2D9E4
- ECE6ED
- F5F2F6
Shades
- 8B7390
- 76617A
- 615065
- 4E4051
- 3B303E
- 29212B
- 19131A
- 09060A
- 010101
Tones
- 9D85A2
- 9A849E
- 96849B
- 938397
- 908393
- 8D828F
- 8A828B
- 868188
- 838184
Farbharmonien
Komplementär +180°
- A085A6
Wonder Violet
- 7E9978
≈ Scottish Highlands
Analog -30° +30°
- A085A6
Wonder Violet
- 8F8AB1
≈ Larkspur Violet
- AC8295
≈ Heather Violet
Triadisch +120° +240°
- A085A6
Wonder Violet
- A38D68
≈ Pond Green
- 659B9E
≈ Jugendstil Turquoise
Geteilt komplementär +150° +210°
- A085A6
Wonder Violet
- 92936B
≈ Extra Mile
- 6C9C8B
≈ Cyprus Green
Tetradisch +90° +180° +270°
- A085A6
Wonder Violet
- AD8671
≈ Homestead
- 7E9978
≈ Scottish Highlands
- 6B97AD
≈ Shirt Blue
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 3.28:1 · APCA Lc 60
Ag
AAAuf Schwarz
WCAG 6.40:1 · APCA Lc 42
Beste Textfarbe: #000000
WCAG 6.40:1 (AA) · APCA Lc 42
Contrast pairs
Code-Snippets
CSS
:root {
--wonder-violet: #a085a6;
--wonder-violet-rgb: 160 133 166;
--wonder-violet-oklch: oklch(0.653 0.057 320.1);
}
.element {
color: var(--wonder-violet);
background-color: hsl(289 16% 59%);
border-color: oklch(0.653 0.057 320.1);
}Tailwind CSS v4
@theme {
--color-wonder-violet: #a085a6;
--color-wonder-violet-50: #fdf0ff;
--color-wonder-violet-100: #f1e2f3;
--color-wonder-violet-200: #e0cde3;
--color-wonder-violet-300: #c6aec9;
--color-wonder-violet-400: #ae94b4;
--color-wonder-violet-500: #977a9e;
--color-wonder-violet-600: #806786;
--color-wonder-violet-700: #67536b;
--color-wonder-violet-800: #4b3c4f;
--color-wonder-violet-900: #342937;
--color-wonder-violet-950: #1f1722;
}SCSS
$wonder-violet: #a085a6;
$wonder-violet-rgb: 160, 133, 166;
$wonder-violet-light: mix(#fff, $wonder-violet, 20%);
$wonder-violet-dark: mix(#000, $wonder-violet, 20%);
.element {
color: $wonder-violet;
box-shadow: 0 0 0 2px rgba($wonder-violet, 0.35);
}