#687a89

Color #687a89

A nearly neutral, gray-leaning medium blue.

Closest named color Slate Gray #708090 · ΔE 2.7 Nearest Tailwind class gray-500 #6a7282 · ΔE 5.2

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

Conversions

HEX

#687a89

RGB

rgb(104, 122, 137)

HSL

hsl(207.3, 13.7%, 47.3%)

HSV / HSB

hsv(207.3, 24.1%, 53.7%)

CMYK

cmyk(24.1%, 10.9%, 0%, 46.3%)

LAB

lab(50.3, -3.04, -10.35)

LCH

lch(50.3, 10.79, 253.63)

OKLCH

oklch(57%, 0.0315, 243.43)

HWB

hwb(207.3, 40.8%, 46.3%)

Harmony colors

Complementary

#897768

Analogous

#688988

#687a89

#686a89

Triadic

#687a89

#89687a

#7a8968

Split-complementary

#687a89

#89686a

#898868

Tetradic

#687a89

#776889

#897768

#7a8968

Square

#687a89

#886889

#897768

#6a8968

Shades

Color #687a89 mixed toward black.

#576672

#45515b

#343d45

#23292e

#111417

Tints

Color #687a89 mixed toward white.

#80909e

#99a7b2

#b3bdc5

#ccd3d8

#e6e9ec

Tones

Color #687a89 mixed toward gray.

#6b7a86

#6e7a84

#707981

#73797e

#76797b

Accessibility

Aa White text on this color

4.44:1

Aa Black text on this color

4.73:1

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

Under color vision deficiencies

Protanopia

#707086 · ΔE 10.4

Deuteranopia

#6f6e85 · ΔE 11.3

Tritanopia

#698382 · ΔE 9.9

Achromatopsia

#787878 · ΔE 9

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

Code

CSS

background-color: #687a89;

Tailwind (arbitrary value)

bg-[#687a89]

Related colors

Steel Blue #4682b4

Alice Blue #f0f8ff

Dodger Blue #1e90ff

Light Slate Gray #778899

Slate Gray #708090

Charcoal #36454f

Frequently asked questions

#687a89 (#687a89) is rgb(104, 122, 137) in RGB.

No, #687a89 is not web-safe. The nearest web-safe colors are among its tones and shades below.

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 #687a89, or check how it holds up for accessibility.

Generate a palette → Check contrast