Adlandırılmış renk · #CC55DD
Thick Pink
Thick Pink, #CC55DD: rgb(204 85 221), hsl(293 67% 60%), oklch(0.654 0.22 322.5). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Purple mean? → · Thick Pink color name →
#CC55DD
oklch(0.654 0.22 322.5)
Renk dönüşümleri
- HEX
- #cc55dd
- RGB
- rgb(204 85 221)
- HSL
- hsl(293 67% 60%)
- HWB
- hwb(293 33% 13%)
- OKLCH
- oklch(0.654 0.22 322.5)
- OKLab
- oklab(0.654 0.174 -0.134)
- CIE Lab
- lab(56.42 61.3 -48.09)
- LCH
- lch(56.42 77.91 321.9)
- CMYK
- cmyk(8% 62% 0% 13%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- D269E1
- D87BE5
- DE8DE9
- E39EED
- E9AEF0
- EEBFF4
- F2CFF7
- F7DFFA
- FBEFFD
Koyu tonlar
- B149C0
- 973DA4
- 7E3188
- 65266E
- 4E1C55
- 37113D
- 220826
- 0F0211
- 020002
Gri tonlar
- C55CD4
- BE62CB
- B668C2
- AF6DB8
- A871AF
- A075A6
- 98789D
- 907B93
- 887E8A
Renk uyumları
Tamamlayıcı +180°
- CC55DD
Thick Pink
- 0AAF08
≈ Pikkoro Green
Analog -30° +30°
- CC55DD
Thick Pink
- 9771FF
≈ Forgotten Purple
- ED439D
≈ Schiaparelli Pink
Üçlü +120° +240°
- CC55DD
Thick Pink
- B88700
≈ Letter Jacket
- 00A4AE
≈ Aare River Brienz
Bölünmüş tamamlayıcı +150° +210°
- CC55DD
Thick Pink
- 939800
≈ Pea Soup
- 00A988
≈ Moray Eel
Dörtlü +90° +180° +270°
- CC55DD
Thick Pink
- DC6D00
≈ Gold Orange
- 0AAF08
≈ Pikkoro Green
- 009DD4
≈ Structural Blue
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 3.55:1 · APCA Lc 62
Ag
AASiyah üzerinde
WCAG 5.91:1 · APCA Lc 39
En iyi metin rengi: #000000
WCAG 5.91:1 (AA) · APCA Lc 39
Contrast pairs
Kod parçacıkları
CSS
:root {
--thick-pink: #cc55dd;
--thick-pink-rgb: 204 85 221;
--thick-pink-oklch: oklch(0.654 0.22 322.5);
}
.element {
color: var(--thick-pink);
background-color: hsl(293 67% 60%);
border-color: oklch(0.654 0.22 322.5);
}Tailwind CSS v4
@theme {
--color-thick-pink: #cc55dd;
--color-thick-pink-50: #ffe0ff;
--color-thick-pink-100: #ffcfff;
--color-thick-pink-200: #ffb3ff;
--color-thick-pink-300: #ee8cf5;
--color-thick-pink-400: #d969e9;
--color-thick-pink-500: #c63ed9;
--color-thick-pink-600: #a736b7;
--color-thick-pink-700: #862b93;
--color-thick-pink-800: #621f70;
--color-thick-pink-900: #45144f;
--color-thick-pink-950: #2c0534;
}SCSS
$thick-pink: #cc55dd;
$thick-pink-rgb: 204, 85, 221;
$thick-pink-light: mix(#fff, $thick-pink, 20%);
$thick-pink-dark: mix(#000, $thick-pink, 20%);
.element {
color: $thick-pink;
box-shadow: 0 0 0 2px rgba($thick-pink, 0.35);
}