Nächste benannte Farbe · #9CC6D9
#9CC6D9
Nächste benannte Farbe: Neptune’s Realm
#9CC6D9 (rgb(156 198 217), hsl(199 45% 73%), oklch(0.803 0.052 227.3)) liegt am nächsten an der benannten Farbe Neptune’s Realm. Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
#9CC6D9
oklch(0.803 0.052 227.3)
Farbumrechnungen
- 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%)
Tints · Shades · Tones
Tints
- A6CCDD
- B0D1E1
- BAD7E4
- C4DDE8
- CDE2EC
- D7E8F0
- E1EEF4
- EBF4F7
- F5F9FB
Shades
- 87ACBC
- 7392A1
- 5F7A86
- 4C626C
- 394B53
- 28353B
- 182125
- 090E11
- 010202
Tones
- 99BFD0
- 97B8C7
- 94B1BE
- 91A9B5
- 8FA2AC
- 8C9BA3
- 89959A
- 868E91
- 838789
Farbharmonien
Komplementär +180°
- 9CC6D9
Neptune’s Realm
- DCB5A2
≈ Melted Ice Cream
Analog -30° +30°
- 9CC6D9
Neptune’s Realm
- 98C9CA
≈ Jellyfish Blue
- AAC0E1
≈ Promise
Triadisch +120° +240°
- 9CC6D9
Neptune’s Realm
- D9B2C5
≈ Private-Label Pink
- C2C29B
≈ Green Mist
Geteilt komplementär +150° +210°
- 9CC6D9
Neptune’s Realm
- DEB2B2
≈ Peachskin
- D2BB9A
≈ Pony Tail
Tetradisch +90° +180° +270°
- 9CC6D9
Neptune’s Realm
- CDB5D5
≈ Elfin Herb
- DCB5A2
≈ Melted Ice Cream
- AFC7A6
≈ Freshwater Green
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.82:1 · APCA Lc 34
Ag
AAAAuf Schwarz
WCAG 11.49:1 · APCA Lc 68
Beste Textfarbe: #000000
WCAG 11.49:1 (AAA) · APCA Lc 68
Contrast pairs
Code-Snippets
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);
}