命名颜色 · #83599B
Sonic Plum
Sonic Plum 即 #83599B：rgb(131 89 155)、hsl(278 27% 48%)、oklch(0.536 0.11 312.4)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Purple mean? → · Sonic Plum color name →
#83599B
oklch(0.536 0.11 312.4)
颜色转换
- HEX
- #83599b
- RGB
- rgb(131 89 155)
- HSL
- hsl(278 27% 48%)
- HWB
- hwb(278 35% 39%)
- OKLCH
- oklch(0.536 0.11 312.4)
- OKLab
- oklab(0.536 0.074 -0.081)
- CIE Lab
- lab(44.52 27.19 -29.44)
- LCH
- lch(44.52 40.07 312.7)
- CMYK
- cmyk(15% 43% 0% 39%)
浅色调 · 深色调 · 灰色调
浅色调
- 8F69A5
- 9B79AF
- A789B9
- B399C3
- C0AACD
- CCBBD7
- D9CBE1
- E5DCEB
- F2EEF5
深色调
- 714C86
- 604072
- 4F345E
- 3F284B
- 2F1D39
- 201328
- 120918
- 060309
- 010001
灰色调
- 835D99
- 836296
- 826694
- 826A91
- 826E8E
- 82718C
- 817589
- 817986
- 807C83
配色和谐
互补色 +180°
- 83599B
Sonic Plum
- 547A32
≈ Luscious Lemongrass
类似色 -30° +30°
- 83599B
Sonic Plum
- 6464AB
≈ Blue Iris
- 98517F
≈ Verve Violet
三角配色 +120° +240°
- 83599B
Sonic Plum
- 94610D
≈ Raw Sienna
- 007E7B
≈ Parasailing
分裂互补色 +150° +210°
- 83599B
Sonic Plum
- 7A6F07
≈ Sunlit Kelp Green
- 17815A
≈ Irish Beauty
四角配色 +90° +180° +270°
对比度与无障碍
Ag
AA白底
WCAG 5.43:1 · APCA Lc 77
Ag
Fail黑底
WCAG 3.86:1 · APCA Lc 25
最佳文字颜色: #FFFFFF
WCAG 5.43:1 (AA) · APCA Lc 77
Contrast pairs
代码片段
CSS
:root {
--sonic-plum: #83599b;
--sonic-plum-rgb: 131 89 155;
--sonic-plum-oklch: oklch(0.536 0.11 312.4);
}
.element {
color: var(--sonic-plum);
background-color: hsl(278 27% 48%);
border-color: oklch(0.536 0.11 312.4);
}Tailwind CSS v4
@theme {
--color-sonic-plum: #83599b;
--color-sonic-plum-50: #ffecff;
--color-sonic-plum-100: #f6deff;
--color-sonic-plum-200: #e6c7f6;
--color-sonic-plum-300: #cca7df;
--color-sonic-plum-400: #b58bcd;
--color-sonic-plum-500: #9f6fba;
--color-sonic-plum-600: #865e9d;
--color-sonic-plum-700: #6c4b7e;
--color-sonic-plum-800: #4e375f;
--color-sonic-plum-900: #362542;
--color-sonic-plum-950: #21142b;
}SCSS
$sonic-plum: #83599b;
$sonic-plum-rgb: 131, 89, 155;
$sonic-plum-light: mix(#fff, $sonic-plum, 20%);
$sonic-plum-dark: mix(#000, $sonic-plum, 20%);
.element {
color: $sonic-plum;
box-shadow: 0 0 0 2px rgba($sonic-plum, 0.35);
}