Màu có tên gần nhất · #9CC4D4
#9CC4D4
Màu có tên gần nhất: Neptune’s Realm
#9CC4D4 (rgb(156 196 212), hsl(197 39% 72%), oklch(0.797 0.048 224.2)) gần nhất với màu có tên Neptune’s Realm. 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.
#9CC4D4
oklch(0.797 0.048 224.2)
Chuyển đổi màu
- HEX
- #9cc4d4
- RGB
- rgb(156 196 212)
- HSL
- hsl(197 39% 72%)
- HWB
- hwb(197 61% 17%)
- OKLCH
- oklch(0.797 0.048 224.2)
- OKLab
- oklab(0.797 -0.035 -0.034)
- CIE Lab
- lab(76.66 -11.04 -12.64)
- LCH
- lch(76.66 16.78 228.9)
- CMYK
- cmyk(26% 8% 0% 17%)
Sắc nhạt · Sắc đậm · Sắc xám
Sắc nhạt
- A6CAD8
- B0D0DD
- BAD6E1
- C4DBE5
- CDE1EA
- D7E7EE
- E1EDF2
- EBF3F6
- F5F9FB
Sắc đậm
- 87AAB8
- 73919D
- 5F7883
- 4C6169
- 394A51
- 28353A
- 182124
- 090E10
- 010202
Sắc xám
- 99BDCB
- 97B6C3
- 94AFBA
- 91A8B2
- 8FA1A9
- 8C9BA1
- 899498
- 868D90
- 838788
Hòa sắc
Bổ túc +180°
- 9CC4D4
Neptune’s Realm
- D8B4A4
≈ Cinnamon Whip
Tương đồng -30° +30°
- 9CC4D4
Neptune’s Realm
- 99C7C6
≈ Pastel Turquoise
- A8BFDC
≈ September Aster
Bộ ba +120° +240°
- 9CC4D4
Neptune’s Realm
- D4B1C4
≈ Tranquil Dusk
- C1BF9B
≈ Esprit
Bổ túc chia +150° +210°
- 9CC4D4
Neptune’s Realm
- DAB1B3
≈ Radiant Rouge
- D0B99B
≈ Cosy Wool
Bộ bốn +90° +180° +270°
- 9CC4D4
Neptune’s Realm
- C8B4D3
≈ Elfin Herb
- D8B4A4
≈ Cinnamon Whip
- B0C4A5
≈ Belladonna’s Leaf
Tương phản và khả năng tiếp cận
Ag
FailTrên nền trắng
WCAG 1.86:1 · APCA Lc 35
Ag
AAATrên nền đen
WCAG 11.26:1 · APCA Lc 67
Màu chữ tốt nhất: #000000
WCAG 11.26:1 (AAA) · APCA Lc 67
Contrast pairs
Đoạn mã
CSS
:root {
--neptune-s-realm: #9cc4d4;
--neptune-s-realm-rgb: 156 196 212;
--neptune-s-realm-oklch: oklch(0.797 0.048 224.2);
}
.element {
color: var(--neptune-s-realm);
background-color: hsl(197 39% 72%);
border-color: oklch(0.797 0.048 224.2);
}Tailwind CSS v4
@theme {
--color-neptune-s-realm: #9cc4d4;
--color-neptune-s-realm-50: #e7f8ff;
--color-neptune-s-realm-100: #d8ecf4;
--color-neptune-s-realm-200: #c0d9e4;
--color-neptune-s-realm-300: #9ebdcb;
--color-neptune-s-realm-400: #80a5b4;
--color-neptune-s-realm-500: #638d9e;
--color-neptune-s-realm-600: #547886;
--color-neptune-s-realm-700: #43606b;
--color-neptune-s-realm-800: #30464e;
--color-neptune-s-realm-900: #203137;
--color-neptune-s-realm-950: #101d21;
}SCSS
$neptune-s-realm: #9cc4d4;
$neptune-s-realm-rgb: 156, 196, 212;
$neptune-s-realm-light: mix(#fff, $neptune-s-realm, 20%);
$neptune-s-realm-dark: mix(#000, $neptune-s-realm, 20%);
.element {
color: $neptune-s-realm;
box-shadow: 0 0 0 2px rgba($neptune-s-realm, 0.35);
}