لون مسمّى · #F5CEE6
Sparkling Pink
Sparkling Pink هو #F5CEE6: rgb(245 206 230)، hsl(323 66% 88%)، oklch(0.892 0.054 340.8). شاهد الدرجات الفاتحة والداكنة والتناسقات وتباين WCAG وAPCA وأكواد CSS وTailwind v4 وSCSS.
What does Pink mean? → · Sparkling Pink color name →
#F5CEE6
oklch(0.892 0.054 340.8)
تحويلات الألوان
- HEX
- #f5cee6
- RGB
- rgb(245 206 230)
- HSL
- hsl(323 66% 88%)
- HWB
- hwb(323 81% 4%)
- OKLCH
- oklch(0.892 0.054 340.8)
- OKLab
- oklab(0.892 0.051 -0.018)
- CIE Lab
- lab(86.68 17.04 -6.5)
- LCH
- lch(86.68 18.24 339.1)
- CMYK
- cmyk(0% 16% 6% 4%)
درجات فاتحة · درجات داكنة · درجات رمادية
درجات فاتحة
- F6D3E8
- F7D8EB
- F8DDED
- F9E2F0
- FAE6F2
- FBEBF5
- FCF0F7
- FDF5FA
- FEFAFC
درجات داكنة
- D5B3C8
- B698AB
- 987F8E
- 7B6673
- 5F4E59
- 443840
- 2B2328
- 150F13
- 030203
درجات رمادية
- E9C6DB
- DDBED1
- D1B6C6
- C5AEBC
- B9A6B2
- AD9FA8
- A2979D
- 968F94
- 8B888A
تناسق الألوان
متمم +180°
- F5CEE6
Sparkling Pink
- BDE7D0
≈ Woolly Mint
متجاور -30° +30°
- F5CEE6
Sparkling Pink
- E7D2F6
≈ Lavender Princess
- FCCDD3
≈ Pinktone
ثلاثي +120° +240°
- F5CEE6
Sparkling Pink
- E3DDB4
≈ Tropical Tale
- B5E4F4
≈ Breaking the Ice
متمم منقسم +150° +210°
- F5CEE6
Sparkling Pink
- CFE3BE
≈ Irish Folklore
- B3E7E3
≈ Cool Crayon
رباعي +90° +180° +270°
- F5CEE6
Sparkling Pink
- F3D6B5
≈ Pink Lady
- BDE7D0
≈ Woolly Mint
- C2DFFE
≈ Dithered Sky
التباين وإمكانية الوصول
Ag
Failعلى الأبيض
WCAG 1.41:1 · APCA Lc 20
Ag
AAAعلى الأسود
WCAG 14.85:1 · APCA Lc 83
أفضل لون للنص: #000000
WCAG 14.85:1 (AAA) · APCA Lc 83
Contrast pairs
مقتطفات الأكواد
CSS
:root {
--sparkling-pink: #f5cee6;
--sparkling-pink-rgb: 245 206 230;
--sparkling-pink-oklch: oklch(0.892 0.054 340.8);
}
.element {
color: var(--sparkling-pink);
background-color: hsl(323 66% 88%);
border-color: oklch(0.892 0.054 340.8);
}Tailwind CSS v4
@theme {
--color-sparkling-pink: #f5cee6;
--color-sparkling-pink-50: #ffeff9;
--color-sparkling-pink-100: #f6e1ed;
--color-sparkling-pink-200: #e6ccda;
--color-sparkling-pink-300: #ccadbf;
--color-sparkling-pink-400: #b592a8;
--color-sparkling-pink-500: #9f7891;
--color-sparkling-pink-600: #87667b;
--color-sparkling-pink-700: #6c5262;
--color-sparkling-pink-800: #4f3b49;
--color-sparkling-pink-900: #372932;
--color-sparkling-pink-950: #22161e;
}SCSS
$sparkling-pink: #f5cee6;
$sparkling-pink-rgb: 245, 206, 230;
$sparkling-pink-light: mix(#fff, $sparkling-pink, 20%);
$sparkling-pink-dark: mix(#000, $sparkling-pink, 20%);
.element {
color: $sparkling-pink;
box-shadow: 0 0 0 2px rgba($sparkling-pink, 0.35);
}