Najbliższy nazwany kolor · #E177B5
#E177B5
Najbliższy nazwany kolor: Pink Punk
#E177B5 (rgb(225 119 181), hsl(325 64% 67%), oklch(0.707 0.15 345.5)) jest najbliższy nazwanemu kolorowi Pink Punk. Zobacz odcienie, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
#E177B5
oklch(0.707 0.15 345.5)
Konwersje koloru
- HEX
- #e177b5
- RGB
- rgb(225 119 181)
- HSL
- hsl(325 64% 67%)
- HWB
- hwb(325 47% 12%)
- OKLCH
- oklch(0.707 0.15 345.5)
- OKLab
- oklab(0.707 0.145 -0.037)
- CIE Lab
- lab(63.98 47.48 -13.56)
- LCH
- lch(63.98 49.38 344.1)
- CMYK
- cmyk(0% 47% 20% 12%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- E585BC
- E993C4
- EDA1CB
- F1AED2
- F4BCDA
- F7C9E1
- F9D7E9
- FCE4F0
- FDF2F7
Odcienie ciemniejsze
- C4679D
- A75786
- 8B476F
- 703859
- 562A44
- 3E1C30
- 27101D
- 12050C
- 020102
Tony
- D879B0
- CE7AAA
- C57CA5
- BC7DA0
- B27E9A
- A87F95
- 9F7F90
- 95808A
- 8A8085
Harmonie kolorów
Komplementarna +180°
- E177B5
Pink Punk
- 00BD8A
≈ Slime Girl
Analogowa -30° +30°
- E177B5
Pink Punk
- C481E0
≈ Lavender Perceptions
- EF7581
≈ Flower Blossom Pink
Triada +120° +240°
- E177B5
Pink Punk
- AEA504
≈ Venom
- 00B1E0
≈ Blue Atoll
Komplementarna rozszczepiona +150° +210°
- E177B5
Pink Punk
- 75B550
≈ Turtle Green
- 00B7B8
≈ Swagger
Tetrada +90° +180° +270°
- E177B5
Pink Punk
- D59100
≈ Harvest Eve Gold
- 00BD8A
≈ Slime Girl
- 5DA2FC
≈ Âbi Blue
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.79:1 · APCA Lc 53
Ag
AAANa czerni
WCAG 7.50:1 · APCA Lc 48
Najlepszy kolor tekstu: #000000
WCAG 7.50:1 (AAA) · APCA Lc 48
Contrast pairs
Fragmenty kodu
CSS
:root {
--pink-punk: #e177b5;
--pink-punk-rgb: 225 119 181;
--pink-punk-oklch: oklch(0.707 0.15 345.5);
}
.element {
color: var(--pink-punk);
background-color: hsl(325 64% 67%);
border-color: oklch(0.707 0.15 345.5);
}Tailwind CSS v4
@theme {
--color-pink-punk: #e177b5;
--color-pink-punk-50: #ffe5fd;
--color-pink-punk-100: #ffd4f1;
--color-pink-punk-200: #ffbae0;
--color-pink-punk-300: #f097c5;
--color-pink-punk-400: #dc77b2;
--color-pink-punk-500: #c8569c;
--color-pink-punk-600: #a94a84;
--color-pink-punk-700: #883b69;
--color-pink-punk-800: #642a4f;
--color-pink-punk-900: #471c37;
--color-pink-punk-950: #2e0c22;
}SCSS
$pink-punk: #e177b5;
$pink-punk-rgb: 225, 119, 181;
$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);
}