Benannte Farbe · #C6DDE4
Light Blue Sloth
Light Blue Sloth ist #C6DDE4: rgb(198 221 228), hsl(194 36% 84%), oklch(0.883 0.026 218). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Gray mean? → · Light Blue Sloth color name →
#C6DDE4
oklch(0.883 0.026 218)
Farbumrechnungen
- HEX
- #c6dde4
- RGB
- rgb(198 221 228)
- HSL
- hsl(194 36% 84%)
- HWB
- hwb(194 78% 11%)
- OKLCH
- oklch(0.883 0.026 218)
- OKLab
- oklab(0.883 -0.021 -0.016)
- CIE Lab
- lab(86.55 -6.88 -6.18)
- LCH
- lch(86.55 9.25 222)
- CMYK
- cmyk(13% 3% 0% 11%)
Tints · Shades · Tones
Tints
- CCE0E7
- D1E4E9
- D7E7EC
- DDEBEF
- E2EEF1
- E8F1F4
- EEF5F7
- F4F8FA
- F9FCFC
Shades
- ACC0C6
- 92A4A9
- 7A888D
- 626E72
- 4B5558
- 353D3F
- 212628
- 0E1112
- 020203
Tones
- BFD3DA
- B8CACF
- B1C0C5
- AAB7BB
- A2ADB1
- 9CA4A7
- 959B9D
- 8E9293
- 87898A
Farbharmonien
Komplementär +180°
- C6DDE4
Light Blue Sloth
- E9D3CC
≈ Birthday Cake
Analog -30° +30°
- C6DDE4
Light Blue Sloth
- C6DEDB
≈ Sunken Pool
- CBDAE9
≈ Sea Breeze Green
Triadisch +120° +240°
- C6DDE4
Light Blue Sloth
- E5D2DE
≈ Blissful Light
- DDD9C5
≈ Zero Degrees
Geteilt komplementär +150° +210°
- C6DDE4
Light Blue Sloth
- E9D2D5
≈ Desert Mauve
- E4D6C6
≈ Hanyauku
Tetradisch +90° +180° +270°
- C6DDE4
Light Blue Sloth
- DDD4E6
≈ Alpine Moon
- E9D3CC
≈ Birthday Cake
- D3DCCA
≈ Ottoman
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.41:1 · APCA Lc 20
Ag
AAAAuf Schwarz
WCAG 14.86:1 · APCA Lc 84
Beste Textfarbe: #000000
WCAG 14.86:1 (AAA) · APCA Lc 84
Contrast pairs
Code-Snippets
CSS
:root {
--light-blue-sloth: #c6dde4;
--light-blue-sloth-rgb: 198 221 228;
--light-blue-sloth-oklch: oklch(0.883 0.026 218);
}
.element {
color: var(--light-blue-sloth);
background-color: hsl(194 36% 84%);
border-color: oklch(0.883 0.026 218);
}Tailwind CSS v4
@theme {
--color-light-blue-sloth: #c6dde4;
--color-light-blue-sloth-50: #edf7fa;
--color-light-blue-sloth-100: #dfeaee;
--color-light-blue-sloth-200: #c9d7dc;
--color-light-blue-sloth-300: #a9bbc1;
--color-light-blue-sloth-400: #8ea3a9;
--color-light-blue-sloth-500: #738b92;
--color-light-blue-sloth-600: #62757b;
--color-light-blue-sloth-700: #4e5e63;
--color-light-blue-sloth-800: #384548;
--color-light-blue-sloth-900: #273032;
--color-light-blue-sloth-950: #151c1e;
}SCSS
$light-blue-sloth: #c6dde4;
$light-blue-sloth-rgb: 198, 221, 228;
$light-blue-sloth-light: mix(#fff, $light-blue-sloth, 20%);
$light-blue-sloth-dark: mix(#000, $light-blue-sloth, 20%);
.element {
color: $light-blue-sloth;
box-shadow: 0 0 0 2px rgba($light-blue-sloth, 0.35);
}