Named color · #C1DEE2
Ice Shard Soft Blue
Ice Shard Soft Blue is #C1DEE2: rgb(193 222 226), hsl(187 36% 82%), oklch(0.881 0.031 206.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Ice Shard Soft Blue color name →
#C1DEE2
oklch(0.881 0.031 206.7)
Color conversions
- HEX
- #c1dee2
- RGB
- rgb(193 222 226)
- HSL
- hsl(187 36% 82%)
- HWB
- hwb(187 76% 11%)
- OKLCH
- oklch(0.881 0.031 206.7)
- OKLab
- oklab(0.881 -0.028 -0.014)
- CIE Lab
- lab(86.43 -9.31 -5.37)
- LCH
- lch(86.43 10.75 210)
- CMYK
- cmyk(15% 2% 0% 11%)
Tints · Shades · Tones
Tints
- C7E1E5
- CDE5E8
- D4E8EB
- DAEBEE
- E0EEF0
- E6F2F3
- ECF5F6
- F3F8F9
- F9FCFC
Shades
- A7C1C4
- 8FA5A8
- 77898C
- 5F6F71
- 495557
- 343D3E
- 202627
- 0E1212
- 020203
Tones
- BAD4D8
- B4CACE
- ADC1C4
- A7B7BA
- A0AEB0
- 9AA5A6
- 939B9C
- 8D9293
- 868989
Color harmonies
Complementary +180°
- C1DEE2
Ice Shard Soft Blue
- ECD0CD
≈ Cool Melon
Analogous -30° +30°
- C1DEE2
Ice Shard Soft Blue
- C3DFD7
≈ Ulthuan Grey
- C5DBEA
≈ Celestial Light
Triadic +120° +240°
- C1DEE2
Ice Shard Soft Blue
- E3D1E3
≈ Purplish White
- E1D7C1
≈ Paella Natural White
Split-complementary +150° +210°
- C1DEE2
Ice Shard Soft Blue
- EAD0D8
≈ Distant Flare
- E8D3C4
≈ Enjoy
Tetradic +90° +180° +270°
- C1DEE2
Ice Shard Soft Blue
- D9D4EA
≈ Violet Crush
- ECD0CD
≈ Cool Melon
- D6DBC4
≈ Feng Shui
Contrast & accessibility
Ag
FailOn white
WCAG 1.41:1 · APCA Lc 20
Ag
AAAOn black
WCAG 14.81:1 · APCA Lc 83
Best text color: #000000
WCAG 14.81:1 (AAA) · APCA Lc 83
Contrast pairs
Code snippets
CSS
:root {
--ice-shard-soft-blue: #c1dee2;
--ice-shard-soft-blue-rgb: 193 222 226;
--ice-shard-soft-blue-oklch: oklch(0.881 0.031 206.7);
}
.element {
color: var(--ice-shard-soft-blue);
background-color: hsl(187 36% 82%);
border-color: oklch(0.881 0.031 206.7);
}Tailwind CSS v4
@theme {
--color-ice-shard-soft-blue: #c1dee2;
--color-ice-shard-soft-blue-50: #ecf8fa;
--color-ice-shard-soft-blue-100: #ddebed;
--color-ice-shard-soft-blue-200: #c6d8db;
--color-ice-shard-soft-blue-300: #a6bcc0;
--color-ice-shard-soft-blue-400: #8aa4a8;
--color-ice-shard-soft-blue-500: #6e8c91;
--color-ice-shard-soft-blue-600: #5e777a;
--color-ice-shard-soft-blue-700: #4b5f62;
--color-ice-shard-soft-blue-800: #364647;
--color-ice-shard-soft-blue-900: #253031;
--color-ice-shard-soft-blue-950: #131c1d;
}SCSS
$ice-shard-soft-blue: #c1dee2;
$ice-shard-soft-blue-rgb: 193, 222, 226;
$ice-shard-soft-blue-light: mix(#fff, $ice-shard-soft-blue, 20%);
$ice-shard-soft-blue-dark: mix(#000, $ice-shard-soft-blue, 20%);
.element {
color: $ice-shard-soft-blue;
box-shadow: 0 0 0 2px rgba($ice-shard-soft-blue, 0.35);
}