Named color · #3D8ED0
Magical Merlin
Magical Merlin is #3D8ED0: rgb(61 142 208), hsl(207 61% 53%), oklch(0.627 0.127 246.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Magical Merlin color name →
#3D8ED0
oklch(0.627 0.127 246.4)
Color conversions
- HEX
- #3d8ed0
- RGB
- rgb(61 142 208)
- HSL
- hsl(207 61% 53%)
- HWB
- hwb(207 24% 18%)
- OKLCH
- oklch(0.627 0.127 246.4)
- OKLab
- oklab(0.627 -0.051 -0.116)
- CIE Lab
- lab(56.34 -8.73 -41.92)
- LCH
- lch(56.34 42.82 258.2)
- CMYK
- cmyk(71% 32% 0% 18%)
Tints · Shades · Tones
Tints
- 5399D5
- 68A5DB
- 7BB0E0
- 8EBBE5
- A1C7E9
- B4D2EE
- C7DDF2
- D9E8F7
- ECF4FB
Shades
- 347BB5
- 2B689A
- 225680
- 1A4467
- 12344F
- 0A2439
- 041523
- 010710
- 000102
Tones
- 478DC8
- 4F8CC0
- 578BB8
- 5E8AB1
- 6588A9
- 6B87A1
- 708599
- 768490
- 7B8288
Color harmonies
Complementary +180°
- 3D8ED0
Magical Merlin
- BB7721
≈ Milvus Milvus Orange
Analogous -30° +30°
- 3D8ED0
Magical Merlin
- 0098B3
≈ Barrier Reef
- 7580D4
≈ Tanzine
Triadic +120° +240°
- 3D8ED0
Magical Merlin
- C7647C
≈ Ballerina Tutu
- 749638
≈ Antique Moss
Split-complementary +150° +210°
- 3D8ED0
Magical Merlin
- C86A4F
≈ Raw Copper
- 9F8709
≈ Captain Kirk
Tetradic +90° +180° +270°
- 3D8ED0
Magical Merlin
- B768A5
≈ Pearly Purple
- BB7721
≈ Milvus Milvus Orange
- 369F68
≈ Bulma Hair
Contrast & accessibility
Ag
FailOn white
WCAG 3.51:1 · APCA Lc 62
Ag
AAOn black
WCAG 5.97:1 · APCA Lc 39
Best text color: #000000
WCAG 5.97:1 (AA) · APCA Lc 39
Contrast pairs
Code snippets
CSS
:root {
--magical-merlin: #3d8ed0;
--magical-merlin-rgb: 61 142 208;
--magical-merlin-oklch: oklch(0.627 0.127 246.4);
}
.element {
color: var(--magical-merlin);
background-color: hsl(207 61% 53%);
border-color: oklch(0.627 0.127 246.4);
}Tailwind CSS v4
@theme {
--color-magical-merlin: #3d8ed0;
--color-magical-merlin-50: #daf9ff;
--color-magical-merlin-100: #c7ecff;
--color-magical-merlin-200: #aadaff;
--color-magical-merlin-300: #82bdf6;
--color-magical-merlin-400: #5aa5e5;
--color-magical-merlin-500: #2d8cd5;
--color-magical-merlin-600: #2976b3;
--color-magical-merlin-700: #205f90;
--color-magical-merlin-800: #12466b;
--color-magical-merlin-900: #0b304b;
--color-magical-merlin-950: #001c32;
}SCSS
$magical-merlin: #3d8ed0;
$magical-merlin-rgb: 61, 142, 208;
$magical-merlin-light: mix(#fff, $magical-merlin, 20%);
$magical-merlin-dark: mix(#000, $magical-merlin, 20%);
.element {
color: $magical-merlin;
box-shadow: 0 0 0 2px rgba($magical-merlin, 0.35);
}