Color con nombre más cercano · #E177B4
#E177B4
Color con nombre más cercano: Pink Punk
#E177B4 (rgb(225 119 180), hsl(325 64% 67%), oklch(0.707 0.149 346)) se parece más al color con nombre Pink Punk. Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
#E177B4
oklch(0.707 0.149 346)
Conversiones de color
- 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%)
Tintes · Sombras · Tonos
Tintes
- E585BB
- E993C3
- EDA1CA
- F1AED2
- F4BCD9
- F7C9E1
- F9D7E8
- FCE4F0
- FDF2F7
Sombras
- C4679C
- A75785
- 8B476E
- 703858
- 562A44
- 3E1C30
- 27101D
- 12050C
- 020102
Tonos
- D879AF
- CE7AA9
- C57CA4
- BC7D9F
- B27E9A
- A87F95
- 9F7F8F
- 95808A
- 8A8085
Armonías de color
Complementario +180°
- E177B4
Pink Punk
- 00BD8B
≈ Slime Girl
Análogo -30° +30°
- E177B4
Pink Punk
- C481DF
≈ Lavender Perceptions
- EE7580
≈ Flower Blossom Pink
Triádico +120° +240°
- E177B4
Pink Punk
- ADA50A
≈ Venom
- 00B1E0
≈ Blue Atoll
Complementario dividido +150° +210°
- E177B4
Pink Punk
- 74B551
≈ Turtle Green
- 00B7B9
≈ Cyan Sky
Tetrádico +90° +180° +270°
- E177B4
Pink Punk
- D59100
≈ Harvest Eve Gold
- 00BD8B
≈ Slime Girl
- 5EA2FB
≈ Âbi Blue
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 2.80:1 · APCA Lc 54
Ag
AAASobre negro
WCAG 7.49:1 · APCA Lc 48
Mejor color de texto: #000000
WCAG 7.49:1 (AAA) · APCA Lc 48
Contrast pairs
Fragmentos de código
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);
}