Nazwany kolor · #C3CED8
Illusion Blue
Illusion Blue to #C3CED8: rgb(195 206 216), hsl(209 21% 81%), oklch(0.846 0.018 245.4). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Illusion Blue color name →
#C3CED8
oklch(0.846 0.018 245.4)
Konwersje koloru
- HEX
- #c3ced8
- RGB
- rgb(195 206 216)
- HSL
- hsl(209 21% 81%)
- HWB
- hwb(209 76% 15%)
- OKLCH
- oklch(0.846 0.018 245.4)
- OKLab
- oklab(0.846 -0.008 -0.017)
- CIE Lab
- lab(82.14 -2.42 -6.34)
- LCH
- lch(82.14 6.78 249.1)
- CMYK
- cmyk(10% 5% 0% 15%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- C9D3DC
- CFD8E0
- D5DDE4
- DBE1E8
- E1E6EB
- E7EBEF
- EDF0F3
- F3F5F7
- F9FAFB
Odcienie ciemniejsze
- A9B3BC
- 9098A0
- 787F85
- 60666B
- 4A4E53
- 34383B
- 202325
- 0E0F11
- 020202
Tony
- BCC6CF
- B5BEC6
- AEB6BD
- A8AEB4
- A1A6AB
- 9A9EA2
- 94979A
- 8D8F91
- 868788
Harmonie kolorów
Komplementarna +180°
- C3CED8
Illusion Blue
- D5CAC0
≈ Ashen Tan
Analogowa -30° +30°
- C3CED8
Illusion Blue
- C0D0D4
≈ Alice White
- C9CCD9
≈ Winter’s Fury
Triada +120° +240°
- C3CED8
Illusion Blue
- D8C8CB
≈ Light Pink Polar
- C9CFC2
≈ Harp
Komplementarna rozszczepiona +150° +210°
- C3CED8
Illusion Blue
- D8C9C4
≈ Goodbye Kiss
- D0CDBF
≈ Sedate Grey
Tetrada +90° +180° +270°
- C3CED8
Illusion Blue
- D5C8D1
≈ Rosy Lavender
- D5CAC0
≈ Ashen Tan
- C4D0C7
≈ Fountain Foam
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.59:1 · APCA Lc 27
Ag
AAANa czerni
WCAG 13.14:1 · APCA Lc 76
Najlepszy kolor tekstu: #000000
WCAG 13.14:1 (AAA) · APCA Lc 76
Contrast pairs
Fragmenty kodu
CSS
:root {
--illusion-blue: #c3ced8;
--illusion-blue-rgb: 195 206 216;
--illusion-blue-oklch: oklch(0.846 0.018 245.4);
}
.element {
color: var(--illusion-blue);
background-color: hsl(209 21% 81%);
border-color: oklch(0.846 0.018 245.4);
}Tailwind CSS v4
@theme {
--color-illusion-blue: #c3ced8;
--color-illusion-blue-50: #f1f6fa;
--color-illusion-blue-100: #e3e9ee;
--color-illusion-blue-200: #ced5dc;
--color-illusion-blue-300: #b0b8c1;
--color-illusion-blue-400: #96a0a9;
--color-illusion-blue-500: #7c8892;
--color-illusion-blue-600: #69737b;
--color-illusion-blue-700: #545c63;
--color-illusion-blue-800: #3d4348;
--color-illusion-blue-900: #2a2e32;
--color-illusion-blue-950: #181b1e;
}SCSS
$illusion-blue: #c3ced8;
$illusion-blue-rgb: 195, 206, 216;
$illusion-blue-light: mix(#fff, $illusion-blue, 20%);
$illusion-blue-dark: mix(#000, $illusion-blue, 20%);
.element {
color: $illusion-blue;
box-shadow: 0 0 0 2px rgba($illusion-blue, 0.35);
}