Adlandırılmış renk · #C2A1B5
Hollyhock Pink
Hollyhock Pink, #C2A1B5: rgb(194 161 181), hsl(324 21% 70%), oklch(0.745 0.047 341.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? → · Hollyhock Pink color name →
#C2A1B5
oklch(0.745 0.047 341.3)
Renk dönüşümleri
- HEX
- #c2a1b5
- RGB
- rgb(194 161 181)
- HSL
- hsl(324 21% 70%)
- HWB
- hwb(324 63% 24%)
- OKLCH
- oklch(0.745 0.047 341.3)
- OKLab
- oklab(0.745 0.045 -0.015)
- CIE Lab
- lab(69.72 15.05 -5.57)
- LCH
- lch(69.72 16.04 339.7)
- CMYK
- cmyk(0% 17% 7% 24%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- C8AABC
- CEB3C3
- D4BDCB
- DAC6D2
- E1CFD9
- E7D9E1
- EDE2E8
- F3ECF0
- F9F5F7
Koyu tonlar
- A88B9D
- 8F7686
- 77626F
- 604E59
- 493C44
- 342A30
- 20191D
- 0E090C
- 020102
Gri tonlar
- BB9EB0
- B59AAA
- AE97A5
- A7949F
- A1909A
- 9A8D95
- 948A90
- 8D878A
- 878385
Renk uyumları
Tamamlayıcı +180°
- C2A1B5
Hollyhock Pink
- 93B6A3
≈ Garden District
Analog -30° +30°
- C2A1B5
Hollyhock Pink
- B6A4C3
≈ Blue Pink
- C8A0A5
≈ Primula
Üçlü +120° +240°
- C2A1B5
Hollyhock Pink
- B2AE8C
≈ Daddy-O
- 8CB4C2
≈ Crystal Lake
Bölünmüş tamamlayıcı +150° +210°
- C2A1B5
Hollyhock Pink
- A2B394
≈ Family Tree
- 8AB6B3
≈ Vintage Blue
Dörtlü +90° +180° +270°
- C2A1B5
Hollyhock Pink
- C0A88C
≈ 3AM Latte
- 93B6A3
≈ Garden District
- 97AFCA
≈ Nordland Light Blue
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 2.31:1 · APCA Lc 46
Ag
AAASiyah üzerinde
WCAG 9.05:1 · APCA Lc 56
En iyi metin rengi: #000000
WCAG 9.05:1 (AAA) · APCA Lc 56
Contrast pairs
Kod parçacıkları
CSS
:root {
--hollyhock-pink: #c2a1b5;
--hollyhock-pink-rgb: 194 161 181;
--hollyhock-pink-oklch: oklch(0.745 0.047 341.3);
}
.element {
color: var(--hollyhock-pink);
background-color: hsl(324 21% 70%);
border-color: oklch(0.745 0.047 341.3);
}Tailwind CSS v4
@theme {
--color-hollyhock-pink: #c2a1b5;
--color-hollyhock-pink-50: #fff0f9;
--color-hollyhock-pink-100: #f4e2ec;
--color-hollyhock-pink-200: #e4cdd9;
--color-hollyhock-pink-300: #caaebe;
--color-hollyhock-pink-400: #b394a7;
--color-hollyhock-pink-500: #9d7a8f;
--color-hollyhock-pink-600: #846879;
--color-hollyhock-pink-700: #6a5361;
--color-hollyhock-pink-800: #4e3c48;
--color-hollyhock-pink-900: #362932;
--color-hollyhock-pink-950: #21171e;
}SCSS
$hollyhock-pink: #c2a1b5;
$hollyhock-pink-rgb: 194, 161, 181;
$hollyhock-pink-light: mix(#fff, $hollyhock-pink, 20%);
$hollyhock-pink-dark: mix(#000, $hollyhock-pink, 20%);
.element {
color: $hollyhock-pink;
box-shadow: 0 0 0 2px rgba($hollyhock-pink, 0.35);
}