Benannte Farbe · #7F4F78
Phlox Flower Violet
Phlox Flower Violet ist #7F4F78: rgb(127 79 120), hsl(309 23% 40%), oklch(0.496 0.087 332.2). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Pink mean? → · Phlox Flower Violet color name →
#7F4F78
oklch(0.496 0.087 332.2)
Farbumrechnungen
- HEX
- #7f4f78
- RGB
- rgb(127 79 120)
- HSL
- hsl(309 23% 40%)
- HWB
- hwb(309 31% 50%)
- OKLCH
- oklch(0.496 0.087 332.2)
- OKLab
- oklab(0.496 0.077 -0.04)
- CIE Lab
- lab(40.35 25.72 -14.78)
- LCH
- lch(40.35 29.66 330.1)
- CMYK
- cmyk(0% 38% 6% 50%)
Tints · Shades · Tones
Tints
- 8C5F85
- 987092
- A5819F
- B292AC
- BFA4BA
- CBB6C7
- D8C8D5
- E5DAE3
- F2ECF1
Shades
- 6E4467
- 5D3857
- 4C2E48
- 3C2339
- 2D192A
- 1F101D
- 110710
- 060205
- 010001
Tones
- 805479
- 80597A
- 805E7B
- 81637C
- 81687C
- 816D7D
- 81727E
- 81767F
- 807B7F
Farbharmonien
Komplementär +180°
- 7F4F78
Phlox Flower Violet
- 387049
≈ Parsley Sprig
Analog -30° +30°
- 7F4F78
Phlox Flower Violet
- 6C568B
≈ Butterfly Bush
- 8A4C5E
≈ Hawthorn Rose
Triadisch +120° +240°
- 7F4F78
Phlox Flower Violet
- 74601F
≈ Brassy Brass
- 006F7F
≈ Coastal Jetty
Geteilt komplementär +150° +210°
- 7F4F78
Phlox Flower Violet
- 5A6A2E
≈ Fig Leaf
- 0A7266
≈ Pharaoh’s Gem
Tetradisch +90° +180° +270°
- 7F4F78
Phlox Flower Violet
- 855629
≈ Precious Copper
- 387049
≈ Parsley Sprig
- 30688F
≈ Drake’s Neck
Kontrast & Barrierefreiheit
Ag
AAAuf Weiß
WCAG 6.37:1 · APCA Lc 82
Ag
FailAuf Schwarz
WCAG 3.29:1 · APCA Lc 20
Beste Textfarbe: #FFFFFF
WCAG 6.37:1 (AA) · APCA Lc 82
Contrast pairs
Code-Snippets
CSS
:root {
--phlox-flower-violet: #7f4f78;
--phlox-flower-violet-rgb: 127 79 120;
--phlox-flower-violet-oklch: oklch(0.496 0.087 332.2);
}
.element {
color: var(--phlox-flower-violet);
background-color: hsl(309 23% 40%);
border-color: oklch(0.496 0.087 332.2);
}Tailwind CSS v4
@theme {
--color-phlox-flower-violet: #7f4f78;
--color-phlox-flower-violet-50: #ffecff;
--color-phlox-flower-violet-100: #fbdef4;
--color-phlox-flower-violet-200: #ecc7e4;
--color-phlox-flower-violet-300: #d4a7ca;
--color-phlox-flower-violet-400: #bd8cb5;
--color-phlox-flower-violet-500: #a870a0;
--color-phlox-flower-violet-600: #8e5f87;
--color-phlox-flower-violet-700: #724c6c;
--color-phlox-flower-violet-800: #533751;
--color-phlox-flower-violet-900: #3a2638;
--color-phlox-flower-violet-950: #241423;
}SCSS
$phlox-flower-violet: #7f4f78;
$phlox-flower-violet-rgb: 127, 79, 120;
$phlox-flower-violet-light: mix(#fff, $phlox-flower-violet, 20%);
$phlox-flower-violet-dark: mix(#000, $phlox-flower-violet, 20%);
.element {
color: $phlox-flower-violet;
box-shadow: 0 0 0 2px rgba($phlox-flower-violet, 0.35);
}