أقرب لون مسمّى · #EDDDDD
#EDDDDD
أقرب لون مسمّى: Hyper Light Drifter
#EDDDDD (rgb(237 221 221)، hsl(0 31% 90%)، oklch(0.91 0.018 17.5)) أقرب إلى اللون المسمّى Hyper Light Drifter. شاهد الدرجات الفاتحة والداكنة والتناسقات وتباين WCAG وAPCA وأكواد CSS وTailwind v4 وSCSS.
#EDDDDD
oklch(0.91 0.018 17.5)
تحويلات الألوان
- HEX
- #eddddd
- RGB
- rgb(237 221 221)
- HSL
- hsl(0 31% 90%)
- HWB
- hwb(0 87% 7%)
- OKLCH
- oklch(0.91 0.018 17.5)
- OKLab
- oklab(0.91 0.017 0.005)
- CIE Lab
- lab(89.42 5.67 2.08)
- LCH
- lch(89.42 6.04 20.1)
- CMYK
- cmyk(0% 7% 7% 7%)
درجات فاتحة · درجات داكنة · درجات رمادية
درجات فاتحة
- EFE0E0
- F1E4E4
- F2E7E7
- F4EBEA
- F6EEEE
- F8F1F1
- FAF5F5
- FBF8F8
- FDFCFC
درجات داكنة
- CEC0C0
- B0A4A4
- 938888
- 776E6E
- 5C5555
- 423D3D
- 2A2626
- 141111
- 030202
درجات رمادية
- E2D3D3
- D6CACA
- CBC0C0
- C0B7B7
- B5ADAD
- AAA4A4
- 9F9B9B
- 959292
- 8A8989
تناسق الألوان
متمم +180°
- EDDDDD
Hyper Light Drifter
- D5E5E5
≈ Lauren’s Surprise
متجاور -30° +30°
- EDDDDD
Hyper Light Drifter
- EBDDE3
≈ Weak Mauve
- ECDED8
≈ Berry Frost
ثلاثي +120° +240°
- EDDDDD
Hyper Light Drifter
- DCE4D9
≈ Mineral White
- DAE2ED
≈ Blooming Aster
متمم منقسم +150° +210°
- EDDDDD
Hyper Light Drifter
- D7E5DF
≈ Fizzle
- D6E4EB
≈ Ethereal Moonlight
رباعي +90° +180° +270°
- EDDDDD
Hyper Light Drifter
- E2E2D5
≈ Divine Cream
- D5E5E5
≈ Lauren’s Surprise
- E0E0ED
≈ Imagination
التباين وإمكانية الوصول
Ag
Failعلى الأبيض
WCAG 1.31:1 · APCA Lc 16
Ag
AAAعلى الأسود
WCAG 15.98:1 · APCA Lc 88
أفضل لون للنص: #000000
WCAG 15.98:1 (AAA) · APCA Lc 88
Contrast pairs
مقتطفات الأكواد
CSS
:root {
--hyper-light-drifter: #eddddd;
--hyper-light-drifter-rgb: 237 221 221;
--hyper-light-drifter-oklch: oklch(0.91 0.018 17.5);
}
.element {
color: var(--hyper-light-drifter);
background-color: hsl(0 31% 90%);
border-color: oklch(0.91 0.018 17.5);
}Tailwind CSS v4
@theme {
--color-hyper-light-drifter: #eddddd;
--color-hyper-light-drifter-50: #faf3f3;
--color-hyper-light-drifter-100: #eee6e5;
--color-hyper-light-drifter-200: #dcd1d1;
--color-hyper-light-drifter-300: #c0b4b4;
--color-hyper-light-drifter-400: #a99a9a;
--color-hyper-light-drifter-500: #928282;
--color-hyper-light-drifter-600: #7b6e6e;
--color-hyper-light-drifter-700: #635858;
--color-hyper-light-drifter-800: #484040;
--color-hyper-light-drifter-900: #322c2c;
--color-hyper-light-drifter-950: #1e1919;
}SCSS
$hyper-light-drifter: #eddddd;
$hyper-light-drifter-rgb: 237, 221, 221;
$hyper-light-drifter-light: mix(#fff, $hyper-light-drifter, 20%);
$hyper-light-drifter-dark: mix(#000, $hyper-light-drifter, 20%);
.element {
color: $hyper-light-drifter;
box-shadow: 0 0 0 2px rgba($hyper-light-drifter, 0.35);
}