Adlandırılmış renk · #F6C6B9
Serene Pink
Serene Pink, #F6C6B9: rgb(246 198 185), hsl(13 77% 85%), oklch(0.865 0.058 35.6). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Pink mean? → · Serene Pink color name →
#F6C6B9
oklch(0.865 0.058 35.6)
Renk dönüşümleri
- HEX
- #f6c6b9
- RGB
- rgb(246 198 185)
- HSL
- hsl(13 77% 85%)
- HWB
- hwb(13 73% 4%)
- OKLCH
- oklch(0.865 0.058 35.6)
- OKLab
- oklab(0.865 0.047 0.034)
- CIE Lab
- lab(83.93 16.22 13.35)
- LCH
- lch(83.93 21.01 39.5)
- CMYK
- cmyk(0% 20% 25% 4%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- F7CCC0
- F8D1C7
- F9D7CE
- FADDD5
- FBE2DC
- FCE8E3
- FDEEEA
- FEF4F1
- FEF9F8
Koyu tonlar
- D6ACA0
- B79289
- 987A71
- 7B625B
- 5F4B46
- 453531
- 2C211E
- 150E0D
- 030202
Gri tonlar
- EABFB3
- DEB8AD
- D2B1A8
- C6AAA2
- BAA39C
- AE9C97
- A29591
- 978E8B
- 8B8786
Renk uyumları
Tamamlayıcı +180°
- F6C6B9
Serene Pink
- A8DDEB
≈ Early July
Analog -30° +30°
- F6C6B9
Serene Pink
- F5C4CD
≈ In the Pink
- EECCAB
≈ Masala Chai
Üçlü +120° +240°
- F6C6B9
Serene Pink
- B5DFC3
≈ Quantum Effect
- C7D0F9
≈ Frozen Periwinkle
Bölünmüş tamamlayıcı +150° +210°
- F6C6B9
Serene Pink
- A8E0D8
≈ High Altitude
- B4D7F7
≈ Blue Rice
Dörtlü +90° +180° +270°
- F6C6B9
Serene Pink
- C9DAB1
≈ White Vienna
- A8DDEB
≈ Early July
- DCCAF2
≈ Foggy Love
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.53:1 · APCA Lc 25
Ag
AAASiyah üzerinde
WCAG 13.69:1 · APCA Lc 78
En iyi metin rengi: #000000
WCAG 13.69:1 (AAA) · APCA Lc 78
Contrast pairs
Kod parçacıkları
CSS
:root {
--serene-pink: #f6c6b9;
--serene-pink-rgb: 246 198 185;
--serene-pink-oklch: oklch(0.865 0.058 35.6);
}
.element {
color: var(--serene-pink);
background-color: hsl(13 77% 85%);
border-color: oklch(0.865 0.058 35.6);
}Tailwind CSS v4
@theme {
--color-serene-pink: #f6c6b9;
--color-serene-pink-50: #fff0e9;
--color-serene-pink-100: #fae2da;
--color-serene-pink-200: #ecccc3;
--color-serene-pink-300: #d3aea2;
--color-serene-pink-400: #be9387;
--color-serene-pink-500: #a9796c;
--color-serene-pink-600: #8f665b;
--color-serene-pink-700: #725249;
--color-serene-pink-800: #553b35;
--color-serene-pink-900: #3b2924;
--color-serene-pink-950: #251613;
}SCSS
$serene-pink: #f6c6b9;
$serene-pink-rgb: 246, 198, 185;
$serene-pink-light: mix(#fff, $serene-pink, 20%);
$serene-pink-dark: mix(#000, $serene-pink, 20%);
.element {
color: $serene-pink;
box-shadow: 0 0 0 2px rgba($serene-pink, 0.35);
}