最接近的命名颜色 · #574B8D
#574B8D
最接近的命名颜色: Twilight
#574B8D（rgb(87 75 141)、hsl(251 31% 42%)、oklch(0.456 0.105 289.9)）最接近命名颜色 Twilight。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
#574B8D
oklch(0.456 0.105 289.9)
颜色转换
- HEX
- #574b8d
- RGB
- rgb(87 75 141)
- HSL
- hsl(251 31% 42%)
- HWB
- hwb(251 29% 45%)
- OKLCH
- oklch(0.456 0.105 289.9)
- OKLab
- oklab(0.456 0.036 -0.099)
- CIE Lab
- lab(35.56 17.87 -35.47)
- LCH
- lch(35.56 39.72 296.7)
- CMYK
- cmyk(38% 47% 0% 45%)
浅色调 · 深色调 · 灰色调
浅色调
- 665C99
- 756DA4
- 857FB0
- 9590BB
- A6A2C7
- B7B4D2
- C9C7DD
- DAD9E9
- EDECF4
深色调
- 4B407A
- 3E3567
- 332B55
- 272144
- 1C1733
- 120E23
- 080614
- 030207
- 000001
灰色调
- 5B518C
- 5E568B
- 625C8A
- 666189
- 6A6688
- 6F6C87
- 737185
- 777684
- 7C7B82
配色和谐
互补色 +180°
- 574B8D
Twilight
- 5B5B00
≈ Greensboro
类似色 -30° +30°
- 574B8D
Twilight
- 325691
≈ B’dazzled Blue
- 70427B
≈ Pageantry Purple
三角配色 +120° +240°
- 574B8D
Twilight
- 844318
≈ Russet
- 00674F
≈ Peacock Green
分裂互补色 +150° +210°
- 574B8D
Twilight
- 725000
≈ Lucky Brown
- 346529
≈ Gameboy Shade
四角配色 +90° +180° +270°
对比度与无障碍
Ag
AAA白底
WCAG 7.50:1 · APCA Lc 86
Ag
Fail黑底
WCAG 2.79:1 · APCA Lc 16
最佳文字颜色: #FFFFFF
WCAG 7.50:1 (AAA) · APCA Lc 86
Contrast pairs
代码片段
CSS
:root {
--twilight: #574b8d;
--twilight-rgb: 87 75 141;
--twilight-oklch: oklch(0.456 0.105 289.9);
}
.element {
color: var(--twilight);
background-color: hsl(251 31% 42%);
border-color: oklch(0.456 0.105 289.9);
}Tailwind CSS v4
@theme {
--color-twilight: #574b8d;
--color-twilight-50: #f5f0ff;
--color-twilight-100: #e8e2ff;
--color-twilight-200: #d4cdfe;
--color-twilight-300: #b8aee9;
--color-twilight-400: #9d94d9;
--color-twilight-500: #8579c7;
--color-twilight-600: #7167a8;
--color-twilight-700: #5a5287;
--color-twilight-800: #413c65;
--color-twilight-900: #2d2947;
--color-twilight-950: #1a172e;
}SCSS
$twilight: #574b8d;
$twilight-rgb: 87, 75, 141;
$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);
}