En yakın adlandırılmış renk · #D97CB4
#D97CB4
En yakın adlandırılmış renk: Pink Punk
#D97CB4 (rgb(217 124 180), hsl(324 55% 67%), oklch(0.705 0.133 344.1)) 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.
#D97CB4
oklch(0.705 0.133 344.1)
Renk dönüşümleri
- HEX
- #d97cb4
- RGB
- rgb(217 124 180)
- HSL
- hsl(324 55% 67%)
- HWB
- hwb(324 49% 15%)
- OKLCH
- oklch(0.705 0.133 344.1)
- OKLab
- oklab(0.705 0.128 -0.037)
- CIE Lab
- lab(63.88 42.22 -13.28)
- LCH
- lch(63.88 44.26 342.5)
- CMYK
- cmyk(0% 43% 17% 15%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- DE89BB
- E397C3
- E7A4CA
- EBB1D2
- EFBED9
- F3CBE1
- F6D8E8
- F9E5F0
- FCF2F7
Koyu tonlar
- BC6B9C
- A15A85
- 864A6E
- 6C3B58
- 532C44
- 3B1E30
- 25111D
- 11050C
- 020102
Gri tonlar
- D07DAF
- C87EA9
- BF7FA4
- B67F9F
- AE809A
- A58095
- 9C808F
- 93808A
- 898085
Renk uyumları
Tamamlayıcı +180°
- D97CB4
Pink Punk
- 36B989
≈ Aztec Jade
Analog -30° +30°
- D97CB4
Pink Punk
- BE85D9
≈ Purception
- E67A86
≈ Passion Pink
Üçlü +120° +240°
- D97CB4
Pink Punk
- AEA32E
≈ Martian
- 00B0DD
≈ Blue Atoll
Bölünmüş tamamlayıcı +150° +210°
- D97CB4
Pink Punk
- 7CB258
≈ Palm Tree
- 00B7B6
≈ Swagger
Dörtlü +90° +180° +270°
- D97CB4
Pink Punk
- D1922E
≈ Jackpot
- 36B989
≈ Aztec Jade
- 62A3F1
≈ Feather Star
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 2.80:1 · APCA Lc 54
Ag
AAASiyah üzerinde
WCAG 7.49:1 · APCA Lc 48
En iyi metin rengi: #000000
WCAG 7.49:1 (AAA) · APCA Lc 48
Contrast pairs
Kod parçacıkları
CSS
:root {
--pink-punk: #d97cb4;
--pink-punk-rgb: 217 124 180;
--pink-punk-oklch: oklch(0.705 0.133 344.1);
}
.element {
color: var(--pink-punk);
background-color: hsl(324 55% 67%);
border-color: oklch(0.705 0.133 344.1);
}Tailwind CSS v4
@theme {
--color-pink-punk: #d97cb4;
--color-pink-punk-50: #ffe7fd;
--color-pink-punk-100: #ffd7f1;
--color-pink-punk-200: #ffbee0;
--color-pink-punk-300: #e99bc6;
--color-pink-punk-400: #d57db2;
--color-pink-punk-500: #c15e9c;
--color-pink-punk-600: #a35083;
--color-pink-punk-700: #834069;
--color-pink-punk-800: #612e4f;
--color-pink-punk-900: #441f37;
--color-pink-punk-950: #2c0e22;
}SCSS
$pink-punk: #d97cb4;
$pink-punk-rgb: 217, 124, 180;
$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);
}