En yakın adlandırılmış renk · #9CC4D4
#9CC4D4
En yakın adlandırılmış renk: Neptune’s Realm
#9CC4D4 (rgb(156 196 212), hsl(197 39% 72%), oklch(0.797 0.048 224.2)) en çok Neptune’s Realm adlı renge yakındır. Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
#9CC4D4
oklch(0.797 0.048 224.2)
Renk dönüşümleri
- 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%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- A6CAD8
- B0D0DD
- BAD6E1
- C4DBE5
- CDE1EA
- D7E7EE
- E1EDF2
- EBF3F6
- F5F9FB
Koyu tonlar
- 87AAB8
- 73919D
- 5F7883
- 4C6169
- 394A51
- 28353A
- 182124
- 090E10
- 010202
Gri tonlar
- 99BDCB
- 97B6C3
- 94AFBA
- 91A8B2
- 8FA1A9
- 8C9BA1
- 899498
- 868D90
- 838788
Renk uyumları
Tamamlayıcı +180°
- 9CC4D4
Neptune’s Realm
- D8B4A4
≈ Cinnamon Whip
Analog -30° +30°
- 9CC4D4
Neptune’s Realm
- 99C7C6
≈ Pastel Turquoise
- A8BFDC
≈ September Aster
Üçlü +120° +240°
- 9CC4D4
Neptune’s Realm
- D4B1C4
≈ Tranquil Dusk
- C1BF9B
≈ Esprit
Bölünmüş tamamlayıcı +150° +210°
- 9CC4D4
Neptune’s Realm
- DAB1B3
≈ Radiant Rouge
- D0B99B
≈ Cosy Wool
Dörtlü +90° +180° +270°
- 9CC4D4
Neptune’s Realm
- C8B4D3
≈ Elfin Herb
- D8B4A4
≈ Cinnamon Whip
- B0C4A5
≈ Belladonna’s Leaf
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.86:1 · APCA Lc 35
Ag
AAASiyah üzerinde
WCAG 11.26:1 · APCA Lc 67
En iyi metin rengi: #000000
WCAG 11.26:1 (AAA) · APCA Lc 67
Contrast pairs
Kod parçacıkları
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);
}