Najbliższy nazwany kolor · #CA83BC
#CA83BC
Najbliższy nazwany kolor: Pink Punk
#CA83BC (rgb(202 131 188), hsl(312 40% 65%), oklch(0.701 0.114 334.1)) jest najbliższy nazwanemu kolorowi Pink Punk. Zobacz odcienie, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
#CA83BC
oklch(0.701 0.114 334.1)
Konwersje koloru
- HEX
- #ca83bc
- RGB
- rgb(202 131 188)
- HSL
- hsl(312 40% 65%)
- HWB
- hwb(312 51% 21%)
- OKLCH
- oklch(0.701 0.114 334.1)
- OKLab
- oklab(0.701 0.103 -0.05)
- CIE Lab
- lab(63.72 34.45 -18.26)
- LCH
- lch(63.72 38.99 332.1)
- CMYK
- cmyk(0% 35% 7% 21%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- D08FC3
- D69CC9
- DBA8D0
- E1B4D7
- E6C1DE
- EBCDE4
- F0D9EB
- F5E6F2
- FAF2F8
Odcienie ciemniejsze
- AF71A3
- 95608B
- 7C4F73
- 643F5D
- 4D2F47
- 372032
- 22121F
- 0F060D
- 020102
Tony
- C383B6
- BC83B0
- B483AA
- AD83A4
- A6839E
- 9E8298
- 978292
- 8F818C
- 888186
Harmonie kolorów
Komplementarna +180°
- CA83BC
Pink Punk
- 60B47E
≈ Jade Cream
Analogowa -30° +30°
- CA83BC
Pink Punk
- AE8CD9
≈ Middy’s Purple
- DA7F96
≈ I Love You Pink
Triada +120° +240°
- CA83BC
Pink Punk
- B69D42
≈ Tiki Torch
- 2AB1CA
≈ Aquarius
Komplementarna rozszczepiona +150° +210°
- CA83BC
Pink Punk
- 90AB58
≈ Chelsea Cucumber
- 2CB6A7
≈ Message Green
Tetrada +90° +180° +270°
- CA83BC
Pink Punk
- D08F4D
≈ Slightly Golden
- 60B47E
≈ Jade Cream
- 5BA6E1
≈ Windjammer
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.80:1 · APCA Lc 54
Ag
AAANa czerni
WCAG 7.48:1 · APCA Lc 48
Najlepszy kolor tekstu: #000000
WCAG 7.48:1 (AAA) · APCA Lc 48
Contrast pairs
Fragmenty kodu
CSS
:root {
--pink-punk: #ca83bc;
--pink-punk-rgb: 202 131 188;
--pink-punk-oklch: oklch(0.701 0.114 334.1);
}
.element {
color: var(--pink-punk);
background-color: hsl(312 40% 65%);
border-color: oklch(0.701 0.114 334.1);
}Tailwind CSS v4
@theme {
--color-pink-punk: #ca83bc;
--color-pink-punk-50: #ffe9ff;
--color-pink-punk-100: #ffdaf7;
--color-pink-punk-200: #f5c2e7;
--color-pink-punk-300: #dda1ce;
--color-pink-punk-400: #c884ba;
--color-pink-punk-500: #b367a5;
--color-pink-punk-600: #97588b;
--color-pink-punk-700: #794670;
--color-pink-punk-800: #593354;
--color-pink-punk-900: #3e223a;
--color-pink-punk-950: #271124;
}SCSS
$pink-punk: #ca83bc;
$pink-punk-rgb: 202, 131, 188;
$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);
}