Adlandırılmış renk · #7F4F78
Phlox Flower Violet
Phlox Flower Violet, #7F4F78: rgb(127 79 120), hsl(309 23% 40%), oklch(0.496 0.087 332.2). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Pink mean? → · Phlox Flower Violet color name →
#7F4F78
oklch(0.496 0.087 332.2)
Renk dönüşümleri
- 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%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 8C5F85
- 987092
- A5819F
- B292AC
- BFA4BA
- CBB6C7
- D8C8D5
- E5DAE3
- F2ECF1
Koyu tonlar
- 6E4467
- 5D3857
- 4C2E48
- 3C2339
- 2D192A
- 1F101D
- 110710
- 060205
- 010001
Gri tonlar
- 805479
- 80597A
- 805E7B
- 81637C
- 81687C
- 816D7D
- 81727E
- 81767F
- 807B7F
Renk uyumları
Tamamlayıcı +180°
- 7F4F78
Phlox Flower Violet
- 387049
≈ Parsley Sprig
Analog -30° +30°
- 7F4F78
Phlox Flower Violet
- 6C568B
≈ Butterfly Bush
- 8A4C5E
≈ Hawthorn Rose
Üçlü +120° +240°
- 7F4F78
Phlox Flower Violet
- 74601F
≈ Brassy Brass
- 006F7F
≈ Coastal Jetty
Bölünmüş tamamlayıcı +150° +210°
- 7F4F78
Phlox Flower Violet
- 5A6A2E
≈ Fig Leaf
- 0A7266
≈ Pharaoh’s Gem
Dörtlü +90° +180° +270°
- 7F4F78
Phlox Flower Violet
- 855629
≈ Precious Copper
- 387049
≈ Parsley Sprig
- 30688F
≈ Drake’s Neck
Kontrast ve erişilebilirlik
Ag
AABeyaz üzerinde
WCAG 6.37:1 · APCA Lc 82
Ag
FailSiyah üzerinde
WCAG 3.29:1 · APCA Lc 20
En iyi metin rengi: #FFFFFF
WCAG 6.37:1 (AA) · APCA Lc 82
Contrast pairs
Kod parçacıkları
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);
}