En yakın adlandırılmış renk · #CC82BC
#CC82BC
En yakın adlandırılmış renk: Pink Punk
#CC82BC (rgb(204 130 188), hsl(313 42% 65%), oklch(0.702 0.118 335)) en çok Pink Punk adlı renge yakındır. Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
#CC82BC
oklch(0.702 0.118 335)
Renk dönüşümleri
- HEX
- #cc82bc
- RGB
- rgb(204 130 188)
- HSL
- hsl(313 42% 65%)
- HWB
- hwb(313 51% 20%)
- OKLCH
- oklch(0.702 0.118 335)
- OKLab
- oklab(0.702 0.107 -0.05)
- CIE Lab
- lab(63.74 35.66 -18.2)
- LCH
- lch(63.74 40.04 333)
- CMYK
- cmyk(0% 36% 8% 20%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- D28EC3
- D79BC9
- DDA7D0
- E2B4D7
- E7C0DE
- ECCDE4
- F1D9EB
- F6E6F2
- FBF2F8
Koyu tonlar
- B170A3
- 975F8B
- 7E4E73
- 653E5D
- 4E2F47
- 372032
- 22121F
- 0F060D
- 020102
Gri tonlar
- C582B6
- BD82B0
- B682AA
- AE82A4
- A7829E
- 9F8298
- 978292
- 90818C
- 888186
Renk uyumları
Tamamlayıcı +180°
- CC82BC
Pink Punk
- 5CB57E
≈ Jade Cream
Analog -30° +30°
- CC82BC
Pink Punk
- B08CDA
≈ Middy’s Purple
- DC7E95
≈ Impatient Pink
Üçlü +120° +240°
- CC82BC
Pink Punk
- B69E3E
≈ Tiki Torch
- 22B1CD
≈ Aquarius
Bölünmüş tamamlayıcı +150° +210°
- CC82BC
Pink Punk
- 8EAC56
≈ Lime It or Leave It
- 22B6A9
≈ Glass Jar Blue
Dörtlü +90° +180° +270°
- CC82BC
Pink Punk
- D18F49
≈ Cognac
- 5CB57E
≈ Jade Cream
- 5AA6E3
≈ Windjammer
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 2.80:1 · APCA Lc 54
Ag
AAASiyah üzerinde
WCAG 7.48:1 · APCA Lc 48
En iyi metin rengi: #000000
WCAG 7.48:1 (AAA) · APCA Lc 48
Contrast pairs
Kod parçacıkları
CSS
:root {
--pink-punk: #cc82bc;
--pink-punk-rgb: 204 130 188;
--pink-punk-oklch: oklch(0.702 0.118 335);
}
.element {
color: var(--pink-punk);
background-color: hsl(313 42% 65%);
border-color: oklch(0.702 0.118 335);
}Tailwind CSS v4
@theme {
--color-pink-punk: #cc82bc;
--color-pink-punk-50: #ffe9ff;
--color-pink-punk-100: #ffdaf6;
--color-pink-punk-200: #f6c2e7;
--color-pink-punk-300: #dfa0cd;
--color-pink-punk-400: #c983ba;
--color-pink-punk-500: #b566a5;
--color-pink-punk-600: #99578b;
--color-pink-punk-700: #7b4570;
--color-pink-punk-800: #5a3254;
--color-pink-punk-900: #3f223a;
--color-pink-punk-950: #281124;
}SCSS
$pink-punk: #cc82bc;
$pink-punk-rgb: 204, 130, 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);
}