Benannte Farbe · #4F5B93
Nightly Silhouette
Nightly Silhouette ist #4F5B93: rgb(79 91 147), hsl(229 30% 44%), oklch(0.487 0.091 273.4). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Blue mean? → · Nightly Silhouette color name →
#4F5B93
oklch(0.487 0.091 273.4)
Farbumrechnungen
- HEX
- #4f5b93
- RGB
- rgb(79 91 147)
- HSL
- hsl(229 30% 44%)
- HWB
- hwb(229 31% 42%)
- OKLCH
- oklch(0.487 0.091 273.4)
- OKLab
- oklab(0.487 0.005 -0.091)
- CIE Lab
- lab(39.59 7.29 -32.8)
- LCH
- lch(39.59 33.6 282.5)
- CMYK
- cmyk(46% 38% 0% 42%)
Tints · Shades · Tones
Tints
- 5F6B9E
- 6F7AA9
- 808AB4
- 919ABF
- A2AAC9
- B4BBD4
- C6CCDF
- D9DDEA
- ECEEF4
Shades
- 444E7F
- 38416C
- 2E3559
- 232947
- 191E36
- 101325
- 070916
- 020308
- 000001
Tones
- 545F92
- 586390
- 5D678E
- 626A8D
- 676E8B
- 6C7289
- 717587
- 767985
- 7B7D82
Farbharmonien
Komplementär +180°
- 4F5B93
Nightly Silhouette
- 715E14
≈ Hot Mustard
Analog -30° +30°
- 4F5B93
Nightly Silhouette
- 2A658F
≈ Starry Night
- 6A528A
≈ Zimidar
Triadisch +120° +240°
- 4F5B93
Nightly Silhouette
- 8B4B3D
≈ Spiced Red
- 306E47
≈ Arcala Green
Geteilt komplementär +150° +210°
- 4F5B93
Nightly Silhouette
- 835321
≈ Precious Copper
- 556829
≈ Bimi Green
Tetradisch +90° +180° +270°
- 4F5B93
Nightly Silhouette
- 8A485A
≈ Dull Magenta
- 715E14
≈ Hot Mustard
- 006F64
≈ Deep Pacific
Kontrast & Barrierefreiheit
Ag
AAAuf Weiß
WCAG 6.46:1 · APCA Lc 82
Ag
FailAuf Schwarz
WCAG 3.25:1 · APCA Lc 20
Beste Textfarbe: #FFFFFF
WCAG 6.46:1 (AA) · APCA Lc 82
Contrast pairs
Code-Snippets
CSS
:root {
--nightly-silhouette: #4f5b93;
--nightly-silhouette-rgb: 79 91 147;
--nightly-silhouette-oklch: oklch(0.487 0.091 273.4);
}
.element {
color: var(--nightly-silhouette);
background-color: hsl(229 30% 44%);
border-color: oklch(0.487 0.091 273.4);
}Tailwind CSS v4
@theme {
--color-nightly-silhouette: #4f5b93;
--color-nightly-silhouette-50: #edf4ff;
--color-nightly-silhouette-100: #dfe6ff;
--color-nightly-silhouette-200: #c9d2fc;
--color-nightly-silhouette-300: #aab4e7;
--color-nightly-silhouette-400: #8d9bd5;
--color-nightly-silhouette-500: #7381c3;
--color-nightly-silhouette-600: #616ea4;
--color-nightly-silhouette-700: #4e5884;
--color-nightly-silhouette-800: #374062;
--color-nightly-silhouette-900: #252c45;
--color-nightly-silhouette-950: #14192d;
}SCSS
$nightly-silhouette: #4f5b93;
$nightly-silhouette-rgb: 79, 91, 147;
$nightly-silhouette-light: mix(#fff, $nightly-silhouette, 20%);
$nightly-silhouette-dark: mix(#000, $nightly-silhouette, 20%);
.element {
color: $nightly-silhouette;
box-shadow: 0 0 0 2px rgba($nightly-silhouette, 0.35);
}