لون مسمّى · #7B68EE
Medium Slate Blue
Medium Slate Blue هو #7B68EE: rgb(123 104 238)، hsl(249 80% 67%)، oklch(0.604 0.194 285.5). شاهد الدرجات الفاتحة والداكنة والتناسقات وتباين WCAG وAPCA وأكواد CSS وTailwind v4 وSCSS.
What does Purple mean? → · Medium Slate Blue color name →
#7B68EE
oklch(0.604 0.194 285.5)
تحويلات الألوان
- 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%)
درجات فاتحة · درجات داكنة · درجات رمادية
درجات فاتحة
- 8679F1
- 9288F4
- 9E98F7
- ABA7F9
- B8B6FB
- C6C5FC
- D4D3FE
- E2E2FE
- F0F0FF
درجات داكنة
- 6A59CF
- 5A4BB1
- 4A3E93
- 3A3077
- 2C245C
- 1E1842
- 100C2A
- 050414
- 010003
درجات رمادية
- 7B6CE3
- 7B70D9
- 7B73CE
- 7B76C3
- 7B78B8
- 7C7AAD
- 7D7CA2
- 7E7E97
- 7F7F8C
تناسق الألوان
متمم +180°
- 7B68EE
Medium Slate Blue
- 8D8500
≈ Fickle Pickle
متجاور -30° +30°
- 7B68EE
Medium Slate Blue
- 147FF1
≈ Brescian Blue
- AC54CE
≈ Ripe Lavander
ثلاثي +120° +240°
- 7B68EE
Medium Slate Blue
- D05700
≈ Tenné
- 00996F
≈ Rainforest
متمم منقسم +150° +210°
- 7B68EE
Medium Slate Blue
- AD7500
≈ Falafel
- 4B9700
≈ Grass Is Greener
رباعي +90° +180° +270°
- 7B68EE
Medium Slate Blue
- DD3E5A
≈ Teaberry
- 8D8500
≈ Fickle Pickle
- 009495
≈ Paradise Landscape
التباين وإمكانية الوصول
Ag
Failعلى الأبيض
WCAG 4.15:1 · APCA Lc 68
Ag
AAعلى الأسود
WCAG 5.05:1 · APCA Lc 33
أفضل لون للنص: #000000
WCAG 5.05:1 (AA) · APCA Lc 33
Contrast pairs
مقتطفات الأكواد
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);
}