#3F6CD4#3F6CD4

#3F6CD4 is a mid, vivid blue. Relative luminance 0.165; OKLCH L 55.6% C 0.168 H 264.1°. Best body text is #FFFFFF at 4.88:1 contrast (WCAG AA passes).

Color values

HEX#3F6CD4
RGBrgb(63, 108, 212)
HSLhsl(222, 63%, 54%)
HSVhsv(222, 70%, 83%)
CMYKcmyk(70.3%, 49.1%, 0%, 16.9%)
CIE-LABlab(47.67, 19.42, -58.16)
CIE-LCHlch(47.67, 61.31, 288.46°)
OKLaboklab(55.56% -0.0173 -0.1669)
OKLCHoklch(55.56% 0.168 264.1)
XYZxyz(19.2919, 16.5334, 64.4491)
Luminance0.1653 (WCAG relative)
Temperaturecool
Familyblue

Closest named colors

Perceptual scales

Shades

Tints

Tones

OKLCH scale

Color harmonies

complementary
#3F6CD4 #D4A73F
analogous
#3FB7D4 #3F6CD4 #5D3FD4
triadic
#3F6CD4 #D43F6C #6CD43F
tetradic
#3F6CD4 #D43FB7 #D4A73F #3FD45D
square
#3F6CD4 #D43FB7 #D4A73F #3FD45D
split-complementary
#3F6CD4 #D45D3F #B7D43F
monochromatic
#1C397D #2750AF #3F6CD4 #7192DF #A3B9EA

Accessibility & contrast

On white

4.88
#3F6CD4 on #FFFFFF
AA ✓AA large ✓AAA ✗

On black

4.31
#3F6CD4 on #000000
AA ✗AA large ✓AAA ✗

Best text color

#FFFFFF on #3F6CD4
4.88:1 — WCAG AA (normal text) passes

Contrast matrix

fg \ bg##3F6CD4#FFFFFF#000000##FFFFFF
##3F6CD41.004.884.314.88
#FFFFFF4.881.0021.001.00
#0000004.3121.001.0021.00
##FFFFFF4.881.0021.001.00

Color blindness preview

Protanopia (red-blind)
#3178D8
Deuteranopia (green-blind)
#006BD2
Tritanopia (blue-blind)
#008596
Achromatopsia (no color)
#717171

Design tokens & code

CSS
--color: #3f6cd4;
/* rgb */ color: rgb(63, 108, 212);
/* oklch */ color: oklch(55.6% 0.168 264.1);
Tailwind
colors: {
  custom: {
    50: '#8695e2',
    500: '#3f6cd4',
    950: '#000000',
  },
}
SCSS
$custom: #3f6cd4;
$custom-light: #8695e2;
$custom-dark: #000000;
JSON
{
  "hex": "#3f6cd4",
  "rgb": {
    "r": 63,
    "g": 108,
    "b": 212
  },
  "hsl": {
    "h": 221.879,
    "s": 63.404,
    "l": 53.922
  },
  "oklch": {
    "l": 0.55559,
    "c": 0.16782,
    "h": 264.1
  },
  "luminance": 0.16535
}

Semantic roles & 50–950 ramp

primary
#3F6CD4
secondary
#D7C498
accent
#B541E6
background
#F8F9FD
surface
#F0F1FB
border
#CBCBD4
text
#0C0D15
muted
#7D7E83

Preview Lab

Preview with #3F6CD4

Body copy rendered with the generated semantic roles for this colour.

Preview Lab → · Contrast checker → · Palette generator →

#3F6CD4 Color — HEX, RGB, HSL, OKLCH & Contrast — Tintiva