Adlandırılmış renk · #9D6375
Jugendstil Pink
Jugendstil Pink, #9D6375: rgb(157 99 117), hsl(341 23% 50%), oklch(0.568 0.078 359.8). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Red mean? → · Jugendstil Pink color name →
#9D6375
oklch(0.568 0.078 359.8)
Renk dönüşümleri
- HEX
- #9d6375
- RGB
- rgb(157 99 117)
- HSL
- hsl(341 23% 50%)
- HWB
- hwb(341 39% 38%)
- OKLCH
- oklch(0.568 0.078 359.8)
- OKLab
- oklab(0.568 0.078 0)
- CIE Lab
- lab(48.91 25.96 0.2)
- LCH
- lch(48.91 25.96 0.4)
- CMYK
- cmyk(0% 37% 25% 38%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- A77282
- B1818F
- BB909C
- C59FAA
- CFAFB8
- D9BEC5
- E2CED4
- ECDEE2
- F6EFF0
Koyu tonlar
- 885565
- 734755
- 5F3A46
- 4C2E37
- 3A2129
- 28161C
- 180B0F
- 090305
- 010001
Gri tonlar
- 9B6676
- 986977
- 956C78
- 936F79
- 90727A
- 8D757C
- 8A787D
- 877B7E
- 837D7F
Renk uyumları
Tamamlayıcı +180°
- 9D6375
Jugendstil Pink
- 3A8678
≈ Copper Turquoise
Analog -30° +30°
- 9D6375
Jugendstil Pink
- 91668D
≈ Chinese Violet
- A0655B
≈ Au Chico
Üçlü +120° +240°
- 9D6375
Jugendstil Pink
- 717E47
≈ Old Four Leaf Clover
- 497DA0
≈ Biedermeier Blue
Bölünmüş tamamlayıcı +150° +210°
- 9D6375
Jugendstil Pink
- 54845E
≈ Soylent Green
- 348390
≈ Sea Bed
Dörtlü +90° +180° +270°
- 9D6375
Jugendstil Pink
- 89753D
≈ Giant Cactus Green
- 3A8678
≈ Copper Turquoise
- 6575A6
≈ Sudden Sapphire
Kontrast ve erişilebilirlik
Ag
AABeyaz üzerinde
WCAG 4.69:1 · APCA Lc 72
Ag
FailSiyah üzerinde
WCAG 4.47:1 · APCA Lc 29
En iyi metin rengi: #FFFFFF
WCAG 4.69:1 (AA) · APCA Lc 72
Contrast pairs
Kod parçacıkları
CSS
:root {
--jugendstil-pink: #9d6375;
--jugendstil-pink-rgb: 157 99 117;
--jugendstil-pink-oklch: oklch(0.568 0.078 359.8);
}
.element {
color: var(--jugendstil-pink);
background-color: hsl(341 23% 50%);
border-color: oklch(0.568 0.078 359.8);
}Tailwind CSS v4
@theme {
--color-jugendstil-pink: #9d6375;
--color-jugendstil-pink-50: #ffecf3;
--color-jugendstil-pink-100: #ffdee6;
--color-jugendstil-pink-200: #f2c7d2;
--color-jugendstil-pink-300: #dba7b4;
--color-jugendstil-pink-400: #c68b9d;
--color-jugendstil-pink-500: #b17084;
--color-jugendstil-pink-600: #965f70;
--color-jugendstil-pink-700: #784c59;
--color-jugendstil-pink-800: #593742;
--color-jugendstil-pink-900: #3e252e;
--color-jugendstil-pink-950: #27141b;
}SCSS
$jugendstil-pink: #9d6375;
$jugendstil-pink-rgb: 157, 99, 117;
$jugendstil-pink-light: mix(#fff, $jugendstil-pink, 20%);
$jugendstil-pink-dark: mix(#000, $jugendstil-pink, 20%);
.element {
color: $jugendstil-pink;
box-shadow: 0 0 0 2px rgba($jugendstil-pink, 0.35);
}