Benannte Farbe · #AFC5BC
Sparkling Lake
Sparkling Lake ist #AFC5BC: rgb(175 197 188), hsl(155 16% 73%), oklch(0.804 0.027 169.1). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Gray mean? → · Sparkling Lake color name →
#AFC5BC
oklch(0.804 0.027 169.1)
Farbumrechnungen
- HEX
- #afc5bc
- RGB
- rgb(175 197 188)
- HSL
- hsl(155 16% 73%)
- HWB
- hwb(155 69% 23%)
- OKLCH
- oklch(0.804 0.027 169.1)
- OKLab
- oklab(0.804 -0.027 0.005)
- CIE Lab
- lab(77.65 -9.06 1.86)
- LCH
- lch(77.65 9.25 168.4)
- CMYK
- cmyk(11% 0% 5% 23%)
Tints · Shades · Tones
Tints
- B7CBC3
- BFD0C9
- C7D6D0
- CFDCD6
- D7E2DD
- DFE8E4
- E7EDEB
- EFF3F1
- F7F9F8
Shades
- 98ABA3
- 81928B
- 6B7973
- 56615D
- 414B47
- 2E3532
- 1C211F
- 0B0E0D
- 010202
Tones
- AABEB6
- A6B7B0
- A1B0AA
- 9CA9A4
- 97A29D
- 939B97
- 8E9492
- 898D8C
- 858786
Farbharmonien
Komplementär +180°
- AFC5BC
Sparkling Lake
- CDB8C2
≈ Queen’s Violet
Analog -30° +30°
- AFC5BC
Sparkling Lake
- B7C4B3
≈ Belize Green
- ACC5C6
≈ Blue Spruce
Triadisch +120° +240°
- AFC5BC
Sparkling Lake
- BEBDD0
≈ Twilight Pearl
- CEBAB0
≈ Osprey Nest
Geteilt komplementär +150° +210°
- AFC5BC
Sparkling Lake
- C7BACA
≈ Last of the Lilacs
- D0B9B8
≈ Mediterranean Sunset
Tetradisch +90° +180° +270°
- AFC5BC
Sparkling Lake
- B5C0D1
≈ Snow Flurries
- CDB8C2
≈ Queen’s Violet
- C9BDAC
≈ Minimalist
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.82:1 · APCA Lc 34
Ag
AAAAuf Schwarz
WCAG 11.53:1 · APCA Lc 69
Beste Textfarbe: #000000
WCAG 11.53:1 (AAA) · APCA Lc 69
Contrast pairs
Code-Snippets
CSS
:root {
--sparkling-lake: #afc5bc;
--sparkling-lake-rgb: 175 197 188;
--sparkling-lake-oklch: oklch(0.804 0.027 169.1);
}
.element {
color: var(--sparkling-lake);
background-color: hsl(155 16% 73%);
border-color: oklch(0.804 0.027 169.1);
}Tailwind CSS v4
@theme {
--color-sparkling-lake: #afc5bc;
--color-sparkling-lake-50: #eef8f4;
--color-sparkling-lake-100: #dfebe7;
--color-sparkling-lake-200: #c9d8d3;
--color-sparkling-lake-300: #aabcb5;
--color-sparkling-lake-400: #90a49c;
--color-sparkling-lake-500: #758c83;
--color-sparkling-lake-600: #63776f;
--color-sparkling-lake-700: #4f5f59;
--color-sparkling-lake-800: #3a4540;
--color-sparkling-lake-900: #28302c;
--color-sparkling-lake-950: #161c19;
}SCSS
$sparkling-lake: #afc5bc;
$sparkling-lake-rgb: 175, 197, 188;
$sparkling-lake-light: mix(#fff, $sparkling-lake, 20%);
$sparkling-lake-dark: mix(#000, $sparkling-lake, 20%);
.element {
color: $sparkling-lake;
box-shadow: 0 0 0 2px rgba($sparkling-lake, 0.35);
}