Hex Color #678A96 - Custom Color

Color Codes

HEX

#678A96

RGB

rgb(103, 138, 150)

HSL

hsl(195, 19%, 50%)

CMYK

cmyk(31%, 8%, 0%, 41%)

HSV

hsv(195, 31%, 59%)

Color Name

Custom Color

Color Variations

Color Harmonies

Analogous

#67988C #678C98 #677398

Triadic

#678C98 #98678C #8C9867

Split Complementary

#678C98 #986773 #988C67

Tetradic (Square)

#678C98 #8C6798 #987367 #739867

Complementary

#678A96 #987367

Accessibility

WCAG Contrast Ratios

Text on White Background

Sample Text

Contrast Ratio: 3.72:1

Fail - WCAG AA (Normal Text)

Fail - WCAG AAA (Normal Text)

Text on Black Background

Sample Text

Contrast Ratio: 5.65:1

Pass - WCAG AA (Normal Text)

Fail - WCAG AAA (Normal Text)

Recommended Text Color

For best readability on this background color, use white text.

Color in Use

Card with colored border

Background with 20% opacity

CSS Code

.element {

background-color: #678A96;

color: #678A96;

border-color: #678A96;

}

Tailwind CSS (with arbitrary values)

bg-[#678A96]

text-[#678A96]

border-[#678A96]

// Example usage: