Nazwany kolor · #45E9FD
Shimmering Expanse Cyan
Shimmering Expanse Cyan to #45E9FD: rgb(69 233 253), hsl(187 98% 63%), oklch(0.86 0.133 207.1). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Cyan mean? → · Shimmering Expanse Cyan color name →
#45E9FD
oklch(0.86 0.133 207.1)
Konwersje koloru
- HEX
- #45e9fd
- RGB
- rgb(69 233 253)
- HSL
- hsl(187 98% 63%)
- HWB
- hwb(187 27% 1%)
- OKLCH
- oklch(0.86 0.133 207.1)
- OKLab
- oklab(0.86 -0.118 -0.06)
- CIE Lab
- lab(84.84 -38.3 -22.54)
- LCH
- lch(84.84 44.44 210.5)
- CMYK
- cmyk(73% 8% 0% 1%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 64ECFD
- 7CEEFE
- 90F1FE
- A3F3FE
- B4F5FE
- C4F7FF
- D3F9FF
- E2FBFF
- F1FDFF
Odcienie ciemniejsze
- 3BCBDC
- 31ADBC
- 27909D
- 1E747F
- 155A62
- 0C4147
- 05292D
- 021316
- 000303
Tony
- 54DEF0
- 60D4E3
- 68C9D6
- 6FBEC9
- 74B4BD
- 78A9B0
- 7B9FA4
- 7E9598
- 7F8A8C
Harmonie kolorów
Komplementarna +180°
- 45E9FD
Shimmering Expanse Cyan
- FFBFB6
≈ Ruffled Parasol
Analogowa -30° +30°
- 45E9FD
Shimmering Expanse Cyan
- 5AEDCF
≈ Aphrodite Aqua
- 9FD9FF
≈ Shiva Blue
Triada +120° +240°
- 45E9FD
Shimmering Expanse Cyan
- FFB2FE
≈ Strawberry Buttercream
- F6CB61
≈ Bee Hall
Komplementarna rozszczepiona +150° +210°
- 45E9FD
Shimmering Expanse Cyan
- FFBBD1
≈ Tentacle Pink
- FFC297
≈ Wispy White
Tetrada +90° +180° +270°
- 45E9FD
Shimmering Expanse Cyan
- D6C7FF
≈ Innocent Snowdrop
- FFBFB6
≈ Ruffled Parasol
- CBDC73
≈ Golden Hop
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.46:1 · APCA Lc 22
Ag
AAANa czerni
WCAG 14.32:1 · APCA Lc 82
Najlepszy kolor tekstu: #000000
WCAG 14.32:1 (AAA) · APCA Lc 82
Contrast pairs
Fragmenty kodu
CSS
:root {
--shimmering-expanse-cyan: #45e9fd;
--shimmering-expanse-cyan-rgb: 69 233 253;
--shimmering-expanse-cyan-oklch: oklch(0.86 0.133 207.1);
}
.element {
color: var(--shimmering-expanse-cyan);
background-color: hsl(187 98% 63%);
border-color: oklch(0.86 0.133 207.1);
}Tailwind CSS v4
@theme {
--color-shimmering-expanse-cyan: #45e9fd;
--color-shimmering-expanse-cyan-50: #caffff;
--color-shimmering-expanse-cyan-100: #b4f5ff;
--color-shimmering-expanse-cyan-200: #8de4f3;
--color-shimmering-expanse-cyan-300: #56cadc;
--color-shimmering-expanse-cyan-400: #00b4c6;
--color-shimmering-expanse-cyan-500: #009db2;
--color-shimmering-expanse-cyan-600: #008597;
--color-shimmering-expanse-cyan-700: #006a79;
--color-shimmering-expanse-cyan-800: #004f58;
--color-shimmering-expanse-cyan-900: #00373e;
--color-shimmering-expanse-cyan-950: #002127;
}SCSS
$shimmering-expanse-cyan: #45e9fd;
$shimmering-expanse-cyan-rgb: 69, 233, 253;
$shimmering-expanse-cyan-light: mix(#fff, $shimmering-expanse-cyan, 20%);
$shimmering-expanse-cyan-dark: mix(#000, $shimmering-expanse-cyan, 20%);
.element {
color: $shimmering-expanse-cyan;
box-shadow: 0 0 0 2px rgba($shimmering-expanse-cyan, 0.35);
}