命名颜色 · #8F629A
Aster Violetta
Aster Violetta 即 #8F629A：rgb(143 98 154)、hsl(288 22% 49%)、oklch(0.564 0.099 319.6)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Purple mean? → · Aster Violetta color name →
#8F629A
oklch(0.564 0.099 319.6)
颜色转换
- HEX
- #8f629a
- RGB
- rgb(143 98 154)
- HSL
- hsl(288 22% 49%)
- HWB
- hwb(288 38% 40%)
- OKLCH
- oklch(0.564 0.099 319.6)
- OKLab
- oklab(0.564 0.075 -0.064)
- CIE Lab
- lab(48.04 26.24 -23.27)
- LCH
- lch(48.04 35.07 318.4)
- CMYK
- cmyk(7% 36% 0% 40%)
浅色调 · 深色调 · 灰色调
浅色调
- 9A71A4
- A580AE
- B08FB8
- BB9FC2
- C6AECC
- D2BED6
- DDCEE0
- E8DEEB
- F4EFF5
深色调
- 7C5485
- 694771
- 573A5E
- 452D4B
- 342139
- 241627
- 150B17
- 070309
- 010001
灰色调
- 8E6598
- 8C6995
- 8B6C93
- 8A6F90
- 88728E
- 87758B
- 857888
- 837A86
- 827D83
配色和谐
互补色 +180°
- 8F629A
Aster Violetta
- 56844A
≈ Shepherd’s Green
类似色 -30° +30°
- 8F629A
Aster Violetta
- 756BAC
≈ Clear Mauve
- A15C7E
≈ Rose Wine
三角配色 +120° +240°
- 8F629A
Aster Violetta
- 946E28
≈ Mulberry Brown
- 00868B
≈ Totally Teal
分裂互补色 +150° +210°
- 8F629A
Aster Violetta
- 7A7A2E
≈ Ripe Green
- 28886C
≈ Elf
四角配色 +90° +180° +270°
- 8F629A
Aster Violetta
- A4633E
≈ Wet Adobe
- 56844A
≈ Shepherd’s Green
- 2680A4
≈ Blue Paisley
对比度与无障碍
Ag
AA白底
WCAG 4.79:1 · APCA Lc 73
Ag
Fail黑底
WCAG 4.38:1 · APCA Lc 29
最佳文字颜色: #FFFFFF
WCAG 4.79:1 (AA) · APCA Lc 73
Contrast pairs
代码片段
CSS
:root {
--aster-violetta: #8f629a;
--aster-violetta-rgb: 143 98 154;
--aster-violetta-oklch: oklch(0.564 0.099 319.6);
}
.element {
color: var(--aster-violetta);
background-color: hsl(288 22% 49%);
border-color: oklch(0.564 0.099 319.6);
}Tailwind CSS v4
@theme {
--color-aster-violetta: #8f629a;
--color-aster-violetta-50: #ffecff;
--color-aster-violetta-100: #f8defc;
--color-aster-violetta-200: #e9c7ee;
--color-aster-violetta-300: #cfa7d6;
--color-aster-violetta-400: #b88cc3;
--color-aster-violetta-500: #a370af;
--color-aster-violetta-600: #895f94;
--color-aster-violetta-700: #6e4c77;
--color-aster-violetta-800: #503759;
--color-aster-violetta-900: #38263e;
--color-aster-violetta-950: #231427;
}SCSS
$aster-violetta: #8f629a;
$aster-violetta-rgb: 143, 98, 154;
$aster-violetta-light: mix(#fff, $aster-violetta, 20%);
$aster-violetta-dark: mix(#000, $aster-violetta, 20%);
.element {
color: $aster-violetta;
box-shadow: 0 0 0 2px rgba($aster-violetta, 0.35);
}