Adlandırılmış renk · #CC22AA
Perfectly Purple Place
Perfectly Purple Place, #CC22AA: rgb(204 34 170), hsl(312 71% 47%), oklch(0.584 0.237 338.3). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Pink mean? → · Perfectly Purple Place color name →
#CC22AA
oklch(0.584 0.237 338.3)
Renk dönüşümleri
- HEX
- #cc22aa
- RGB
- rgb(204 34 170)
- HSL
- hsl(312 71% 47%)
- HWB
- hwb(312 13% 20%)
- OKLCH
- oklch(0.584 0.237 338.3)
- OKLab
- oklab(0.584 0.22 -0.087)
- CIE Lab
- lab(48.28 71.58 -31.44)
- LCH
- lch(48.28 78.18 336.3)
- CMYK
- cmyk(0% 83% 17% 20%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- D444B3
- DB5DBC
- E274C4
- E889CD
- ED9DD5
- F2B1DE
- F6C4E6
- FAD8EE
- FDECF7
Koyu tonlar
- B11C93
- 97167D
- 7E1168
- 650B53
- 4E073F
- 37032D
- 22011B
- 0F000B
- 020001
Gri tonlar
- C636A6
- BF43A2
- B94E9E
- B2589A
- AB6096
- A36892
- 9B6E8D
- 937589
- 8A7B85
Renk uyumları
Tamamlayıcı +180°
- CC22AA
Perfectly Purple Place
- 00935C
≈ Green Gloss
Analog -30° +30°
- CC22AA
Perfectly Purple Place
- A340E4
≈ Magenta Affair
- E20060
≈ Ruby Dust
Üçlü +120° +240°
- CC22AA
Perfectly Purple Place
- 8F7B00
≈ Moscow Papyrus
- 008AA5
≈ Capri Breeze
Bölünmüş tamamlayıcı +150° +210°
- CC22AA
Perfectly Purple Place
- 608C00
≈ Sap Green
- 008F87
≈ Aqua Experience
Dörtlü +90° +180° +270°
- CC22AA
Perfectly Purple Place
- AC6B00
≈ Caramel
- 00935C
≈ Green Gloss
- 007FD4
≈ Electron Blue
Kontrast ve erişilebilirlik
Ag
AABeyaz üzerinde
WCAG 4.79:1 · APCA Lc 72
Ag
FailSiyah üzerinde
WCAG 4.37:1 · APCA Lc 30
En iyi metin rengi: #FFFFFF
WCAG 4.79:1 (AA) · APCA Lc 72
Contrast pairs
Kod parçacıkları
CSS
:root {
--perfectly-purple-place: #cc22aa;
--perfectly-purple-place-rgb: 204 34 170;
--perfectly-purple-place-oklch: oklch(0.584 0.237 338.3);
}
.element {
color: var(--perfectly-purple-place);
background-color: hsl(312 71% 47%);
border-color: oklch(0.584 0.237 338.3);
}Tailwind CSS v4
@theme {
--color-perfectly-purple-place: #cc22aa;
--color-perfectly-purple-place-50: #ffdbff;
--color-perfectly-purple-place-100: #ffc9ff;
--color-perfectly-purple-place-200: #ffaaf3;
--color-perfectly-purple-place-300: #ff81dc;
--color-perfectly-purple-place-400: #f158cd;
--color-perfectly-purple-place-500: #df1aba;
--color-perfectly-purple-place-600: #bd1c9d;
--color-perfectly-purple-place-700: #98187e;
--color-perfectly-purple-place-800: #700f60;
--color-perfectly-purple-place-900: #4f0a43;
--color-perfectly-purple-place-950: #34002b;
}SCSS
$perfectly-purple-place: #cc22aa;
$perfectly-purple-place-rgb: 204, 34, 170;
$perfectly-purple-place-light: mix(#fff, $perfectly-purple-place, 20%);
$perfectly-purple-place-dark: mix(#000, $perfectly-purple-place, 20%);
.element {
color: $perfectly-purple-place;
box-shadow: 0 0 0 2px rgba($perfectly-purple-place, 0.35);
}