Benannte Farbe · #8A2BE2
Bright Blue Violet
Bright Blue Violet ist #8A2BE2: rgb(138 43 226), hsl(271 76% 53%), oklch(0.534 0.25 301.4). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Purple mean? → · Bright Blue Violet color name →
#8A2BE2
oklch(0.534 0.25 301.4)
Farbumrechnungen
- HEX
- #8a2be2
- RGB
- rgb(138 43 226)
- HSL
- hsl(271 76% 53%)
- HWB
- hwb(271 17% 11%)
- OKLCH
- oklch(0.534 0.25 301.4)
- OKLab
- oklab(0.534 0.13 -0.214)
- CIE Lab
- lab(41.21 63.01 -75.96)
- LCH
- lch(41.21 98.69 309.7)
- CMYK
- cmyk(39% 81% 0% 11%)
Tints · Shades · Tones
Tints
- 944AE7
- 9F62EB
- AA78EF
- B68CF3
- C1A0F6
- CDB3F9
- D9C6FB
- E6D9FD
- F2ECFE
Shades
- 7724C4
- 651DA8
- 53168C
- 421071
- 320A57
- 22053E
- 140227
- 070112
- 010003
Tones
- 893CD9
- 8748D0
- 8652C7
- 855BBD
- 8463B4
- 836AAA
- 8270A0
- 817696
- 817B8B
Farbharmonien
Komplementär +180°
- 8A2BE2
Bright Blue Violet
- 627700
≈ Topiary Green
Analog -30° +30°
- 8A2BE2
Bright Blue Violet
- 424EFA
≈ Saturated Sky
- B400AA
≈ Rosolanc Purple
Triadisch +120° +240°
- 8A2BE2
Bright Blue Violet
- 9F5900
≈ Sepia Wash
- 007F70
≈ Blue Green
Geteilt komplementär +150° +210°
- 8A2BE2
Bright Blue Violet
- 846A00
≈ Muddy Brown
- 00833F
≈ Warpstone Glow
Tetradisch +90° +180° +270°
- 8A2BE2
Bright Blue Violet
- C81D00
≈ Vampire State Building
- 627700
≈ Topiary Green
- 007B8C
≈ Biscay Bay
Kontrast & Barrierefreiheit
Ag
AAAuf Weiß
WCAG 5.95:1 · APCA Lc 78
Ag
FailAuf Schwarz
WCAG 3.52:1 · APCA Lc 23
Beste Textfarbe: #FFFFFF
WCAG 5.95:1 (AA) · APCA Lc 78
Contrast pairs
Code-Snippets
CSS
:root {
--bright-blue-violet: #8a2be2;
--bright-blue-violet-rgb: 138 43 226;
--bright-blue-violet-oklch: oklch(0.534 0.25 301.4);
}
.element {
color: var(--bright-blue-violet);
background-color: hsl(271 76% 53%);
border-color: oklch(0.534 0.25 301.4);
}Tailwind CSS v4
@theme {
--color-bright-blue-violet: #8a2be2;
--color-bright-blue-violet-50: #ffe4ff;
--color-bright-blue-violet-100: #f9d3ff;
--color-bright-blue-violet-200: #ebb8ff;
--color-bright-blue-violet-300: #d392ff;
--color-bright-blue-violet-400: #bb6eff;
--color-bright-blue-violet-500: #a741ff;
--color-bright-blue-violet-600: #8d39e2;
--color-bright-blue-violet-700: #712eb6;
--color-bright-blue-violet-800: #51218a;
--color-bright-blue-violet-900: #391662;
--color-bright-blue-violet-950: #230543;
}SCSS
$bright-blue-violet: #8a2be2;
$bright-blue-violet-rgb: 138, 43, 226;
$bright-blue-violet-light: mix(#fff, $bright-blue-violet, 20%);
$bright-blue-violet-dark: mix(#000, $bright-blue-violet, 20%);
.element {
color: $bright-blue-violet;
box-shadow: 0 0 0 2px rgba($bright-blue-violet, 0.35);
}