Benannte Farbe · #A6E3E0
Ice Crystal Blue
Ice Crystal Blue ist #A6E3E0: rgb(166 227 224), hsl(177 52% 77%), oklch(0.874 0.062 192.3). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Teal mean? → · Ice Crystal Blue color name →
#A6E3E0
oklch(0.874 0.062 192.3)
Farbumrechnungen
- HEX
- #a6e3e0
- RGB
- rgb(166 227 224)
- HSL
- hsl(177 52% 77%)
- HWB
- hwb(177 65% 11%)
- OKLCH
- oklch(0.874 0.062 192.3)
- OKLab
- oklab(0.874 -0.06 -0.013)
- CIE Lab
- lab(86.04 -20.51 -5.12)
- LCH
- lch(86.04 21.14 194)
- CMYK
- cmyk(27% 0% 1% 11%)
Tints · Shades · Tones
Tints
- AFE6E3
- B9E9E6
- C2ECE9
- CBEEEC
- D4F1EF
- DCF4F3
- E5F7F6
- EEFAF9
- F6FCFC
Shades
- 90C5C3
- 7AA8A6
- 658C8A
- 517170
- 3E5756
- 2B3F3E
- 1A2727
- 0A1212
- 010302
Tones
- A3D9D6
- 9FCFCC
- 9CC4C2
- 98BAB8
- 94B0AF
- 90A7A5
- 8C9D9C
- 889392
- 848989
Farbharmonien
Komplementär +180°
- A6E3E0
Ice Crystal Blue
- FBC5CA
≈ Crystal Rose
Analog -30° +30°
- A6E3E0
Ice Crystal Blue
- B2E3C9
≈ Quiet Jade
- A9DFF3
≈ Van Gogh Blue
Triadisch +120° +240°
- A6E3E0
Ice Crystal Blue
- E3CAF3
≈ Mousse aux Pruneaux
- EFD0A9
≈ Soufflé
Geteilt komplementär +150° +210°
- A6E3E0
Ice Crystal Blue
- F3C6E1
≈ Venetian Rose
- FAC9B6
≈ Dolly Cheek
Tetradisch +90° +180° +270°
- A6E3E0
Ice Crystal Blue
- CED1FE
≈ Pale Phthalo Blue
- FBC5CA
≈ Crystal Rose
- DDD8A9
≈ Buckwheat Groats
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.42:1 · APCA Lc 21
Ag
AAAAuf Schwarz
WCAG 14.68:1 · APCA Lc 83
Beste Textfarbe: #000000
WCAG 14.68:1 (AAA) · APCA Lc 83
Contrast pairs
Code-Snippets
CSS
:root {
--ice-crystal-blue: #a6e3e0;
--ice-crystal-blue-rgb: 166 227 224;
--ice-crystal-blue-oklch: oklch(0.874 0.062 192.3);
}
.element {
color: var(--ice-crystal-blue);
background-color: hsl(177 52% 77%);
border-color: oklch(0.874 0.062 192.3);
}Tailwind CSS v4
@theme {
--color-ice-crystal-blue: #a6e3e0;
--color-ice-crystal-blue-50: #e2fbfa;
--color-ice-crystal-blue-100: #d1efee;
--color-ice-crystal-blue-200: #b7dddc;
--color-ice-crystal-blue-300: #93c2c1;
--color-ice-crystal-blue-400: #72aaa8;
--color-ice-crystal-blue-500: #519391;
--color-ice-crystal-blue-600: #457d7a;
--color-ice-crystal-blue-700: #376462;
--color-ice-crystal-blue-800: #274947;
--color-ice-crystal-blue-900: #1a3331;
--color-ice-crystal-blue-950: #0a1f1d;
}SCSS
$ice-crystal-blue: #a6e3e0;
$ice-crystal-blue-rgb: 166, 227, 224;
$ice-crystal-blue-light: mix(#fff, $ice-crystal-blue, 20%);
$ice-crystal-blue-dark: mix(#000, $ice-crystal-blue, 20%);
.element {
color: $ice-crystal-blue;
box-shadow: 0 0 0 2px rgba($ice-crystal-blue, 0.35);
}