命名颜色 · #522F57
Grape Royale
Grape Royale 即 #522F57：rgb(82 47 87)、hsl(293 30% 26%)、oklch(0.366 0.08 322.4)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Purple mean? → · Grape Royale color name →
#522F57
oklch(0.366 0.08 322.4)
颜色转换
- HEX
- #522f57
- RGB
- rgb(82 47 87)
- HSL
- hsl(293 30% 26%)
- HWB
- hwb(293 18% 66%)
- OKLCH
- oklch(0.366 0.08 322.4)
- OKLab
- oklab(0.366 0.063 -0.049)
- CIE Lab
- lab(25.24 21.88 -17.61)
- LCH
- lch(25.24 28.09 321.2)
- CMYK
- cmyk(6% 46% 0% 66%)
浅色调 · 深色调 · 灰色调
浅色调
- 624267
- 735577
- 836987
- 947D97
- A591A8
- B7A6B9
- C8BCCA
- DAD2DB
- EDE8ED
深色调
- 46274B
- 3B203E
- 2F1933
- 251227
- 1A0C1C
- 110612
- 080308
- 020103
- 000000
灰色调
- 57375B
- 5B3F5F
- 604764
- 654F68
- 69576C
- 6E5F70
- 736774
- 776F78
- 7C787C
配色和谐
互补色 +180°
- 522F57
Grape Royale
- 234920
≈ Cal Poly Pomona Green
类似色 -30° +30°
- 522F57
Grape Royale
- 403665
≈ Minsk
- 5D2B43
≈ Vistoris Lake
三角配色 +120° +240°
- 522F57
Grape Royale
- 523A00
≈ Pineapple
- 00484D
≈ Sherpa Blue
分裂互补色 +150° +210°
- 522F57
Grape Royale
- 404202
≈ Green Not Found
- 004A3B
≈ Aqua Deep
四角配色 +90° +180° +270°
- 522F57
Grape Royale
- 5E3110
≈ Baker’s Chocolate
- 234920
≈ Cal Poly Pomona Green
- 00455F
≈ Loyal Blue
对比度与无障碍
Ag
AAA白底
WCAG 11.03:1 · APCA Lc 95
Ag
Fail黑底
WCAG 1.90:1 · APCA Lc 7
最佳文字颜色: #FFFFFF
WCAG 11.03:1 (AAA) · APCA Lc 95
Contrast pairs
代码片段
CSS
:root {
--grape-royale: #522f57;
--grape-royale-rgb: 82 47 87;
--grape-royale-oklch: oklch(0.366 0.08 322.4);
}
.element {
color: var(--grape-royale);
background-color: hsl(293 30% 26%);
border-color: oklch(0.366 0.08 322.4);
}Tailwind CSS v4
@theme {
--color-grape-royale: #522f57;
--color-grape-royale-50: #ffeeff;
--color-grape-royale-100: #f6dff7;
--color-grape-royale-200: #e6c9e8;
--color-grape-royale-300: #ccaacf;
--color-grape-royale-400: #b58fba;
--color-grape-royale-500: #9f74a5;
--color-grape-royale-600: #87638c;
--color-grape-royale-700: #6c4f70;
--color-grape-royale-800: #4f3953;
--color-grape-royale-900: #37273a;
--color-grape-royale-950: #221524;
}SCSS
$grape-royale: #522f57;
$grape-royale-rgb: 82, 47, 87;
$grape-royale-light: mix(#fff, $grape-royale, 20%);
$grape-royale-dark: mix(#000, $grape-royale, 20%);
.element {
color: $grape-royale;
box-shadow: 0 0 0 2px rgba($grape-royale, 0.35);
}