#334168#334168

#334168 is a dark, moderate blue. Relative luminance 0.055; OKLCH L 38.2% C 0.069 H 268.0°. Best body text is #FFFFFF at 10.02:1 contrast (WCAG AA passes).

Color values

HEX	#334168
RGB	rgb(51, 65, 104)
HSL	hsl(224, 34%, 30%)
HSV	hsv(224, 51%, 41%)
CMYK	cmyk(51%, 37.5%, 0%, 59.2%)
CIE-LAB	lab(28.07, 6.36, -24.60)
CIE-LCH	lch(28.07, 25.41, 284.50°)
OKLab	oklab(38.21% -0.0024 -0.0693)
OKLCH	oklch(38.21% 0.069 268)
XYZ	xyz(5.7534, 5.4835, 13.8493)
Luminance	0.0548 (WCAG relative)
Temperature	cool
Family	blue

Closest named colors

Perceptual scales

Shades

Tints

Tones

OKLCH scale

Color harmonies

complementary

#334168 #685A33

analogous

#335B68 #334168 #3F3368

triadic

#334168 #683341 #416833

tetradic

#334168 #68335B #685A33 #33683F

square

#334168 #68335B #685A33 #33683F

split-complementary

#334168 #683F33 #5B6833

monochromatic

#0B0E16 #1F273F #334168 #475B91 #6378B2

Accessibility & contrast

On white

10.02

#334168 on #FFFFFF

AA ✓AA large ✓AAA ✓

On black

2.10

#334168 on #000000

AA ✗AA large ✗AAA ✗

Best text color

#FFFFFF on #334168

10.02:1 — WCAG AA (normal text) passes

Contrast matrix

fg \ bg	##334168	#FFFFFF	#000000	##FFFFFF
##334168	1.00	10.02	2.10	10.02
#FFFFFF	10.02	1.00	21.00	1.00
#000000	2.10	21.00	1.00	21.00
##FFFFFF	10.02	1.00	21.00	1.00

Color blindness preview

Protanopia (red-blind)

#32456A

Deuteranopia (green-blind)

#2D4067

Tritanopia (blue-blind)

#1E494F

Achromatopsia (no color)

#424242

Design tokens & code

CSS

--color: #334168;
/* rgb */ color: rgb(51, 65, 104);
/* oklch */ color: oklch(38.2% 0.069 268.0);

Tailwind

colors: {
  custom: {
    50: '#6e7593',
    500: '#334168',
    950: '#000000',
  },
}

SCSS

$custom: #334168;
$custom-light: #6e7593;
$custom-dark: #000000;

JSON

{
  "hex": "#334168",
  "rgb": {
    "r": 51,
    "g": 65,
    "b": 104
  },
  "hsl": {
    "h": 224.151,
    "s": 34.194,
    "l": 30.392
  },
  "oklch": {
    "l": 0.38211,
    "c": 0.06933,
    "h": 268
  },
  "luminance": 0.05484
}

Semantic roles & 50–950 ramp

primary

#334168

secondary

#99895E

accent

#AE5ECA

background

#F6F7F9

surface

#ECEDF1

border

#C7C8CB

text

#07080D

muted

#7A7B7E

Preview Lab

Preview with #334168

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

Preview Lab → · Contrast checker → · Palette generator →