Colore con nome · #7B68EE
Medium Slate Blue
Medium Slate Blue è #7B68EE: rgb(123 104 238), hsl(249 80% 67%), oklch(0.604 0.194 285.5). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Purple mean? → · Medium Slate Blue color name →
#7B68EE
oklch(0.604 0.194 285.5)
Conversioni di colore
- HEX
- #7b68ee
- RGB
- rgb(123 104 238)
- HSL
- hsl(249 80% 67%)
- HWB
- hwb(249 41% 7%)
- OKLCH
- oklch(0.604 0.194 285.5)
- OKLab
- oklab(0.604 0.052 -0.187)
- CIE Lab
- lab(51.28 33.84 -66.48)
- LCH
- lch(51.28 74.59 297)
- CMYK
- cmyk(48% 56% 0% 7%)
Tinte · Ombre · Toni
Tinte
- 8679F1
- 9288F4
- 9E98F7
- ABA7F9
- B8B6FB
- C6C5FC
- D4D3FE
- E2E2FE
- F0F0FF
Ombre
- 6A59CF
- 5A4BB1
- 4A3E93
- 3A3077
- 2C245C
- 1E1842
- 100C2A
- 050414
- 010003
Toni
- 7B6CE3
- 7B70D9
- 7B73CE
- 7B76C3
- 7B78B8
- 7C7AAD
- 7D7CA2
- 7E7E97
- 7F7F8C
Armonie di colore
Complementare +180°
- 7B68EE
Medium Slate Blue
- 8D8500
≈ Fickle Pickle
Analogo -30° +30°
- 7B68EE
Medium Slate Blue
- 147FF1
≈ Brescian Blue
- AC54CE
≈ Ripe Lavander
Triadico +120° +240°
- 7B68EE
Medium Slate Blue
- D05700
≈ Tenné
- 00996F
≈ Rainforest
Complementare divisa +150° +210°
- 7B68EE
Medium Slate Blue
- AD7500
≈ Falafel
- 4B9700
≈ Grass Is Greener
Tetradico +90° +180° +270°
- 7B68EE
Medium Slate Blue
- DD3E5A
≈ Teaberry
- 8D8500
≈ Fickle Pickle
- 009495
≈ Paradise Landscape
Contrasto e accessibilità
Ag
FailSu bianco
WCAG 4.15:1 · APCA Lc 68
Ag
AASu nero
WCAG 5.05:1 · APCA Lc 33
Miglior colore del testo: #000000
WCAG 5.05:1 (AA) · APCA Lc 33
Contrast pairs
Frammenti di codice
CSS
:root {
--medium-slate-blue: #7b68ee;
--medium-slate-blue-rgb: 123 104 238;
--medium-slate-blue-oklch: oklch(0.604 0.194 285.5);
}
.element {
color: var(--medium-slate-blue);
background-color: hsl(249 80% 67%);
border-color: oklch(0.604 0.194 285.5);
}Tailwind CSS v4
@theme {
--color-medium-slate-blue: #7b68ee;
--color-medium-slate-blue-50: #f1edff;
--color-medium-slate-blue-100: #e3deff;
--color-medium-slate-blue-200: #cfc7ff;
--color-medium-slate-blue-300: #b2a6ff;
--color-medium-slate-blue-400: #9688ff;
--color-medium-slate-blue-500: #8068fe;
--color-medium-slate-blue-600: #6c59d6;
--color-medium-slate-blue-700: #5647ac;
--color-medium-slate-blue-800: #3c3482;
--color-medium-slate-blue-900: #29245c;
--color-medium-slate-blue-950: #18113f;
}SCSS
$medium-slate-blue: #7b68ee;
$medium-slate-blue-rgb: 123, 104, 238;
$medium-slate-blue-light: mix(#fff, $medium-slate-blue, 20%);
$medium-slate-blue-dark: mix(#000, $medium-slate-blue, 20%);
.element {
color: $medium-slate-blue;
box-shadow: 0 0 0 2px rgba($medium-slate-blue, 0.35);
}