Couleur nommée la plus proche · #9CC6D9
#9CC6D9
Couleur nommée la plus proche: Neptune’s Realm
#9CC6D9 (rgb(156 198 217), hsl(199 45% 73%), oklch(0.803 0.052 227.3)) est la plus proche de la couleur nommée Neptune’s Realm. Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
#9CC6D9
oklch(0.803 0.052 227.3)
Conversions de couleur
- HEX
- #9cc6d9
- RGB
- rgb(156 198 217)
- HSL
- hsl(199 45% 73%)
- HWB
- hwb(199 61% 15%)
- OKLCH
- oklch(0.803 0.052 227.3)
- OKLab
- oklab(0.803 -0.035 -0.038)
- CIE Lab
- lab(77.33 -11.12 -14.31)
- LCH
- lch(77.33 18.13 232.1)
- CMYK
- cmyk(28% 9% 0% 15%)
Teintes · Ombres · Tons
Teintes
- A6CCDD
- B0D1E1
- BAD7E4
- C4DDE8
- CDE2EC
- D7E8F0
- E1EEF4
- EBF4F7
- F5F9FB
Ombres
- 87ACBC
- 7392A1
- 5F7A86
- 4C626C
- 394B53
- 28353B
- 182125
- 090E11
- 010202
Tons
- 99BFD0
- 97B8C7
- 94B1BE
- 91A9B5
- 8FA2AC
- 8C9BA3
- 89959A
- 868E91
- 838789
Harmonies de couleurs
Complémentaire +180°
- 9CC6D9
Neptune’s Realm
- DCB5A2
≈ Melted Ice Cream
Analogue -30° +30°
- 9CC6D9
Neptune’s Realm
- 98C9CA
≈ Jellyfish Blue
- AAC0E1
≈ Promise
Triadique +120° +240°
- 9CC6D9
Neptune’s Realm
- D9B2C5
≈ Private-Label Pink
- C2C29B
≈ Green Mist
Complémentaire divisée +150° +210°
- 9CC6D9
Neptune’s Realm
- DEB2B2
≈ Peachskin
- D2BB9A
≈ Pony Tail
Tétradique +90° +180° +270°
- 9CC6D9
Neptune’s Realm
- CDB5D5
≈ Elfin Herb
- DCB5A2
≈ Melted Ice Cream
- AFC7A6
≈ Freshwater Green
Contraste et accessibilité
Ag
FailSur blanc
WCAG 1.82:1 · APCA Lc 34
Ag
AAASur noir
WCAG 11.49:1 · APCA Lc 68
Meilleure couleur de texte: #000000
WCAG 11.49:1 (AAA) · APCA Lc 68
Contrast pairs
Extraits de code
CSS
:root {
--neptune-s-realm: #9cc6d9;
--neptune-s-realm-rgb: 156 198 217;
--neptune-s-realm-oklch: oklch(0.803 0.052 227.3);
}
.element {
color: var(--neptune-s-realm);
background-color: hsl(199 45% 73%);
border-color: oklch(0.803 0.052 227.3);
}Tailwind CSS v4
@theme {
--color-neptune-s-realm: #9cc6d9;
--color-neptune-s-realm-50: #e7f8ff;
--color-neptune-s-realm-100: #d7ecf6;
--color-neptune-s-realm-200: #bed9e6;
--color-neptune-s-realm-300: #9dbdcd;
--color-neptune-s-realm-400: #7ea5b7;
--color-neptune-s-realm-500: #618da1;
--color-neptune-s-realm-600: #527888;
--color-neptune-s-realm-700: #42606d;
--color-neptune-s-realm-800: #2e4650;
--color-neptune-s-realm-900: #1f3138;
--color-neptune-s-realm-950: #0f1d22;
}SCSS
$neptune-s-realm: #9cc6d9;
$neptune-s-realm-rgb: 156, 198, 217;
$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);
}