Nazwany kolor · #D9E7E6
Cold Soft Blue
Cold Soft Blue to #D9E7E6: rgb(217 231 230), hsl(176 23% 88%), oklch(0.917 0.015 191.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Cold Soft Blue color name →
#D9E7E6
oklch(0.917 0.015 191.7)
Konwersje koloru
- HEX
- #d9e7e6
- RGB
- rgb(217 231 230)
- HSL
- hsl(176 23% 88%)
- HWB
- hwb(176 85% 9%)
- OKLCH
- oklch(0.917 0.015 191.7)
- OKLab
- oklab(0.917 -0.015 -0.003)
- CIE Lab
- lab(90.56 -4.96 -1.21)
- LCH
- lch(90.56 5.11 193.6)
- CMYK
- cmyk(6% 0% 0% 9%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- DDE9E8
- E1ECEB
- E4EEED
- E8F1F0
- ECF3F2
- F0F5F5
- F4F8F7
- F7FAFA
- FBFDFC
Odcienie ciemniejsze
- BCC9C8
- A1ABAB
- 868F8E
- 6C7373
- 535959
- 3B4040
- 252828
- 111313
- 020303
Tony
- D0DCDB
- C7D2D1
- BDC7C6
- B4BCBC
- ABB2B2
- A3A8A7
- 9A9E9D
- 919493
- 898A8A
Harmonie kolorów
Komplementarna +180°
- D9E7E6
Cold Soft Blue
- EDE0E1
≈ Barely Rose
Analogowa -30° +30°
- D9E7E6
Cold Soft Blue
- DBE7E0
≈ Porcelain Mint
- D9E6EB
≈ Arctic Blizzard
Triada +120° +240°
- D9E7E6
Cold Soft Blue
- E7E1EB
≈ Bubble Bath
- EAE2D9
≈ Built on Sand
Komplementarna rozszczepiona +150° +210°
- D9E7E6
Cold Soft Blue
- EBE0E6
≈ Tiara Jewel
- EDE1DC
≈ Milady
Tetrada +90° +180° +270°
- D9E7E6
Cold Soft Blue
- E2E3EE
≈ Icy Lavender
- EDE0E1
≈ Barely Rose
- E5E4D9
≈ Pearly Star
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.27:1 · APCA Lc 13
Ag
AAANa czerni
WCAG 16.52:1 · APCA Lc 90
Najlepszy kolor tekstu: #000000
WCAG 16.52:1 (AAA) · APCA Lc 90
Contrast pairs
Fragmenty kodu
CSS
:root {
--cold-soft-blue: #d9e7e6;
--cold-soft-blue-rgb: 217 231 230;
--cold-soft-blue-oklch: oklch(0.917 0.015 191.7);
}
.element {
color: var(--cold-soft-blue);
background-color: hsl(176 23% 88%);
border-color: oklch(0.917 0.015 191.7);
}Tailwind CSS v4
@theme {
--color-cold-soft-blue: #d9e7e6;
--color-cold-soft-blue-50: #f0f6f6;
--color-cold-soft-blue-100: #e2e9e9;
--color-cold-soft-blue-200: #cdd6d6;
--color-cold-soft-blue-300: #afbab9;
--color-cold-soft-blue-400: #95a1a0;
--color-cold-soft-blue-500: #7b8989;
--color-cold-soft-blue-600: #697474;
--color-cold-soft-blue-700: #535d5c;
--color-cold-soft-blue-800: #3d4443;
--color-cold-soft-blue-900: #2a2f2f;
--color-cold-soft-blue-950: #171c1b;
}SCSS
$cold-soft-blue: #d9e7e6;
$cold-soft-blue-rgb: 217, 231, 230;
$cold-soft-blue-light: mix(#fff, $cold-soft-blue, 20%);
$cold-soft-blue-dark: mix(#000, $cold-soft-blue, 20%);
.element {
color: $cold-soft-blue;
box-shadow: 0 0 0 2px rgba($cold-soft-blue, 0.35);
}