Nazwany kolor · #D9E6EE
First Light
First Light to #D9E6EE: rgb(217 230 238), hsl(203 38% 89%), oklch(0.918 0.018 234.5). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · First Light color name →
#D9E6EE
oklch(0.918 0.018 234.5)
Konwersje koloru
- HEX
- #d9e6ee
- RGB
- rgb(217 230 238)
- HSL
- hsl(203 38% 89%)
- HWB
- hwb(203 85% 7%)
- OKLCH
- oklch(0.918 0.018 234.5)
- OKLab
- oklab(0.918 -0.01 -0.014)
- CIE Lab
- lab(90.48 -3.35 -5.48)
- LCH
- lch(90.48 6.42 238.6)
- CMYK
- cmyk(9% 3% 0% 7%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- DDE8F0
- E1EBF1
- E4EDF3
- E8F0F5
- ECF2F7
- F0F5F8
- F4F7FA
- F7FAFC
- FBFCFD
Odcienie ciemniejsze
- BCC8CF
- A1ABB1
- 868E93
- 6C7377
- 53595C
- 3B4042
- 25282A
- 111314
- 020303
Tony
- D0DBE2
- C7D1D7
- BDC6CC
- B4BCC1
- ABB2B5
- A3A7AB
- 9A9DA0
- 919495
- 898A8A
Harmonie kolorów
Komplementarna +180°
- D9E6EE
First Light
- EEE1D9
≈ Landing
Analogowa -30° +30°
- D9E6EE
First Light
- D7E7E9
≈ Smoke and Mirrors
- DEE4F0
≈ Iris Ice
Triada +120° +240°
- D9E6EE
First Light
- EEDFE4
≈ Barely Rose
- E3E5D8
≈ Olive Conquering White
Komplementarna rozszczepiona +150° +210°
- D9E6EE
First Light
- EFE0DE
≈ Rose Cream
- E9E3D7
≈ Moon Shell
Tetrada +90° +180° +270°
- D9E6EE
First Light
- EAE0EA
≈ Tiara Jewel
- EEE1D9
≈ Landing
- DDE7DD
≈ Spearmint Scent
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.27:1 · APCA Lc 14
Ag
AAANa czerni
WCAG 16.50:1 · APCA Lc 90
Najlepszy kolor tekstu: #000000
WCAG 16.50:1 (AAA) · APCA Lc 90
Contrast pairs
Fragmenty kodu
CSS
:root {
--first-light: #d9e6ee;
--first-light-rgb: 217 230 238;
--first-light-oklch: oklch(0.918 0.018 234.5);
}
.element {
color: var(--first-light);
background-color: hsl(203 38% 89%);
border-color: oklch(0.918 0.018 234.5);
}Tailwind CSS v4
@theme {
--color-first-light: #d9e6ee;
--color-first-light-50: #f1f6fa;
--color-first-light-100: #e3e9ed;
--color-first-light-200: #cdd6db;
--color-first-light-300: #afb9bf;
--color-first-light-400: #95a0a7;
--color-first-light-500: #7b8890;
--color-first-light-600: #68737a;
--color-first-light-700: #535c62;
--color-first-light-800: #3d4448;
--color-first-light-900: #2a2f32;
--color-first-light-950: #171b1e;
}SCSS
$first-light: #d9e6ee;
$first-light-rgb: 217, 230, 238;
$first-light-light: mix(#fff, $first-light, 20%);
$first-light-dark: mix(#000, $first-light, 20%);
.element {
color: $first-light;
box-shadow: 0 0 0 2px rgba($first-light, 0.35);
}