#306966

Color #306966

A muted dark cyan.

Closest named color Dark Slate Gray #2f4f4f · ΔE 12.2 Nearest Tailwind class teal-800 #005f5a · ΔE 5.2

Open in Palette generator Color wheel Color mixer Contrast checker Blindness simulator Gradient

Conversions

HEX

#306966

RGB

rgb(48, 105, 102)

HSL

hsl(176.8, 37.3%, 30%)

HSV / HSB

hsv(176.8, 54.3%, 41.2%)

CMYK

cmyk(54.3%, 0%, 2.9%, 58.8%)

LAB

lab(40.72, -19.42, -4.03)

LCH

lch(40.72, 19.83, 191.72)

OKLCH

oklch(48.2%, 0.0601, 190.75)

HWB

hwb(176.8, 18.8%, 58.8%)

Harmony colors

Complementary

#693033

Analogous

#306949

#306966

#305069

Triadic

#306966

#663069

#696630

Split-complementary

#306966

#693050

#694930

Tetradic

#306966

#303369

#693033

#696630

Square

#306966

#493069

#693033

#506930

Shades

Color #306966 mixed toward black.

#285855

#204644

#183533

#102322

#081211

Tints

Color #306966 mixed toward white.

#43928e

#5cb4b0

#84c7c3

#addad7

#d6eceb

Tones

Color #306966 mixed toward gray.

#356462

#39605d

#3e5b59

#435655

#485151

Accessibility

Aa White text on this color

6.29:1

Aa Black text on this color

3.34:1

White text reads better on this background (6.29:1). That passes WCAG AA (≥4.5:1) for normal-size text, but not AAA.

Under color vision deficiencies

Protanopia

#4f4f67 · ΔE 24.9

Deuteranopia

#4c4767 · ΔE 27.9

Tritanopia

#356767 · ΔE 2.1

Achromatopsia

#606060 · ΔE 17.6

Left half is the original, right half is the simulated appearance. See all 8 vision types →

Code

CSS

background-color: #306966;

Tailwind (arbitrary value)

bg-[#306966]

Related colors

Light Sea Green #20b2aa

Medium Turquoise #48d1cc

Turquoise #40e0d0

Aqua #00ffff

Azure #f0ffff

Dark Cyan #008b8b

Frequently asked questions

#306966 (#306966) is rgb(48, 105, 102) in RGB.

No, #306966 is not one of the 216 web-safe colors — for that, every RGB channel would have to be a multiple of 51.

Related tools

Colors

HEX to RGB Converter

Convert any HEX color code to its RGB and HSL equivalents, live, with copy-to-clipboard values.

Try it → Accessibility

Contrast Checker

Check the WCAG contrast ratio between any two colors, live, with AA/AAA pass-fail results.

Try it → Generators

Palette Generator

Generate complementary, analogous, triadic, split-complementary, tetradic, square, and monochromatic palettes from any base color.

Try it →

Build something with this color

Generate a full palette from #306966, or check how it holds up for accessibility.

Generate a palette → Check contrast