#306D9B#306D9B

#306D9B is a mid, moderate cyan. Relative luminance 0.139; OKLCH L 51.6% C 0.096 H 244.1°. Best body text is #FFFFFF at 5.55:1 contrast (WCAG AA passes).

Color values

HEX	#306D9B
RGB	rgb(48, 109, 155)
HSL	hsl(206, 53%, 40%)
HSV	hsv(206, 69%, 61%)
CMYK	cmyk(69%, 29.7%, 0%, 39.2%)
CIE-LAB	lab(44.13, -4.24, -30.70)
CIE-LCH	lch(44.13, 30.99, 262.14°)
OKLab	oklab(51.61% -0.042 -0.0867)
OKLCH	oklch(51.61% 0.096 244.1)
XYZ	xyz(12.6017, 13.9309, 33.0288)
Luminance	0.1393 (WCAG relative)
Temperature	cool
Family	cyan

Closest named colors

Perceptual scales

Shades

Tints

Tones

OKLCH scale

Color harmonies

complementary

#306D9B #9B5E30

analogous

#309B93 #306D9B #30389B

triadic

#306D9B #9B306D #6D9B30

tetradic

#306D9B #93309B #9B5E30 #389B30

square

#306D9B #93309B #9B5E30 #389B30

split-complementary

#306D9B #9B3038 #9B9330

monochromatic

#132B3E #224C6C #306D9B #438DC5 #72AAD3

Accessibility & contrast

On white

5.55

#306D9B on #FFFFFF

AA ✓AA large ✓AAA ✗

On black

3.79

#306D9B on #000000

AA ✗AA large ✓AAA ✗

Best text color

#FFFFFF on #306D9B

5.55:1 — WCAG AA (normal text) passes

Contrast matrix

fg \ bg	##306D9B	#FFFFFF	#000000	##FFFFFF
##306D9B	1.00	5.55	3.79	5.55
#FFFFFF	5.55	1.00	21.00	1.00
#000000	3.79	21.00	1.00	21.00
##FFFFFF	5.55	1.00	21.00	1.00

Color blindness preview

Protanopia (red-blind)

#586E9D

Deuteranopia (green-blind)

#4A649A

Tritanopia (blue-blind)

#00787D

Achromatopsia (no color)

#686868

Design tokens & code

CSS

--color: #306d9b;
/* rgb */ color: rgb(48, 109, 155);
/* oklch */ color: oklch(51.6% 0.096 244.1);

Tailwind

colors: {
  custom: {
    50: '#7596b8',
    500: '#306d9b',
    950: '#000000',
  },
}

SCSS

$custom: #306d9b;
$custom-light: #7596b8;
$custom-dark: #000000;

JSON

{
  "hex": "#306d9b",
  "rgb": {
    "r": 48,
    "g": 109,
    "b": 155
  },
  "hsl": {
    "h": 205.794,
    "s": 52.709,
    "l": 39.804
  },
  "oklch": {
    "l": 0.51606,
    "c": 0.09636,
    "h": 244.1
  },
  "luminance": 0.13932
}

Semantic roles & 50–950 ramp

primary

#306D9B

secondary

#BB8E6C

accent

#8A4CDC

background

#F7F9FB

surface

#EDF2F6

border

#C8CCD0

text

#090D11

muted

#7B7E80

Preview Lab

Preview with #306D9B

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

Preview Lab → · Contrast checker → · Palette generator →