Nearest named color · #554D8F
#554D8F
Nearest named color: Twilight
#554D8F (rgb(85 77 143), hsl(247 30% 43%), oklch(0.46 0.105 287.1)) is closest to the named color Twilight. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#554D8F
oklch(0.46 0.105 287.1)
Color conversions
- HEX
- #554d8f
- RGB
- rgb(85 77 143)
- HSL
- hsl(247 30% 43%)
- HWB
- hwb(247 30% 44%)
- OKLCH
- oklch(0.46 0.105 287.1)
- OKLab
- oklab(0.46 0.031 -0.1)
- CIE Lab
- lab(36 16.51 -36)
- LCH
- lch(36 39.61 294.6)
- CMYK
- cmyk(41% 46% 0% 44%)
Tints · Shades · Tones
Tints
- 645E9A
- 736FA6
- 8380B1
- 9492BD
- A5A3C8
- B6B5D3
- C8C7DE
- DADAE9
- ECECF4
Shades
- 49427C
- 3D3769
- 312C57
- 262245
- 1C1834
- 110F24
- 080715
- 020207
- 000001
Tones
- 59538E
- 5D588D
- 615D8C
- 65628A
- 696789
- 6E6C88
- 727186
- 777684
- 7B7B82
Color harmonies
Complementary +180°
- 554D8F
Twilight
- 5F5B00
≈ Greensboro
Analogous -30° +30°
- 554D8F
Twilight
- 2F5891
≈ B’dazzled Blue
- 6F437E
≈ Plum Jam
Triadic +120° +240°
- 554D8F
Twilight
- 86431D
≈ Honey Garlic Beef
- 00684D
≈ Bottle Green
Split-complementary +150° +210°
- 554D8F
Twilight
- 765000
≈ Lucky Brown
- 3A6526
≈ Radical Green
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
AAAOn white
WCAG 7.38:1 · APCA Lc 86
Ag
FailOn black
WCAG 2.84:1 · APCA Lc 17
Best text color: #FFFFFF
WCAG 7.38:1 (AAA) · APCA Lc 86
Contrast pairs
Code snippets
CSS
:root {
--twilight: #554d8f;
--twilight-rgb: 85 77 143;
--twilight-oklch: oklch(0.46 0.105 287.1);
}
.element {
color: var(--twilight);
background-color: hsl(247 30% 43%);
border-color: oklch(0.46 0.105 287.1);
}Tailwind CSS v4
@theme {
--color-twilight: #554d8f;
--color-twilight-50: #f3f1ff;
--color-twilight-100: #e6e3ff;
--color-twilight-200: #d2ceff;
--color-twilight-300: #b5afea;
--color-twilight-400: #9a95da;
--color-twilight-500: #827ac8;
--color-twilight-600: #6e68a9;
--color-twilight-700: #585387;
--color-twilight-800: #3f3d65;
--color-twilight-900: #2b2a47;
--color-twilight-950: #19172e;
}SCSS
$twilight: #554d8f;
$twilight-rgb: 85, 77, 143;
$twilight-light: mix(#fff, $twilight, 20%);
$twilight-dark: mix(#000, $twilight, 20%);
.element {
color: $twilight;
box-shadow: 0 0 0 2px rgba($twilight, 0.35);
}