Adlandırılmış renk · #CCD7E1
Blue Reflection
Blue Reflection, #CCD7E1: rgb(204 215 225), hsl(209 26% 84%), oklch(0.874 0.018 245.4). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Gray mean? → · Blue Reflection color name →
#CCD7E1
oklch(0.874 0.018 245.4)
Renk dönüşümleri
- HEX
- #ccd7e1
- RGB
- rgb(204 215 225)
- HSL
- hsl(209 26% 84%)
- HWB
- hwb(209 80% 12%)
- OKLCH
- oklch(0.874 0.018 245.4)
- OKLab
- oklab(0.874 -0.008 -0.017)
- CIE Lab
- lab(85.36 -2.4 -6.29)
- LCH
- lch(85.36 6.73 249.1)
- CMYK
- cmyk(9% 4% 0% 12%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- D1DBE4
- D6DFE7
- DBE3EA
- E0E7ED
- E5EBF0
- EAEFF3
- F0F3F6
- F5F7F9
- FAFBFC
Koyu tonlar
- B1BBC4
- 979FA7
- 7E858B
- 656B70
- 4E5256
- 373B3E
- 222527
- 0F1112
- 020202
Gri tonlar
- C4CED7
- BCC5CD
- B5BCC3
- ADB3B9
- A5AAAF
- 9EA2A6
- 96999C
- 8F9193
- 878889
Renk uyumları
Tamamlayıcı +180°
- CCD7E1
Blue Reflection
- DED3C9
≈ Warm Fog
Analog -30° +30°
- CCD7E1
Blue Reflection
- C9D9DD
≈ Wan Blue
- D2D5E2
≈ Hint of Violet
Üçlü +120° +240°
- CCD7E1
Blue Reflection
- E1D1D4
≈ Secret Blush
- D2D8CB
≈ Light Gentle Calm
Bölünmüş tamamlayıcı +150° +210°
- CCD7E1
Blue Reflection
- E1D2CD
≈ Romeo
- D9D6C8
≈ Poseidon’s Beard
Dörtlü +90° +180° +270°
- CCD7E1
Blue Reflection
- DED1DA
≈ Light Bassinet
- DED3C9
≈ Warm Fog
- CDD9D0
≈ Silicate Light Turquoise
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.46:1 · APCA Lc 22
Ag
AAASiyah üzerinde
WCAG 14.37:1 · APCA Lc 81
En iyi metin rengi: #000000
WCAG 14.37:1 (AAA) · APCA Lc 81
Contrast pairs
Kod parçacıkları
CSS
:root {
--blue-reflection: #ccd7e1;
--blue-reflection-rgb: 204 215 225;
--blue-reflection-oklch: oklch(0.874 0.018 245.4);
}
.element {
color: var(--blue-reflection);
background-color: hsl(209 26% 84%);
border-color: oklch(0.874 0.018 245.4);
}Tailwind CSS v4
@theme {
--color-blue-reflection: #ccd7e1;
--color-blue-reflection-50: #f1f6fa;
--color-blue-reflection-100: #e3e9ee;
--color-blue-reflection-200: #ced5dc;
--color-blue-reflection-300: #b0b8c0;
--color-blue-reflection-400: #96a0a9;
--color-blue-reflection-500: #7d8892;
--color-blue-reflection-600: #6a737b;
--color-blue-reflection-700: #545c63;
--color-blue-reflection-800: #3d4348;
--color-blue-reflection-900: #2a2e32;
--color-blue-reflection-950: #181b1e;
}SCSS
$blue-reflection: #ccd7e1;
$blue-reflection-rgb: 204, 215, 225;
$blue-reflection-light: mix(#fff, $blue-reflection, 20%);
$blue-reflection-dark: mix(#000, $blue-reflection, 20%);
.element {
color: $blue-reflection;
box-shadow: 0 0 0 2px rgba($blue-reflection, 0.35);
}