Benoemde kleur · #7B68EE
Medium Slate Blue
Medium Slate Blue is #7B68EE: rgb(123 104 238), hsl(249 80% 67%), oklch(0.604 0.194 285.5). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Purple mean? → · Medium Slate Blue color name →
#7B68EE
oklch(0.604 0.194 285.5)
Kleurconversies
- 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%)
Tinten · Schaduwen · Tonen
Tinten
- 8679F1
- 9288F4
- 9E98F7
- ABA7F9
- B8B6FB
- C6C5FC
- D4D3FE
- E2E2FE
- F0F0FF
Schaduwen
- 6A59CF
- 5A4BB1
- 4A3E93
- 3A3077
- 2C245C
- 1E1842
- 100C2A
- 050414
- 010003
Tonen
- 7B6CE3
- 7B70D9
- 7B73CE
- 7B76C3
- 7B78B8
- 7C7AAD
- 7D7CA2
- 7E7E97
- 7F7F8C
Kleurharmonieën
Complementair +180°
- 7B68EE
Medium Slate Blue
- 8D8500
≈ Fickle Pickle
Analoog -30° +30°
- 7B68EE
Medium Slate Blue
- 147FF1
≈ Brescian Blue
- AC54CE
≈ Ripe Lavander
Triadisch +120° +240°
- 7B68EE
Medium Slate Blue
- D05700
≈ Tenné
- 00996F
≈ Rainforest
Gesplitst complementair +150° +210°
- 7B68EE
Medium Slate Blue
- AD7500
≈ Falafel
- 4B9700
≈ Grass Is Greener
Tetradisch +90° +180° +270°
- 7B68EE
Medium Slate Blue
- DD3E5A
≈ Teaberry
- 8D8500
≈ Fickle Pickle
- 009495
≈ Paradise Landscape
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 4.15:1 · APCA Lc 68
Ag
AAOp zwart
WCAG 5.05:1 · APCA Lc 33
Beste tekstkleur: #000000
WCAG 5.05:1 (AA) · APCA Lc 33
Contrast pairs
Codefragmenten
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);
}