أقرب لون مسمّى · #F4E1EA
#F4E1EA
أقرب لون مسمّى: First Crush
#F4E1EA (rgb(244 225 234)، hsl(332 46% 92%)، oklch(0.928 0.024 347.2)) أقرب إلى اللون المسمّى First Crush. شاهد الدرجات الفاتحة والداكنة والتناسقات وتباين WCAG وAPCA وأكواد CSS وTailwind v4 وSCSS.
#F4E1EA
oklch(0.928 0.024 347.2)
تحويلات الألوان
- HEX
- #f4e1ea
- RGB
- rgb(244 225 234)
- HSL
- hsl(332 46% 92%)
- HWB
- hwb(332 88% 4%)
- OKLCH
- oklch(0.928 0.024 347.2)
- OKLab
- oklab(0.928 0.023 -0.005)
- CIE Lab
- lab(91.28 7.85 -1.93)
- LCH
- lch(91.28 8.09 346.2)
- CMYK
- cmyk(0% 8% 4% 4%)
درجات فاتحة · درجات داكنة · درجات رمادية
درجات فاتحة
- F5E4EC
- F6E7EE
- F7EAF0
- F9EDF2
- FAF0F4
- FBF3F7
- FCF6F9
- FDF9FB
- FEFCFD
درجات داكنة
- D4C4CB
- B5A7AE
- 978B91
- 7A7075
- 5E565A
- 443E41
- 2B2729
- 141213
- 030203
درجات رمادية
- E8D7DF
- DCCDD4
- D0C3C9
- C4B9BE
- B8AFB4
- ADA6A9
- A19C9F
- 969394
- 8B898A
تناسق الألوان
متمم +180°
- F4E1EA
First Crush
- D9ECE4
≈ Dunnock Egg
متجاور -30° +30°
- F4E1EA
First Crush
- EEE2F2
≈ Sheer Lavender
- F7E1E1
≈ Lighthearted
ثلاثي +120° +240°
- F4E1EA
First Crush
- E8E9D7
≈ Reduced Green
- D7EBF4
≈ Spacious Skies
متمم منقسم +150° +210°
- F4E1EA
First Crush
- E0EBDC
≈ Lighter Mint
- D6ECEC
≈ Water Squirt
رباعي +90° +180° +270°
- F4E1EA
First Crush
- F0E5D6
≈ Pale Chamois
- D9ECE4
≈ Dunnock Egg
- DDE8F7
≈ St. Petersburg
التباين وإمكانية الوصول
Ag
Failعلى الأبيض
WCAG 1.24:1 · APCA Lc 12
Ag
AAAعلى الأسود
WCAG 16.80:1 · APCA Lc 92
أفضل لون للنص: #000000
WCAG 16.80:1 (AAA) · APCA Lc 92
Contrast pairs
مقتطفات الأكواد
CSS
:root {
--first-crush: #f4e1ea;
--first-crush-rgb: 244 225 234;
--first-crush-oklch: oklch(0.928 0.024 347.2);
}
.element {
color: var(--first-crush);
background-color: hsl(332 46% 92%);
border-color: oklch(0.928 0.024 347.2);
}Tailwind CSS v4
@theme {
--color-first-crush: #f4e1ea;
--color-first-crush-50: #fbf2f6;
--color-first-crush-100: #eee5e9;
--color-first-crush-200: #ddd0d6;
--color-first-crush-300: #c1b3b9;
--color-first-crush-400: #aa99a1;
--color-first-crush-500: #938089;
--color-first-crush-600: #7c6c74;
--color-first-crush-700: #63575d;
--color-first-crush-800: #493f44;
--color-first-crush-900: #322b2f;
--color-first-crush-950: #1e191c;
}SCSS
$first-crush: #f4e1ea;
$first-crush-rgb: 244, 225, 234;
$first-crush-light: mix(#fff, $first-crush, 20%);
$first-crush-dark: mix(#000, $first-crush, 20%);
.element {
color: $first-crush;
box-shadow: 0 0 0 2px rgba($first-crush, 0.35);
}