Adlandırılmış renk · #45E9FD
Shimmering Expanse Cyan
Shimmering Expanse Cyan, #45E9FD: rgb(69 233 253), hsl(187 98% 63%), oklch(0.86 0.133 207.1). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Cyan mean? → · Shimmering Expanse Cyan color name →
#45E9FD
oklch(0.86 0.133 207.1)
Renk dönüşümleri
- 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%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 64ECFD
- 7CEEFE
- 90F1FE
- A3F3FE
- B4F5FE
- C4F7FF
- D3F9FF
- E2FBFF
- F1FDFF
Koyu tonlar
- 3BCBDC
- 31ADBC
- 27909D
- 1E747F
- 155A62
- 0C4147
- 05292D
- 021316
- 000303
Gri tonlar
- 54DEF0
- 60D4E3
- 68C9D6
- 6FBEC9
- 74B4BD
- 78A9B0
- 7B9FA4
- 7E9598
- 7F8A8C
Renk uyumları
Tamamlayıcı +180°
- 45E9FD
Shimmering Expanse Cyan
- FFBFB6
≈ Ruffled Parasol
Analog -30° +30°
- 45E9FD
Shimmering Expanse Cyan
- 5AEDCF
≈ Aphrodite Aqua
- 9FD9FF
≈ Shiva Blue
Üçlü +120° +240°
- 45E9FD
Shimmering Expanse Cyan
- FFB2FE
≈ Strawberry Buttercream
- F6CB61
≈ Bee Hall
Bölünmüş tamamlayıcı +150° +210°
- 45E9FD
Shimmering Expanse Cyan
- FFBBD1
≈ Tentacle Pink
- FFC297
≈ Wispy White
Dörtlü +90° +180° +270°
- 45E9FD
Shimmering Expanse Cyan
- D6C7FF
≈ Innocent Snowdrop
- FFBFB6
≈ Ruffled Parasol
- CBDC73
≈ Golden Hop
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.46:1 · APCA Lc 22
Ag
AAASiyah üzerinde
WCAG 14.32:1 · APCA Lc 82
En iyi metin rengi: #000000
WCAG 14.32:1 (AAA) · APCA Lc 82
Contrast pairs
Kod parçacıkları
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);
}