Benannte Farbe · #CF4796
Twinkly Pinkily
Twinkly Pinkily ist #CF4796: rgb(207 71 150), hsl(325 59% 55%), oklch(0.609 0.189 348.3). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Pink mean? → · Twinkly Pinkily color name →
#CF4796
oklch(0.609 0.189 348.3)
Farbumrechnungen
- HEX
- #cf4796
- RGB
- rgb(207 71 150)
- HSL
- hsl(325 59% 55%)
- HWB
- hwb(325 28% 19%)
- OKLCH
- oklch(0.609 0.189 348.3)
- OKLab
- oklab(0.609 0.185 -0.038)
- CIE Lab
- lab(52.12 59.62 -13.69)
- LCH
- lch(52.12 61.17 347.1)
- CMYK
- cmyk(0% 66% 28% 19%)
Tints · Shades · Tones
Tints
- D65CA0
- DD70AA
- E382B5
- E895BF
- EDA7CA
- F2B8D4
- F6CADF
- FADCE9
- FDEDF4
Shades
- B43D82
- 99326E
- 7F285B
- 671F49
- 4F1637
- 380D26
- 230616
- 100208
- 020001
Tones
- C85094
- C15792
- BA5E90
- B3648D
- AB6A8B
- A36F89
- 9B7387
- 937885
- 8A7C82
Farbharmonien
Komplementär +180°
- CF4796
Twinkly Pinkily
- 009A75
≈ Jardinière
Analog -30° +30°
- CF4796
Twinkly Pinkily
- B056CA
≈ Love Priestess
- DD4456
≈ Celestial Coral
Triadisch +120° +240°
- CF4796
Twinkly Pinkily
- 8B8800
≈ Palak Paneer
- 0090BB
≈ Swimmer
Geteilt komplementär +150° +210°
- CF4796
Twinkly Pinkily
- 3D9B02
≈ Grass Is Greener
- 00959A
≈ Peacock Feather
Tetradisch +90° +180° +270°
- CF4796
Twinkly Pinkily
- AC7800
≈ Falafel
- 009A75
≈ Jardinière
- 2F7FF1
≈ Ceruleite
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 4.20:1 · APCA Lc 68
Ag
AAAuf Schwarz
WCAG 4.99:1 · APCA Lc 34
Beste Textfarbe: #000000
WCAG 4.99:1 (AA) · APCA Lc 34
Contrast pairs
Code-Snippets
CSS
:root {
--twinkly-pinkily: #cf4796;
--twinkly-pinkily-rgb: 207 71 150;
--twinkly-pinkily-oklch: oklch(0.609 0.189 348.3);
}
.element {
color: var(--twinkly-pinkily);
background-color: hsl(325 59% 55%);
border-color: oklch(0.609 0.189 348.3);
}Tailwind CSS v4
@theme {
--color-twinkly-pinkily: #cf4796;
--color-twinkly-pinkily-50: #ffe0fc;
--color-twinkly-pinkily-100: #ffcef0;
--color-twinkly-pinkily-200: #ffb2df;
--color-twinkly-pinkily-300: #fe8cc4;
--color-twinkly-pinkily-400: #eb69b1;
--color-twinkly-pinkily-500: #d9409b;
--color-twinkly-pinkily-600: #b73883;
--color-twinkly-pinkily-700: #932d69;
--color-twinkly-pinkily-800: #6d1f50;
--color-twinkly-pinkily-900: #4d1537;
--color-twinkly-pinkily-950: #320522;
}SCSS
$twinkly-pinkily: #cf4796;
$twinkly-pinkily-rgb: 207, 71, 150;
$twinkly-pinkily-light: mix(#fff, $twinkly-pinkily, 20%);
$twinkly-pinkily-dark: mix(#000, $twinkly-pinkily, 20%);
.element {
color: $twinkly-pinkily;
box-shadow: 0 0 0 2px rgba($twinkly-pinkily, 0.35);
}