Colore con nome · #D9787C
Juicy Details
Juicy Details è #D9787C: rgb(217 120 124), hsl(358 56% 66%), oklch(0.681 0.121 18.2). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Red mean? → · Juicy Details color name →
#D9787C
oklch(0.681 0.121 18.2)
Conversioni di colore
- HEX
- #d9787c
- RGB
- rgb(217 120 124)
- HSL
- hsl(358 56% 66%)
- HWB
- hwb(358 47% 15%)
- OKLCH
- oklch(0.681 0.121 18.2)
- OKLab
- oklab(0.681 0.115 0.038)
- CIE Lab
- lab(61.76 38.88 15.52)
- LCH
- lch(61.76 41.86 21.8)
- CMYK
- cmyk(0% 45% 43% 15%)
Tinte · Ombre · Toni
Tinte
- DE8688
- E39395
- E8A1A2
- ECAEAF
- F0BCBC
- F4C9C9
- F7D6D6
- FAE4E4
- FDF1F1
Ombre
- BC676B
- A1575A
- 86484A
- 6C393B
- 532A2C
- 3B1D1E
- 251011
- 110505
- 020101
Toni
- D17A7D
- C87B7D
- C07C7D
- B77D7E
- AE7E7E
- A57F7F
- 9C7F7F
- 93807F
- 8A8080
Armonie di colore
Complementare +180°
- D9787C
Juicy Details
- 00AEB3
≈ Larkspur Blue
Analogo -30° +30°
- D9787C
Juicy Details
- CF78A6
≈ Heartbreaker
- D58053
≈ Copper Harbor
Triadico +120° +240°
- D9787C
Juicy Details
- 72AA5F
≈ Ferntastic
- 699AE3
≈ Little Boy Blue
Complementare divisa +150° +210°
- D9787C
Juicy Details
- 36B08B
≈ Walk in the Woods
- 2DA6D3
≈ Modal
Tetradico +90° +180° +270°
- D9787C
Juicy Details
- A09E3A
≈ Poplar
- 00AEB3
≈ Larkspur Blue
- 968CDF
≈ Perrywinkle
Contrasto e accessibilità
Ag
FailSu bianco
WCAG 3.03:1 · APCA Lc 57
Ag
AASu nero
WCAG 6.92:1 · APCA Lc 45
Miglior colore del testo: #000000
WCAG 6.92:1 (AA) · APCA Lc 45
Contrast pairs
Frammenti di codice
CSS
:root {
--juicy-details: #d9787c;
--juicy-details-rgb: 217 120 124;
--juicy-details-oklch: oklch(0.681 0.121 18.2);
}
.element {
color: var(--juicy-details);
background-color: hsl(358 56% 66%);
border-color: oklch(0.681 0.121 18.2);
}Tailwind CSS v4
@theme {
--color-juicy-details: #d9787c;
--color-juicy-details-50: #ffe8e7;
--color-juicy-details-100: #ffd9d7;
--color-juicy-details-200: #ffc0bf;
--color-juicy-details-300: #ef9e9e;
--color-juicy-details-400: #dd8083;
--color-juicy-details-500: #c96167;
--color-juicy-details-600: #aa5358;
--color-juicy-details-700: #894246;
--color-juicy-details-800: #662f34;
--color-juicy-details-900: #472023;
--color-juicy-details-950: #2e0f12;
}SCSS
$juicy-details: #d9787c;
$juicy-details-rgb: 217, 120, 124;
$juicy-details-light: mix(#fff, $juicy-details, 20%);
$juicy-details-dark: mix(#000, $juicy-details, 20%);
.element {
color: $juicy-details;
box-shadow: 0 0 0 2px rgba($juicy-details, 0.35);
}