Benannte Farbe · #663399
Rebecca Purple
Rebecca Purple ist #663399: rgb(102 51 153), hsl(270 50% 40%), oklch(0.44 0.16 303.4). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Purple mean? → · Rebecca Purple color name →
#663399
oklch(0.44 0.16 303.4)
Farbumrechnungen
- HEX
- #663399
- RGB
- rgb(102 51 153)
- HSL
- hsl(270 50% 40%)
- HWB
- hwb(270 20% 40%)
- OKLCH
- oklch(0.44 0.16 303.4)
- OKLab
- oklab(0.44 0.088 -0.134)
- CIE Lab
- lab(32.39 38.42 -47.69)
- LCH
- lch(32.39 61.24 308.9)
- CMYK
- cmyk(33% 67% 0% 40%)
Tints · Shades · Tones
Tints
- 7449A4
- 825DAF
- 9171BA
- A085C4
- AF99CE
- BEADD8
- CEC1E2
- DED5EC
- EEEAF6
Shades
- 582B84
- 4A2370
- 3C1C5D
- 2F144A
- 230D38
- 170727
- 0C0317
- 040108
- 000001
Tones
- 683D97
- 6B4695
- 6D4E93
- 705691
- 725D8F
- 75648C
- 786C8A
- 7A7287
- 7D7983
Farbharmonien
Komplementär +180°
- 663399
Rebecca Purple
- 475C00
≈ Lustrian Undergrowth
Analog -30° +30°
- 663399
Rebecca Purple
- 3A44A9
≈ Early Spring Night
- 832477
≈ Noble Plum
Triadisch +120° +240°
- 663399
Rebecca Purple
- 784400
≈ Dusky Brown
- 006057
≈ Empress Teal
Geteilt komplementär +150° +210°
- 663399
Rebecca Purple
- 635100
≈ Olive Brown
- 006433
≈ Treasured Wilderness
Tetradisch +90° +180° +270°
- 663399
Rebecca Purple
- 971E01
≈ Totem Pole
- 475C00
≈ Lustrian Undergrowth
- 005D6C
≈ Hero
Kontrast & Barrierefreiheit
Ag
AAAAuf Weiß
WCAG 8.40:1 · APCA Lc 88
Ag
FailAuf Schwarz
WCAG 2.49:1 · APCA Lc 14
Beste Textfarbe: #FFFFFF
WCAG 8.40:1 (AAA) · APCA Lc 88
Contrast pairs
Code-Snippets
CSS
:root {
--rebecca-purple: #663399;
--rebecca-purple-rgb: 102 51 153;
--rebecca-purple-oklch: oklch(0.44 0.16 303.4);
}
.element {
color: var(--rebecca-purple);
background-color: hsl(270 50% 40%);
border-color: oklch(0.44 0.16 303.4);
}Tailwind CSS v4
@theme {
--color-rebecca-purple: #663399;
--color-rebecca-purple-50: #ffeaff;
--color-rebecca-purple-100: #f4dbff;
--color-rebecca-purple-200: #e4c3ff;
--color-rebecca-purple-300: #cba2f9;
--color-rebecca-purple-400: #b284eb;
--color-rebecca-purple-500: #9d66db;
--color-rebecca-purple-600: #8557b9;
--color-rebecca-purple-700: #6a4595;
--color-rebecca-purple-800: #4d3270;
--color-rebecca-purple-900: #35224f;
--color-rebecca-purple-950: #211134;
}SCSS
$rebecca-purple: #663399;
$rebecca-purple-rgb: 102, 51, 153;
$rebecca-purple-light: mix(#fff, $rebecca-purple, 20%);
$rebecca-purple-dark: mix(#000, $rebecca-purple, 20%);
.element {
color: $rebecca-purple;
box-shadow: 0 0 0 2px rgba($rebecca-purple, 0.35);
}