Colore con nome · #B3586C
Slate Pink
Slate Pink è #B3586C: rgb(179 88 108), hsl(347 37% 52%), oklch(0.576 0.119 7.7). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Red mean? → · Slate Pink color name →
#B3586C
oklch(0.576 0.119 7.7)
Conversioni di colore
- HEX
- #b3586c
- RGB
- rgb(179 88 108)
- HSL
- hsl(347 37% 52%)
- HWB
- hwb(347 35% 30%)
- OKLCH
- oklch(0.576 0.119 7.7)
- OKLab
- oklab(0.576 0.118 0.016)
- CIE Lab
- lab(49.42 39.22 6.79)
- LCH
- lch(49.42 39.8 9.8)
- CMYK
- cmyk(0% 51% 40% 30%)
Tinte · Ombre · Toni
Tinte
- BC697A
- C57988
- CD8A96
- D59AA4
- DDABB3
- E4BBC2
- EBCCD1
- F2DDE0
- F9EEEF
Ombre
- 9B4B5D
- 843F4E
- 6E3340
- 582832
- 431D25
- 2F1219
- 1D090D
- 0C0304
- 010000
Toni
- AF5D6E
- AA6170
- A66672
- A16A74
- 9C6E76
- 977278
- 92767A
- 8C797C
- 867D7E
Armonie di colore
Complementare +180°
- B3586C
Slate Pink
- 008C84
≈ Aqua Experience
Analogo -30° +30°
- B3586C
Slate Pink
- A55B92
≈ Cyclamen Red
- B45D43
≈ Karacha Red
Triadico +120° +240°
- B3586C
Slate Pink
- 658631
≈ Stamnankáthi Green
- 367EBC
≈ Amalfi Coast
Complementare divisa +150° +210°
- B3586C
Slate Pink
- 288E5D
≈ Lake Green
- 0087A1
≈ Gogo Blue
Tetradico +90° +180° +270°
Contrasto e accessibilità
Ag
AASu bianco
WCAG 4.63:1 · APCA Lc 72
Ag
AASu nero
WCAG 4.52:1 · APCA Lc 30
Miglior colore del testo: #FFFFFF
WCAG 4.63:1 (AA) · APCA Lc 72
Contrast pairs
Frammenti di codice
CSS
:root {
--slate-pink: #b3586c;
--slate-pink-rgb: 179 88 108;
--slate-pink-oklch: oklch(0.576 0.119 7.7);
}
.element {
color: var(--slate-pink);
background-color: hsl(347 37% 52%);
border-color: oklch(0.576 0.119 7.7);
}Tailwind CSS v4
@theme {
--color-slate-pink: #b3586c;
--color-slate-pink-50: #ffe8ed;
--color-slate-pink-100: #ffd8df;
--color-slate-pink-200: #ffc0c9;
--color-slate-pink-300: #ed9eaa;
--color-slate-pink-400: #da7f91;
--color-slate-pink-500: #c76177;
--color-slate-pink-600: #a85265;
--color-slate-pink-700: #874251;
--color-slate-pink-800: #642f3c;
--color-slate-pink-900: #462029;
--color-slate-pink-950: #2d0f17;
}SCSS
$slate-pink: #b3586c;
$slate-pink-rgb: 179, 88, 108;
$slate-pink-light: mix(#fff, $slate-pink, 20%);
$slate-pink-dark: mix(#000, $slate-pink, 20%);
.element {
color: $slate-pink;
box-shadow: 0 0 0 2px rgba($slate-pink, 0.35);
}