#2F4F4F

darkslategray

%
Open colour page

Colour codes

HEX#2F4F4F
RGBrgb(47, 79, 79)
HSLhsl(180°, 25.4%, 24.71%)
HSVhsv(180°, 40.51%, 30.98%)
CMYKcmyk(40.51%, 0%, 0%, 69.02%)
XYZxyz(5.38, 6.76, 8.42)
LABlab(31.26, -11.72, -3.72)
LCHlch(31.26, 12.3, 197.63°)

Colour codes

HEX#2F4F4F
RGBrgb(47, 79, 79)
HSLhsl(180°, 25.4%, 24.71%)
HSVhsv(180°, 40.51%, 30.98%)
CMYKcmyk(40.51%, 0%, 0%, 69.02%)
XYZxyz(5.38, 6.76, 8.42)
LABlab(31.26, -11.72, -3.72)
LCHlch(31.26, 12.3, 197.63°)

Accessibility

On white8.93:1AA ✓AAA ✓
On black2.35:1AA ✗AAA ✗

The quick brown fox

Body text set on the colour, so you can judge legibility before committing to it.

Colour variations and combinations

Tints mix the colour with pure white and shades mix it with pure black. Both ladders are calculated in 10% steps, so you can lift or deepen a hue without leaving it.

Shades

Tints

Colour harmonies

Harmonies pick companion hues by their position on the colour wheel. Each rule produces a different mood, from high-contrast pairings to gentle neighbouring blends.

#2F4F4F
#4F2F2F

Complementary

The hue directly opposite on the wheel, 180° away. Maximum contrast, best used when one colour leads and the other accents.

Create gradient
#2F4F4F
#4F2F3F
#4F3F2F

Split complementary

The base hue plus the two neighbours of its opposite, roughly 30° either side. Keeps the contrast but softens the clash.

Create gradient
#2F4F4F
#4F2F4F
#4F4F2F

Triadic

Three hues spaced evenly at 120°. Lively and balanced — let one dominate and treat the rest as accents.

Create gradient
#2F4F3F
#2F4F4F
#2F3F4F

Analogous

Three neighbouring hues 30° apart. Low contrast and easy on the eye, ideal for calm backgrounds and gradients.

Create gradient
#000000
#182929
#2F4F4F
#467575
#5F9F9F

Monochromatic

One hue at several lightness levels. Cohesive by construction, and the safest route to a consistent interface.

Create gradient
#2F4F4F
#2F2F4F
#4F2F2F
#4F4F2F

Tetradic

Two complementary pairs forming a rectangle on the wheel. The richest scheme here, and the one that needs the most restraint.

Create gradient

More trending colours