Adlandırılmış renk · #F6CEFC
Sassy Pink
Sassy Pink, #F6CEFC: rgb(246 206 252), hsl(292 88% 90%), oklch(0.9 0.075 321.9). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Purple mean? → · Sassy Pink color name →
#F6CEFC
oklch(0.9 0.075 321.9)
Renk dönüşümleri
- HEX
- #f6cefc
- RGB
- rgb(246 206 252)
- HSL
- hsl(292 88% 90%)
- HWB
- hwb(292 81% 1%)
- OKLCH
- oklch(0.9 0.075 321.9)
- OKLab
- oklab(0.9 0.059 -0.046)
- CIE Lab
- lab(87.32 20.32 -17.14)
- LCH
- lch(87.32 26.58 319.9)
- CMYK
- cmyk(2% 18% 0% 1%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- F7D3FC
- F8D8FD
- F9DDFD
- FAE2FE
- FBE7FE
- FCECFE
- FDF0FE
- FDF5FF
- FEFAFF
Koyu tonlar
- D6B3DB
- B798BB
- 987F9C
- 7B667E
- 5F4E62
- 453847
- 2C232D
- 150F16
- 030203
Gri tonlar
- EAC6EF
- DDBEE2
- D1B6D5
- C5AEC9
- BAA6BC
- AE9FB0
- A297A4
- 978F98
- 8B888C
Renk uyumları
Tamamlayıcı +180°
- F6CEFC
Sassy Pink
- C2EBBD
≈ Lime Dream
Analog -30° +30°
- F6CEFC
Sassy Pink
- DED8FF
≈ Transparent Blue
- FFCEE2
≈ Linnet Egg Red
Üçlü +120° +240°
- F6CEFC
Sassy Pink
- F7DAA5
≈ Pecan Cream
- A1EDF3
≈ Permafrost
Bölünmüş tamamlayıcı +150° +210°
- F6CEFC
Sassy Pink
- DFE4AA
≈ Bit of Lime
- ABEFD8
≈ Faint Clover
Dörtlü +90° +180° +270°
- F6CEFC
Sassy Pink
- FFD4BA
≈ Mom’s Love
- C2EBBD
≈ Lime Dream
- B7E6FF
≈ Frozen Landscape
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.38:1 · APCA Lc 19
Ag
AAASiyah üzerinde
WCAG 15.15:1 · APCA Lc 85
En iyi metin rengi: #000000
WCAG 15.15:1 (AAA) · APCA Lc 85
Contrast pairs
Kod parçacıkları
CSS
:root {
--sassy-pink: #f6cefc;
--sassy-pink-rgb: 246 206 252;
--sassy-pink-oklch: oklch(0.9 0.075 321.9);
}
.element {
color: var(--sassy-pink);
background-color: hsl(292 88% 90%);
border-color: oklch(0.9 0.075 321.9);
}Tailwind CSS v4
@theme {
--color-sassy-pink: #f6cefc;
--color-sassy-pink-50: #ffeeff;
--color-sassy-pink-100: #f5e0f6;
--color-sassy-pink-200: #e5cae7;
--color-sassy-pink-300: #cbabce;
--color-sassy-pink-400: #b490b9;
--color-sassy-pink-500: #9e75a4;
--color-sassy-pink-600: #85648b;
--color-sassy-pink-700: #6b506f;
--color-sassy-pink-800: #4e3a53;
--color-sassy-pink-900: #36283a;
--color-sassy-pink-950: #211624;
}SCSS
$sassy-pink: #f6cefc;
$sassy-pink-rgb: 246, 206, 252;
$sassy-pink-light: mix(#fff, $sassy-pink, 20%);
$sassy-pink-dark: mix(#000, $sassy-pink, 20%);
.element {
color: $sassy-pink;
box-shadow: 0 0 0 2px rgba($sassy-pink, 0.35);
}