命名颜色 · #4D3466
Petunia
Petunia 即 #4D3466：rgb(77 52 102)、hsl(270 32% 30%)、oklch(0.377 0.087 305.7)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Purple mean? → · Petunia color name →
#4D3466
oklch(0.377 0.087 305.7)
颜色转换
- HEX
- #4d3466
- RGB
- rgb(77 52 102)
- HSL
- hsl(270 32% 30%)
- HWB
- hwb(270 20% 60%)
- OKLCH
- oklch(0.377 0.087 305.7)
- OKLab
- oklab(0.377 0.051 -0.071)
- CIE Lab
- lab(26.5 19.87 -25.45)
- LCH
- lch(26.5 32.29 308)
- CMYK
- cmyk(25% 49% 0% 60%)
浅色调 · 深色调 · 灰色调
浅色调
- 5D4775
- 6D5984
- 7E6D93
- 9080A2
- A194B1
- B3A9C0
- C6BED0
- D9D3DF
- ECE9EF
深色调
- 422C58
- 37244A
- 2C1C3C
- 22152F
- 180E23
- 0F0717
- 07030C
- 020104
- 000000
灰色调
- 523C69
- 57436C
- 5C4B6F
- 615271
- 665A74
- 6B6177
- 706979
- 75717B
- 7B787E
配色和谐
互补色 +180°
- 4D3466
Petunia
- 36490C
≈ Treetop Cathedral
类似色 -30° +30°
- 4D3466
Petunia
- 353C6F
≈ Spirit Blue
- 5D2E53
≈ Japanese Violet
三角配色 +120° +240°
- 4D3466
Petunia
- 5F3700
≈ Brown
- 004D47
≈ Swamp Mausoleum
分裂互补色 +150° +210°
- 4D3466
Petunia
- 4E4100
≈ Roman Bronze
- 094F2D
≈ Troll Green
四角配色 +90° +180° +270°
对比度与无障碍
Ag
AAA白底
WCAG 10.50:1 · APCA Lc 94
Ag
Fail黑底
WCAG 1.99:1 · APCA Lc 8
最佳文字颜色: #FFFFFF
WCAG 10.50:1 (AAA) · APCA Lc 94
Contrast pairs
代码片段
CSS
:root {
--petunia: #4d3466;
--petunia-rgb: 77 52 102;
--petunia-oklch: oklch(0.377 0.087 305.7);
}
.element {
color: var(--petunia);
background-color: hsl(270 32% 30%);
border-color: oklch(0.377 0.087 305.7);
}Tailwind CSS v4
@theme {
--color-petunia: #4d3466;
--color-petunia-50: #fcefff;
--color-petunia-100: #f0e1ff;
--color-petunia-200: #decbf2;
--color-petunia-300: #c3acda;
--color-petunia-400: #ab91c8;
--color-petunia-500: #9477b4;
--color-petunia-600: #7d6598;
--color-petunia-700: #64507a;
--color-petunia-800: #493b5b;
--color-petunia-900: #322840;
--color-petunia-950: #1e1629;
}SCSS
$petunia: #4d3466;
$petunia-rgb: 77, 52, 102;
$petunia-light: mix(#fff, $petunia, 20%);
$petunia-dark: mix(#000, $petunia, 20%);
.element {
color: $petunia;
box-shadow: 0 0 0 2px rgba($petunia, 0.35);
}