Benannte Farbe · #484A80
Highlands Twilight
Highlands Twilight ist #484A80: rgb(72 74 128), hsl(238 28% 39%), oklch(0.433 0.088 280.4). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Blue mean? → · Highlands Twilight color name →
#484A80
oklch(0.433 0.088 280.4)
Farbumrechnungen
- HEX
- #484a80
- RGB
- rgb(72 74 128)
- HSL
- hsl(238 28% 39%)
- HWB
- hwb(238 28% 50%)
- OKLCH
- oklch(0.433 0.088 280.4)
- OKLab
- oklab(0.433 0.016 -0.087)
- CIE Lab
- lab(33.26 10.63 -31.23)
- LCH
- lch(33.26 32.99 288.8)
- CMYK
- cmyk(44% 42% 0% 50%)
Tints · Shades · Tones
Tints
- 585B8D
- 696C99
- 7A7DA6
- 8C8FB3
- 9EA1BF
- B0B3CC
- C4C6D9
- D7D9E5
- EBECF2
Shades
- 3D3F6E
- 33355D
- 292A4D
- 1F203D
- 16172E
- 0D0E1F
- 060612
- 020206
- 000001
Tones
- 4D5080
- 525581
- 585B81
- 5D6081
- 636581
- 686B81
- 6E7081
- 747581
- 7A7B81
Farbharmonien
Komplementär +180°
- 484A80
Highlands Twilight
- 5C5104
≈ Douro
Analog -30° +30°
- 484A80
Highlands Twilight
- 27537F
≈ Blueberry Twist
- 604275
≈ Drifting Violet
Triadisch +120° +240°
- 484A80
Highlands Twilight
- 793E29
≈ Stone Age Queen
- 145F40
≈ Greenbriar
Geteilt komplementär +150° +210°
- 484A80
Highlands Twilight
- 6F470B
≈ Antique Bronze
- 405A22
≈ Obscure Olive
Tetradisch +90° +180° +270°
- 484A80
Highlands Twilight
- 793A45
≈ Cordova Burgundy
- 5C5104
≈ Douro
- 005D5A
≈ Dark Turquoise
Kontrast & Barrierefreiheit
Ag
AAAAuf Weiß
WCAG 8.18:1 · APCA Lc 88
Ag
FailAuf Schwarz
WCAG 2.56:1 · APCA Lc 14
Beste Textfarbe: #FFFFFF
WCAG 8.18:1 (AAA) · APCA Lc 88
Contrast pairs
Code-Snippets
CSS
:root {
--highlands-twilight: #484a80;
--highlands-twilight-rgb: 72 74 128;
--highlands-twilight-oklch: oklch(0.433 0.088 280.4);
}
.element {
color: var(--highlands-twilight);
background-color: hsl(238 28% 39%);
border-color: oklch(0.433 0.088 280.4);
}Tailwind CSS v4
@theme {
--color-highlands-twilight: #484a80;
--color-highlands-twilight-50: #f1f3ff;
--color-highlands-twilight-100: #e3e5ff;
--color-highlands-twilight-200: #ced0fa;
--color-highlands-twilight-300: #b0b2e4;
--color-highlands-twilight-400: #9499d2;
--color-highlands-twilight-500: #7b7fc0;
--color-highlands-twilight-600: #686ca2;
--color-highlands-twilight-700: #535682;
--color-highlands-twilight-800: #3b3f61;
--color-highlands-twilight-900: #292b44;
--color-highlands-twilight-950: #17192c;
}SCSS
$highlands-twilight: #484a80;
$highlands-twilight-rgb: 72, 74, 128;
$highlands-twilight-light: mix(#fff, $highlands-twilight, 20%);
$highlands-twilight-dark: mix(#000, $highlands-twilight, 20%);
.element {
color: $highlands-twilight;
box-shadow: 0 0 0 2px rgba($highlands-twilight, 0.35);
}