Nearest named color · #E177B4
#E177B4
Nearest named color: Pink Punk
#E177B4 (rgb(225 119 180), hsl(325 64% 67%), oklch(0.707 0.149 346)) is closest to the named color Pink Punk. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#E177B4
oklch(0.707 0.149 346)
Color conversions
- HEX
- #e177b4
- RGB
- rgb(225 119 180)
- HSL
- hsl(325 64% 67%)
- HWB
- hwb(325 47% 12%)
- OKLCH
- oklch(0.707 0.149 346)
- OKLab
- oklab(0.707 0.145 -0.036)
- CIE Lab
- lab(63.95 47.37 -13.04)
- LCH
- lch(63.95 49.14 344.6)
- CMYK
- cmyk(0% 47% 20% 12%)
Tints · Shades · Tones
Tints
- E585BB
- E993C3
- EDA1CA
- F1AED2
- F4BCD9
- F7C9E1
- F9D7E8
- FCE4F0
- FDF2F7
Shades
- C4679C
- A75785
- 8B476E
- 703858
- 562A44
- 3E1C30
- 27101D
- 12050C
- 020102
Tones
- D879AF
- CE7AA9
- C57CA4
- BC7D9F
- B27E9A
- A87F95
- 9F7F8F
- 95808A
- 8A8085
Color harmonies
Complementary +180°
- E177B4
Pink Punk
- 00BD8B
≈ Slime Girl
Analogous -30° +30°
- E177B4
Pink Punk
- C481DF
≈ Lavender Perceptions
- EE7580
≈ Flower Blossom Pink
Triadic +120° +240°
- E177B4
Pink Punk
- ADA50A
≈ Venom
- 00B1E0
≈ Blue Atoll
Split-complementary +150° +210°
- E177B4
Pink Punk
- 74B551
≈ Turtle Green
- 00B7B9
≈ Cyan Sky
Tetradic +90° +180° +270°
- E177B4
Pink Punk
- D59100
≈ Harvest Eve Gold
- 00BD8B
≈ Slime Girl
- 5EA2FB
≈ Âbi Blue
Contrast & accessibility
Ag
FailOn white
WCAG 2.80:1 · APCA Lc 54
Ag
AAAOn black
WCAG 7.49:1 · APCA Lc 48
Best text color: #000000
WCAG 7.49:1 (AAA) · APCA Lc 48
Contrast pairs
Code snippets
CSS
:root {
--pink-punk: #e177b4;
--pink-punk-rgb: 225 119 180;
--pink-punk-oklch: oklch(0.707 0.149 346);
}
.element {
color: var(--pink-punk);
background-color: hsl(325 64% 67%);
border-color: oklch(0.707 0.149 346);
}Tailwind CSS v4
@theme {
--color-pink-punk: #e177b4;
--color-pink-punk-50: #ffe5fd;
--color-pink-punk-100: #ffd4f1;
--color-pink-punk-200: #ffbbdf;
--color-pink-punk-300: #f097c5;
--color-pink-punk-400: #dc77b1;
--color-pink-punk-500: #c9569b;
--color-pink-punk-600: #a94a83;
--color-pink-punk-700: #883b69;
--color-pink-punk-800: #642a4f;
--color-pink-punk-900: #471c37;
--color-pink-punk-950: #2e0c22;
}SCSS
$pink-punk: #e177b4;
$pink-punk-rgb: 225, 119, 180;
$pink-punk-light: mix(#fff, $pink-punk, 20%);
$pink-punk-dark: mix(#000, $pink-punk, 20%);
.element {
color: $pink-punk;
box-shadow: 0 0 0 2px rgba($pink-punk, 0.35);
}