命名颜色 · #A552E6
Lightish Purple
Lightish Purple 即 #A552E6：rgb(165 82 230)、hsl(274 75% 61%)、oklch(0.608 0.218 306.8)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Purple mean? → · Lightish Purple color name →
#A552E6
oklch(0.608 0.218 306.8)
颜色转换
- HEX
- #a552e6
- RGB
- rgb(165 82 230)
- HSL
- hsl(274 75% 61%)
- HWB
- hwb(274 32% 10%)
- OKLCH
- oklch(0.608 0.218 306.8)
- OKLab
- oklab(0.608 0.131 -0.175)
- CIE Lab
- lab(50.94 53.91 -62.26)
- LCH
- lch(50.94 82.36 310.9)
- CMYK
- cmyk(28% 64% 0% 10%)
浅色调 · 深色调 · 灰色调
浅色调
- AE66EA
- B679ED
- BF8BF1
- C89CF4
- D1ADF6
- DABDF9
- E3CEFB
- EDDEFD
- F6EFFE
深色调
- 8F46C8
- 793BAB
- 652F8E
- 512573
- 3D1A59
- 2B1140
- 1A0828
- 0A0213
- 010003
灰色调
- A159DC
- 9E60D2
- 9A66C8
- 966BBE
- 926FB4
- 8F73AA
- 8B77A0
- 877A96
- 847D8B
配色和谐
互补色 +180°
- A552E6
Lightish Purple
- 6A9200
≈ Canopy
类似色 -30° +30°
- A552E6
Lightish Purple
- 686BFF
≈ Blue Genie
- CD3CB1
≈ Purple Pink
三角配色 +120° +240°
- A552E6
Lightish Purple
- B77000
≈ Sweet Mulled Cider
- 00978D
≈ Intense Teal
分裂互补色 +150° +210°
- A552E6
Lightish Purple
- 988200
≈ Thicket Green
- 009C5E
≈ Shamrock
四角配色 +90° +180° +270°
- A552E6
Lightish Purple
- E24200
≈ Macharius Solar Orange
- 6A9200
≈ Canopy
- 0092AD
≈ Cape Pond
对比度与无障碍
Ag
Fail白底
WCAG 4.24:1 · APCA Lc 69
Ag
AA黑底
WCAG 4.94:1 · APCA Lc 33
最佳文字颜色: #000000
WCAG 4.94:1 (AA) · APCA Lc 33
Contrast pairs
代码片段
CSS
:root {
--lightish-purple: #a552e6;
--lightish-purple-rgb: 165 82 230;
--lightish-purple-oklch: oklch(0.608 0.218 306.8);
}
.element {
color: var(--lightish-purple);
background-color: hsl(274 75% 61%);
border-color: oklch(0.608 0.218 306.8);
}Tailwind CSS v4
@theme {
--color-lightish-purple: #a552e6;
--color-lightish-purple-50: #ffe5ff;
--color-lightish-purple-100: #fdd4ff;
--color-lightish-purple-200: #efbaff;
--color-lightish-purple-300: #d895ff;
--color-lightish-purple-400: #c074ff;
--color-lightish-purple-500: #ac4df4;
--color-lightish-purple-600: #9143cd;
--color-lightish-purple-700: #7535a5;
--color-lightish-purple-800: #54267d;
--color-lightish-purple-900: #3b1a59;
--color-lightish-purple-950: #25093c;
}SCSS
$lightish-purple: #a552e6;
$lightish-purple-rgb: 165, 82, 230;
$lightish-purple-light: mix(#fff, $lightish-purple, 20%);
$lightish-purple-dark: mix(#000, $lightish-purple, 20%);
.element {
color: $lightish-purple;
box-shadow: 0 0 0 2px rgba($lightish-purple, 0.35);
}