Nazwany kolor · #44DDFF
Splashing Wave
Splashing Wave to #44DDFF: rgb(68 221 255), hsl(191 100% 63%), oklch(0.833 0.132 216.3). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Cyan mean? → · Splashing Wave color name →
#44DDFF
oklch(0.833 0.132 216.3)
Konwersje koloru
- HEX
- #44ddff
- RGB
- rgb(68 221 255)
- HSL
- hsl(191 100% 63%)
- HWB
- hwb(191 27% 0%)
- OKLCH
- oklch(0.833 0.132 216.3)
- OKLab
- oklab(0.833 -0.106 -0.078)
- CIE Lab
- lab(81.39 -32.9 -28.8)
- LCH
- lch(81.39 43.72 221.2)
- CMYK
- cmyk(73% 13% 0% 0%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 62E1FF
- 79E5FF
- 8EE8FF
- A0ECFF
- B1EFFF
- C2F2FF
- D2F6FF
- E1F9FF
- F0FCFF
Odcienie ciemniejsze
- 3AC0DE
- 30A4BE
- 26889E
- 1D6E80
- 145563
- 0C3D48
- 05262E
- 021116
- 000203
Tony
- 53D4F2
- 5ECAE5
- 66C1D8
- 6DB8CB
- 72AEBE
- 77A5B1
- 7A9CA5
- 7D9298
- 7F898C
Harmonie kolorów
Komplementarna +180°
- 44DDFF
Splashing Wave
- FFB39D
≈ Persicus
Analogowa -30° +30°
- 44DDFF
Splashing Wave
- 40E4D5
≈ Fresh Turquoise
- 98CEFF
≈ Apocyan
Triada +120° +240°
- 44DDFF
Splashing Wave
- FEA6E8
≈ Pink Wink
- E1C85A
≈ Duck Butter
Komplementarna rozszczepiona +150° +210°
- 44DDFF
Splashing Wave
- FFAEBE
≈ Poodle Skirt
- FFB76B
≈ Mango Creamsicles
Tetrada +90° +180° +270°
- 44DDFF
Splashing Wave
- D9B6FF
≈ Light Violet
- FFB39D
≈ Persicus
- B2D876
≈ Wasabi
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.61:1 · APCA Lc 27
Ag
AAANa czerni
WCAG 13.03:1 · APCA Lc 76
Najlepszy kolor tekstu: #000000
WCAG 13.03:1 (AAA) · APCA Lc 76
Contrast pairs
Fragmenty kodu
CSS
:root {
--splashing-wave: #44ddff;
--splashing-wave-rgb: 68 221 255;
--splashing-wave-oklch: oklch(0.833 0.132 216.3);
}
.element {
color: var(--splashing-wave);
background-color: hsl(191 100% 63%);
border-color: oklch(0.833 0.132 216.3);
}Tailwind CSS v4
@theme {
--color-splashing-wave: #44ddff;
--color-splashing-wave-50: #ccffff;
--color-splashing-wave-100: #b6f3ff;
--color-splashing-wave-200: #91e2fa;
--color-splashing-wave-300: #5dc8e4;
--color-splashing-wave-400: #00b1d0;
--color-splashing-wave-500: #009abe;
--color-splashing-wave-600: #0082a0;
--color-splashing-wave-700: #006880;
--color-splashing-wave-800: #004d5e;
--color-splashing-wave-900: #003642;
--color-splashing-wave-950: #00202a;
}SCSS
$splashing-wave: #44ddff;
$splashing-wave-rgb: 68, 221, 255;
$splashing-wave-light: mix(#fff, $splashing-wave, 20%);
$splashing-wave-dark: mix(#000, $splashing-wave, 20%);
.element {
color: $splashing-wave;
box-shadow: 0 0 0 2px rgba($splashing-wave, 0.35);
}