En yakın adlandırılmış renk · #DEFDFF
#DEFDFF
En yakın adlandırılmış renk: Cold Canada
#DEFDFF (rgb(222 253 255), hsl(184 100% 94%), oklch(0.972 0.032 201.4)) en çok Cold Canada adlı renge yakındır. Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
#DEFDFF
oklch(0.972 0.032 201.4)
Renk dönüşümleri
- HEX
- #defdff
- RGB
- rgb(222 253 255)
- HSL
- hsl(184 100% 94%)
- HWB
- hwb(184 87% 0%)
- OKLCH
- oklch(0.972 0.032 201.4)
- OKLab
- oklab(0.972 -0.03 -0.012)
- CIE Lab
- lab(97.12 -10.07 -4.53)
- LCH
- lch(97.12 11.04 204.2)
- CMYK
- cmyk(13% 1% 0% 0%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- E1FDFF
- E5FDFF
- E8FEFF
- EBFEFF
- EFFEFF
- F2FEFF
- F5FEFF
- F9FFFF
- FCFFFF
Koyu tonlar
- C1DCDE
- A5BCBE
- 899D9E
- 6F7F80
- 556263
- 3D4748
- 262D2E
- 121616
- 020303
Gri tonlar
- D4F0F2
- CBE3E4
- C1D6D7
- B8C9CA
- AEBDBE
- A5B0B1
- 9BA4A4
- 929898
- 898C8C
Renk uyumları
Tamamlayıcı +180°
- DEFDFF
Cold Canada
- FFF3F2
≈ Coy
Analog -30° +30°
- DEFDFF
Cold Canada
- E1FEF3
≈ Mint Chiffon
- ECF8FF
≈ Alice Blue
Üçlü +120° +240°
- DEFDFF
Cold Canada
- FDF1FF
≈ Pinkish White
- FFF5E3
≈ Silky Tofu
Bölünmüş tamamlayıcı +150° +210°
- DEFDFF
Cold Canada
- FFF2F7
≈ Lavender Blush
- FFF3ED
≈ Soft Peach Mist
Dörtlü +90° +180° +270°
- DEFDFF
Cold Canada
- F6F4FF
≈ Sugar Crystal
- FFF3F2
≈ Coy
- F6F9E0
≈ Chilean Heath
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.07:1 · APCA Lc 0
Ag
AAASiyah üzerinde
WCAG 19.60:1 · APCA Lc 103
En iyi metin rengi: #000000
WCAG 19.60:1 (AAA) · APCA Lc 103
Contrast pairs
Kod parçacıkları
CSS
:root {
--cold-canada: #defdff;
--cold-canada-rgb: 222 253 255;
--cold-canada-oklch: oklch(0.972 0.032 201.4);
}
.element {
color: var(--cold-canada);
background-color: hsl(184 100% 94%);
border-color: oklch(0.972 0.032 201.4);
}Tailwind CSS v4
@theme {
--color-cold-canada: #defdff;
--color-cold-canada-50: #ebf8f9;
--color-cold-canada-100: #dcebed;
--color-cold-canada-200: #c5d9da;
--color-cold-canada-300: #a5bdbf;
--color-cold-canada-400: #89a4a6;
--color-cold-canada-500: #6e8d8f;
--color-cold-canada-600: #5d7779;
--color-cold-canada-700: #4a5f61;
--color-cold-canada-800: #364647;
--color-cold-canada-900: #253031;
--color-cold-canada-950: #131d1d;
}SCSS
$cold-canada: #defdff;
$cold-canada-rgb: 222, 253, 255;
$cold-canada-light: mix(#fff, $cold-canada, 20%);
$cold-canada-dark: mix(#000, $cold-canada, 20%);
.element {
color: $cold-canada;
box-shadow: 0 0 0 2px rgba($cold-canada, 0.35);
}