Adlandırılmış renk · #98BDDD
Sleeping Easy
Sleeping Easy, #98BDDD: rgb(152 189 221), hsl(208 50% 73%), oklch(0.782 0.061 244.8). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Blue mean? → · Sleeping Easy color name →
#98BDDD
oklch(0.782 0.061 244.8)
Renk dönüşümleri
- HEX
- #98bddd
- RGB
- rgb(152 189 221)
- HSL
- hsl(208 50% 73%)
- HWB
- hwb(208 60% 13%)
- OKLCH
- oklch(0.782 0.061 244.8)
- OKLab
- oklab(0.782 -0.026 -0.055)
- CIE Lab
- lab(74.73 -7.21 -20.38)
- LCH
- lch(74.73 21.62 250.5)
- CMYK
- cmyk(31% 14% 0% 13%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- A2C4E1
- ACCAE4
- B7D1E8
- C1D7EB
- CBDEEE
- D5E4F2
- E0EBF5
- EAF2F8
- F5F8FC
Koyu tonlar
- 84A4C0
- 708CA4
- 5C7488
- 4A5D6E
- 384755
- 27333D
- 171F26
- 080D11
- 010202
Gri tonlar
- 96B7D3
- 94B1CA
- 91AAC0
- 8FA4B7
- 8D9EAE
- 8A98A4
- 88929B
- 858C92
- 838689
Renk uyumları
Tamamlayıcı +180°
- 98BDDD
Sleeping Easy
- D4B190
≈ Cinnamon Frost
Analog -30° +30°
- 98BDDD
Sleeping Easy
- 8BC3D0
≈ After the Rain
- ACB6E0
≈ Sassy Violet
Üçlü +120° +240°
- 98BDDD
Sleeping Easy
- DBA9B3
≈ Pink Nectar
- AFBF95
≈ Bavarian Hops
Bölünmüş tamamlayıcı +150° +210°
- 98BDDD
Sleeping Easy
- DCAB9E
≈ Tamanegi Peel
- C4B88C
≈ Bakelite Yellow
Dörtlü +90° +180° +270°
- 98BDDD
Sleeping Easy
- D1AAC8
≈ Heart to Heart
- D4B190
≈ Cinnamon Frost
- 9AC4A7
≈ Mini Green
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.97:1 · APCA Lc 38
Ag
AAASiyah üzerinde
WCAG 10.65:1 · APCA Lc 64
En iyi metin rengi: #000000
WCAG 10.65:1 (AAA) · APCA Lc 64
Contrast pairs
Kod parçacıkları
CSS
:root {
--sleeping-easy: #98bddd;
--sleeping-easy-rgb: 152 189 221;
--sleeping-easy-oklch: oklch(0.782 0.061 244.8);
}
.element {
color: var(--sleeping-easy);
background-color: hsl(208 50% 73%);
border-color: oklch(0.782 0.061 244.8);
}Tailwind CSS v4
@theme {
--color-sleeping-easy: #98bddd;
--color-sleeping-easy-50: #e8f7ff;
--color-sleeping-easy-100: #d8eafc;
--color-sleeping-easy-200: #c0d7ed;
--color-sleeping-easy-300: #9fbbd5;
--color-sleeping-easy-400: #81a3c0;
--color-sleeping-easy-500: #648bac;
--color-sleeping-easy-600: #557591;
--color-sleeping-easy-700: #435e75;
--color-sleeping-easy-800: #304556;
--color-sleeping-easy-900: #20303c;
--color-sleeping-easy-950: #101c26;
}SCSS
$sleeping-easy: #98bddd;
$sleeping-easy-rgb: 152, 189, 221;
$sleeping-easy-light: mix(#fff, $sleeping-easy, 20%);
$sleeping-easy-dark: mix(#000, $sleeping-easy, 20%);
.element {
color: $sleeping-easy;
box-shadow: 0 0 0 2px rgba($sleeping-easy, 0.35);
}