Adlandırılmış renk · #C7D8DB
Little Boy Blu
Little Boy Blu, #C7D8DB: rgb(199 216 219), hsl(189 22% 82%), oklch(0.87 0.019 209.4). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Gray mean? → · Little Boy Blu color name →
#C7D8DB
oklch(0.87 0.019 209.4)
Renk dönüşümleri
- HEX
- #c7d8db
- RGB
- rgb(199 216 219)
- HSL
- hsl(189 22% 82%)
- HWB
- hwb(189 78% 14%)
- OKLCH
- oklch(0.87 0.019 209.4)
- OKLab
- oklab(0.87 -0.016 -0.009)
- CIE Lab
- lab(85.11 -5.47 -3.54)
- LCH
- lch(85.11 6.52 212.9)
- CMYK
- cmyk(9% 1% 0% 14%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- CDDCDF
- D2E0E2
- D8E4E6
- DDE7E9
- E3EBED
- E8EFF0
- EEF3F4
- F4F7F8
- F9FBFB
Koyu tonlar
- ADBCBE
- 93A0A2
- 7A8587
- 626B6D
- 4C5354
- 363B3C
- 212526
- 0E1111
- 020202
Gri tonlar
- C0CFD2
- B8C6C8
- B1BDBF
- AAB4B6
- A3ABAC
- 9CA2A3
- 959A9A
- 8E9191
- 878889
Renk uyumları
Tamamlayıcı +180°
- C7D8DB
Little Boy Blu
- E0D0CD
≈ Watermelon Milk
Analog -30° +30°
- C7D8DB
Little Boy Blu
- C8D9D4
≈ Cool Mint
- CAD6E0
≈ Heaven Sent Storm
Üçlü +120° +240°
- C7D8DB
Little Boy Blu
- DCD0DA
≈ Light Bassinet
- D9D4C7
≈ Mexican Sand Dollar
Bölünmüş tamamlayıcı +150° +210°
- C7D8DB
Little Boy Blu
- E0CFD4
≈ Light Sprig Muslin
- DED2C8
≈ Pearl Bush
Dörtlü +90° +180° +270°
- C7D8DB
Little Boy Blu
- D6D2DF
≈ Sword Steel
- E0D0CD
≈ Watermelon Milk
- D3D6C9
≈ Aspen Mist
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.47:1 · APCA Lc 22
Ag
AAASiyah üzerinde
WCAG 14.27:1 · APCA Lc 81
En iyi metin rengi: #000000
WCAG 14.27:1 (AAA) · APCA Lc 81
Contrast pairs
Kod parçacıkları
CSS
:root {
--little-boy-blu: #c7d8db;
--little-boy-blu-rgb: 199 216 219;
--little-boy-blu-oklch: oklch(0.87 0.019 209.4);
}
.element {
color: var(--little-boy-blu);
background-color: hsl(189 22% 82%);
border-color: oklch(0.87 0.019 209.4);
}Tailwind CSS v4
@theme {
--color-little-boy-blu: #c7d8db;
--color-little-boy-blu-50: #eff7f8;
--color-little-boy-blu-100: #e1eaeb;
--color-little-boy-blu-200: #ccd7d9;
--color-little-boy-blu-300: #adbabd;
--color-little-boy-blu-400: #92a2a4;
--color-little-boy-blu-500: #788a8d;
--color-little-boy-blu-600: #667577;
--color-little-boy-blu-700: #525d5f;
--color-little-boy-blu-800: #3b4446;
--color-little-boy-blu-900: #292f30;
--color-little-boy-blu-950: #161c1c;
}SCSS
$little-boy-blu: #c7d8db;
$little-boy-blu-rgb: 199, 216, 219;
$little-boy-blu-light: mix(#fff, $little-boy-blu, 20%);
$little-boy-blu-dark: mix(#000, $little-boy-blu, 20%);
.element {
color: $little-boy-blu;
box-shadow: 0 0 0 2px rgba($little-boy-blu, 0.35);
}