Benannte Farbe · #D1E8F1
On Thin Ice
On Thin Ice ist #D1E8F1: rgb(209 232 241), hsl(197 53% 88%), oklch(0.917 0.027 223.2). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Gray mean? → · On Thin Ice color name →
#D1E8F1
oklch(0.917 0.027 223.2)
Farbumrechnungen
- HEX
- #d1e8f1
- RGB
- rgb(209 232 241)
- HSL
- hsl(197 53% 88%)
- HWB
- hwb(197 82% 5%)
- OKLCH
- oklch(0.917 0.027 223.2)
- OKLab
- oklab(0.917 -0.02 -0.019)
- CIE Lab
- lab(90.49 -6.52 -7.1)
- LCH
- lch(90.49 9.65 227.4)
- CMYK
- cmyk(13% 4% 0% 5%)
Tints · Shades · Tones
Tints
- D6EAF2
- DAEDF4
- DFEFF5
- E3F1F7
- E8F4F8
- EDF6F9
- F1F8FB
- F6FAFC
- FAFDFE
Shades
- B5CAD2
- 9BACB3
- 819095
- 687479
- 50595D
- 394043
- 23292B
- 101314
- 020303
Tones
- C9DDE5
- C0D2D9
- B8C8CE
- B0BDC2
- A8B3B7
- A0A8AC
- 989EA1
- 909496
- 888A8B
Farbharmonien
Komplementär +180°
- D1E8F1
On Thin Ice
- F4DED5
≈ Ambrosia Salad
Analog -30° +30°
- D1E8F1
On Thin Ice
- D0EAE8
≈ Foam
- D7E5F6
≈ Snowdrift Glow
Triadisch +120° +240°
- D1E8F1
On Thin Ice
- F1DDE8
≈ Wishy-Washy Pink
- E6E5D0
≈ Light Fern Green
Geteilt komplementär +150° +210°
- D1E8F1
On Thin Ice
- F5DDDE
≈ In Your Dreams
- EFE1D0
≈ Chamois Cloth
Tetradisch +90° +180° +270°
- D1E8F1
On Thin Ice
- EADFF1
≈ Lingering Lilac
- F4DED5
≈ Ambrosia Salad
- DCE8D5
≈ Touch of Green
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.27:1 · APCA Lc 13
Ag
AAAAuf Schwarz
WCAG 16.52:1 · APCA Lc 90
Beste Textfarbe: #000000
WCAG 16.52:1 (AAA) · APCA Lc 90
Contrast pairs
Code-Snippets
CSS
:root {
--on-thin-ice: #d1e8f1;
--on-thin-ice-rgb: 209 232 241;
--on-thin-ice-oklch: oklch(0.917 0.027 223.2);
}
.element {
color: var(--on-thin-ice);
background-color: hsl(197 53% 88%);
border-color: oklch(0.917 0.027 223.2);
}Tailwind CSS v4
@theme {
--color-on-thin-ice: #d1e8f1;
--color-on-thin-ice-50: #edf7fb;
--color-on-thin-ice-100: #dfeaef;
--color-on-thin-ice-200: #c9d7dd;
--color-on-thin-ice-300: #a9bbc2;
--color-on-thin-ice-400: #8ea2aa;
--color-on-thin-ice-500: #738b94;
--color-on-thin-ice-600: #62757d;
--color-on-thin-ice-700: #4e5e64;
--color-on-thin-ice-800: #384549;
--color-on-thin-ice-900: #272f33;
--color-on-thin-ice-950: #151c1e;
}SCSS
$on-thin-ice: #d1e8f1;
$on-thin-ice-rgb: 209, 232, 241;
$on-thin-ice-light: mix(#fff, $on-thin-ice, 20%);
$on-thin-ice-dark: mix(#000, $on-thin-ice, 20%);
.element {
color: $on-thin-ice;
box-shadow: 0 0 0 2px rgba($on-thin-ice, 0.35);
}