Named color · #3398CE
Sorcerer
Sorcerer is #3398CE: rgb(51 152 206), hsl(201 61% 50%), oklch(0.646 0.121 236.8). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Sorcerer color name →
#3398CE
oklch(0.646 0.121 236.8)
Color conversions
- HEX
- #3398ce
- RGB
- rgb(51 152 206)
- HSL
- hsl(201 61% 50%)
- HWB
- hwb(201 20% 19%)
- OKLCH
- oklch(0.646 0.121 236.8)
- OKLab
- oklab(0.646 -0.066 -0.101)
- CIE Lab
- lab(58.96 -15.9 -36.74)
- LCH
- lch(58.96 40.04 246.6)
- CMYK
- cmyk(75% 26% 0% 19%)
Tints · Shades · Tones
Tints
- 4EA2D3
- 64ADD9
- 79B7DE
- 8DC2E3
- A0CCE8
- B3D6ED
- C6E0F1
- D9EBF6
- ECF5FB
Shades
- 2B84B3
- 237098
- 1C5C7F
- 144A66
- 0D384E
- 072738
- 031723
- 01080F
- 000102
Tones
- 4096C6
- 4B94BF
- 5492B7
- 5C8FAF
- 638DA7
- 6A8BA0
- 708898
- 768590
- 7B8388
Color harmonies
Complementary +180°
- 3398CE
Sorcerer
- C5793D
≈ Summerset
Analogous -30° +30°
- 3398CE
Sorcerer
- 00A0B0
≈ Breaking Wave
- 6C8BD8
≈ Livid
Triadic +120° +240°
- 3398CE
Sorcerer
- C76D8F
≈ Silk Ribbon
- 899737
≈ Chorus of Frogs
Split-complementary +150° +210°
- 3398CE
Sorcerer
- CD6F65
≈ Matador’s Cape
- AE8822
≈ Camel Toe
Tetradic +90° +180° +270°
- 3398CE
Sorcerer
- B472B5
≈ Moonlight Melody
- C5793D
≈ Summerset
- 57A261
≈ Endo
Contrast & accessibility
Ag
FailOn white
WCAG 3.21:1 · APCA Lc 59
Ag
AAOn black
WCAG 6.52:1 · APCA Lc 43
Best text color: #000000
WCAG 6.52:1 (AA) · APCA Lc 43
Contrast pairs
Code snippets
CSS
:root {
--sorcerer: #3398ce;
--sorcerer-rgb: 51 152 206;
--sorcerer-oklch: oklch(0.646 0.121 236.8);
}
.element {
color: var(--sorcerer);
background-color: hsl(201 61% 50%);
border-color: oklch(0.646 0.121 236.8);
}Tailwind CSS v4
@theme {
--color-sorcerer: #3398ce;
--color-sorcerer-50: #d6fbff;
--color-sorcerer-100: #c3eeff;
--color-sorcerer-200: #a4dcff;
--color-sorcerer-300: #7ac0ef;
--color-sorcerer-400: #4ea9dd;
--color-sorcerer-500: #0890cc;
--color-sorcerer-600: #117aac;
--color-sorcerer-700: #0f628a;
--color-sorcerer-800: #034866;
--color-sorcerer-900: #043248;
--color-sorcerer-950: #001e2f;
}SCSS
$sorcerer: #3398ce;
$sorcerer-rgb: 51, 152, 206;
$sorcerer-light: mix(#fff, $sorcerer, 20%);
$sorcerer-dark: mix(#000, $sorcerer, 20%);
.element {
color: $sorcerer;
box-shadow: 0 0 0 2px rgba($sorcerer, 0.35);
}