Nazwany kolor · #D2E4EE
Mystic Harbour
Mystic Harbour to #D2E4EE: rgb(210 228 238), hsl(201 45% 88%), oklch(0.908 0.024 231.9). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Mystic Harbour color name →
#D2E4EE
oklch(0.908 0.024 231.9)
Konwersje koloru
- HEX
- #d2e4ee
- RGB
- rgb(210 228 238)
- HSL
- hsl(201 45% 88%)
- HWB
- hwb(201 82% 7%)
- OKLCH
- oklch(0.908 0.024 231.9)
- OKLab
- oklab(0.908 -0.015 -0.019)
- CIE Lab
- lab(89.46 -4.73 -7.04)
- LCH
- lch(89.46 8.48 236.1)
- CMYK
- cmyk(12% 4% 0% 7%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- D6E7F0
- DBE9F1
- DFECF3
- E4EFF5
- E8F1F7
- EDF4F8
- F1F7FA
- F6FAFC
- FAFCFD
Odcienie ciemniejsze
- B6C6CF
- 9BA9B1
- 818D93
- 687277
- 50585C
- 393F42
- 24282A
- 101214
- 020303
Tony
- CADAE2
- C1CFD7
- B9C5CC
- B0BBC1
- A8B1B5
- A0A7AB
- 989DA0
- 909395
- 888A8A
Harmonie kolorów
Komplementarna +180°
- D2E4EE
Mystic Harbour
- EEDDD3
≈ Santa Fe Spirit
Analogowa -30° +30°
- D2E4EE
Mystic Harbour
- D0E6E7
≈ Blue Phlox
- D8E1F1
≈ Aquarelle Purple
Triada +120° +240°
- D2E4EE
Mystic Harbour
- EEDBE2
≈ Pink Posies
- E1E3D1
≈ Positive Energy
Komplementarna rozszczepiona +150° +210°
- D2E4EE
Mystic Harbour
- F0DBDA
≈ Lover’s Knot
- E9E0D0
≈ Vanilla Flower
Tetrada +90° +180° +270°
- D2E4EE
Mystic Harbour
- E8DCEA
≈ Sprinkle
- EEDDD3
≈ Santa Fe Spirit
- D8E5D7
≈ Whispering Frost
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.30:1 · APCA Lc 15
Ag
AAANa czerni
WCAG 16.07:1 · APCA Lc 89
Najlepszy kolor tekstu: #000000
WCAG 16.07:1 (AAA) · APCA Lc 89
Contrast pairs
Fragmenty kodu
CSS
:root {
--mystic-harbour: #d2e4ee;
--mystic-harbour-rgb: 210 228 238;
--mystic-harbour-oklch: oklch(0.908 0.024 231.9);
}
.element {
color: var(--mystic-harbour);
background-color: hsl(201 45% 88%);
border-color: oklch(0.908 0.024 231.9);
}Tailwind CSS v4
@theme {
--color-mystic-harbour: #d2e4ee;
--color-mystic-harbour-50: #eff6fb;
--color-mystic-harbour-100: #e1e9ef;
--color-mystic-harbour-200: #cbd6dd;
--color-mystic-harbour-300: #acbac2;
--color-mystic-harbour-400: #91a1aa;
--color-mystic-harbour-500: #778993;
--color-mystic-harbour-600: #65747d;
--color-mystic-harbour-700: #515d64;
--color-mystic-harbour-800: #3a4449;
--color-mystic-harbour-900: #282f33;
--color-mystic-harbour-950: #161c1e;
}SCSS
$mystic-harbour: #d2e4ee;
$mystic-harbour-rgb: 210, 228, 238;
$mystic-harbour-light: mix(#fff, $mystic-harbour, 20%);
$mystic-harbour-dark: mix(#000, $mystic-harbour, 20%);
.element {
color: $mystic-harbour;
box-shadow: 0 0 0 2px rgba($mystic-harbour, 0.35);
}