Colore con nome · #C77690
Watermelon Pink
Watermelon Pink è #C77690: rgb(199 118 144), hsl(341 42% 62%), oklch(0.661 0.106 359.8). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Red mean? → · Watermelon Pink color name →
#C77690
oklch(0.661 0.106 359.8)
Conversioni di colore
- HEX
- #c77690
- RGB
- rgb(199 118 144)
- HSL
- hsl(341 42% 62%)
- HWB
- hwb(341 46% 22%)
- OKLCH
- oklch(0.661 0.106 359.8)
- OKLab
- oklab(0.661 0.106 0)
- CIE Lab
- lab(59.33 34.91 0.24)
- LCH
- lch(59.33 34.91 0.4)
- CMYK
- cmyk(0% 41% 28% 22%)
Tinte · Ombre · Toni
Tinte
- CE849B
- D491A5
- DA9FB0
- E0ACBB
- E6BAC6
- EBC7D1
- F0D5DC
- F6E3E8
- FAF1F3
Ombre
- AD667D
- 93566A
- 7A4757
- 623845
- 4C2934
- 361C24
- 210F15
- 0E0507
- 020101
Toni
- C0778E
- BA798D
- B37A8B
- AC7B8A
- A57C88
- 9E7D86
- 977E85
- 8F7F83
- 887F82
Armonie di colore
Complementare +180°
- C77690
Watermelon Pink
- 33A795
≈ Zomp
Analogo -30° +30°
- C77690
Watermelon Pink
- B77AB2
≈ Colombo Red Mauve
- CB796C
≈ Jaded Ginger
Triadico +120° +240°
- C77690
Watermelon Pink
- 8A9C4E
≈ Spinach Green
- 4F9BCC
≈ Blue Iguana
Complementare divisa +150° +210°
- C77690
Watermelon Pink
- 60A56F
≈ Aqua Forest
- 27A4B6
≈ Sparkling Cove
Tetradico +90° +180° +270°
- C77690
Watermelon Pink
- AC8F3E
≈ Turmeric
- 33A795
≈ Zomp
- 798FD4
≈ Mood Mode
Contrasto e accessibilità
Ag
FailSu bianco
WCAG 3.26:1 · APCA Lc 60
Ag
AASu nero
WCAG 6.42:1 · APCA Lc 42
Miglior colore del testo: #000000
WCAG 6.42:1 (AA) · APCA Lc 42
Contrast pairs
Frammenti di codice
CSS
:root {
--watermelon-pink: #c77690;
--watermelon-pink-rgb: 199 118 144;
--watermelon-pink-oklch: oklch(0.661 0.106 359.8);
}
.element {
color: var(--watermelon-pink);
background-color: hsl(341 42% 62%);
border-color: oklch(0.661 0.106 359.8);
}Tailwind CSS v4
@theme {
--color-watermelon-pink: #c77690;
--color-watermelon-pink-50: #ffe9f3;
--color-watermelon-pink-100: #ffdae5;
--color-watermelon-pink-200: #fcc2d1;
--color-watermelon-pink-300: #e6a1b3;
--color-watermelon-pink-400: #d2849c;
--color-watermelon-pink-500: #be6684;
--color-watermelon-pink-600: #a0576f;
--color-watermelon-pink-700: #814559;
--color-watermelon-pink-800: #5f3242;
--color-watermelon-pink-900: #43222e;
--color-watermelon-pink-950: #2b111b;
}SCSS
$watermelon-pink: #c77690;
$watermelon-pink-rgb: 199, 118, 144;
$watermelon-pink-light: mix(#fff, $watermelon-pink, 20%);
$watermelon-pink-dark: mix(#000, $watermelon-pink, 20%);
.element {
color: $watermelon-pink;
box-shadow: 0 0 0 2px rgba($watermelon-pink, 0.35);
}