Named color · #4D3466
Petunia
Petunia is #4D3466: rgb(77 52 102), hsl(270 32% 30%), oklch(0.377 0.087 305.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Purple mean? → · Petunia color name →
#4D3466
oklch(0.377 0.087 305.7)
Color conversions
- 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%)
Tints · Shades · Tones
Tints
- 5D4775
- 6D5984
- 7E6D93
- 9080A2
- A194B1
- B3A9C0
- C6BED0
- D9D3DF
- ECE9EF
Shades
- 422C58
- 37244A
- 2C1C3C
- 22152F
- 180E23
- 0F0717
- 07030C
- 020104
- 000000
Tones
- 523C69
- 57436C
- 5C4B6F
- 615271
- 665A74
- 6B6177
- 706979
- 75717B
- 7B787E
Color harmonies
Complementary +180°
- 4D3466
Petunia
- 36490C
≈ Treetop Cathedral
Analogous -30° +30°
- 4D3466
Petunia
- 353C6F
≈ Spirit Blue
- 5D2E53
≈ Japanese Violet
Triadic +120° +240°
- 4D3466
Petunia
- 5F3700
≈ Brown
- 004D47
≈ Swamp Mausoleum
Split-complementary +150° +210°
- 4D3466
Petunia
- 4E4100
≈ Roman Bronze
- 094F2D
≈ Troll Green
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
AAAOn white
WCAG 10.50:1 · APCA Lc 94
Ag
FailOn black
WCAG 1.99:1 · APCA Lc 8
Best text color: #FFFFFF
WCAG 10.50:1 (AAA) · APCA Lc 94
Contrast pairs
Code snippets
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);
}