Màu có tên · #ADD8E6
Light Blue
Light Blue là #ADD8E6: rgb(173 216 230), hsl(195 53% 79%), oklch(0.856 0.049 219.7). Xem sắc nhạt, sắc đậm, hòa sắc, tương phản WCAG và APCA, cùng mã CSS, Tailwind v4 và SCSS.
What does Cyan mean? → · Light Blue color name →
#ADD8E6
oklch(0.856 0.049 219.7)
Chuyển đổi màu
- HEX
- #add8e6
- RGB
- rgb(173 216 230)
- HSL
- hsl(195 53% 79%)
- HWB
- hwb(195 68% 10%)
- OKLCH
- oklch(0.856 0.049 219.7)
- OKLab
- oklab(0.856 -0.038 -0.031)
- CIE Lab
- lab(83.61 -12.23 -11.78)
- LCH
- lch(83.61 16.98 223.9)
- CMYK
- cmyk(25% 6% 0% 10%)
Sắc nhạt · Sắc đậm · Sắc xám
Sắc nhạt
- B5DCE9
- BEE0EB
- C6E4EE
- CEE8F0
- D6ECF3
- DEEFF5
- E7F3F8
- EFF7FA
- F7FBFD
Sắc đậm
- 96BCC8
- 7FA0AB
- 6A858E
- 556B73
- 415359
- 2D3B40
- 1B2528
- 0B1113
- 010203
Sắc xám
- A9CFDB
- A4C6D1
- A0BDC6
- 9BB4BC
- 97ABB2
- 92A2A8
- 8E9A9E
- 899194
- 85888A
Hòa sắc
Bổ túc +180°
- ADD8E6
Light Blue
- EDC6B8
≈ Spiced Orange
Tương đồng -30° +30°
- ADD8E6
Light Blue
- ACDBD7
≈ Beachside Drive
- B8D3EF
≈ Summer Birthday
Bộ ba +120° +240°
- ADD8E6
Light Blue
- E7C4DA
≈ Dreamy Memory
- D7D1AD
≈ Chinese Silk
Bổ túc chia +150° +210°
- ADD8E6
Light Blue
- EEC3C9
≈ Loveable
- E5CBAE
≈ Jacobean Lace
Bộ bốn +90° +180° +270°
- ADD8E6
Light Blue
- D9C8E8
≈ Foggy Love
- EDC6B8
≈ Spiced Orange
- C5D7B5
≈ Spice Garden
Tương phản và khả năng tiếp cận
Ag
FailTrên nền trắng
WCAG 1.52:1 · APCA Lc 24
Ag
AAATrên nền đen
WCAG 13.74:1 · APCA Lc 79
Màu chữ tốt nhất: #000000
WCAG 13.74:1 (AAA) · APCA Lc 79
Contrast pairs
Đoạn mã
CSS
:root {
--light-blue: #add8e6;
--light-blue-rgb: 173 216 230;
--light-blue-oklch: oklch(0.856 0.049 219.7);
}
.element {
color: var(--light-blue);
background-color: hsl(195 53% 79%);
border-color: oklch(0.856 0.049 219.7);
}Tailwind CSS v4
@theme {
--color-light-blue: #add8e6;
--color-light-blue-50: #e7f9ff;
--color-light-blue-100: #d7ecf4;
--color-light-blue-200: #bfdae3;
--color-light-blue-300: #9dbec9;
--color-light-blue-400: #7ea6b2;
--color-light-blue-500: #618e9d;
--color-light-blue-600: #527884;
--color-light-blue-700: #42606a;
--color-light-blue-800: #2f474e;
--color-light-blue-900: #203136;
--color-light-blue-950: #0f1d21;
}SCSS
$light-blue: #add8e6;
$light-blue-rgb: 173, 216, 230;
$light-blue-light: mix(#fff, $light-blue, 20%);
$light-blue-dark: mix(#000, $light-blue, 20%);
.element {
color: $light-blue;
box-shadow: 0 0 0 2px rgba($light-blue, 0.35);
}