#686565 Hex Color
Online color picker to view shades, tints, color codes, and complementary colors
This mid-tone grey serves as a practical, professional anchor for minimal UI and graphic layouts. Because of its balanced weight, #686565 functions best as a supporting tone rather than a background. Use white text over this hex code to ensure clear legibility, as it provides sufficient contrast for standard body copy. It pairs well with high-contrast accent colors like burnt orange or muted teal.
Questions about #686565
What is #686565 in RGB, HSL and CMYK?
In RGB, #686565 is rgb(104, 101, 101), in HSL hsl(0, 1%, 40%) and in CMYK 0%, 3%, 3%, 59%.
How should #686565 be used in UI design?
#686565 works best as a supporting neutral for text blocks or structural elements where you need to ground your design without overwhelming the viewer. It provides a stable base that allows brighter accent colors to stand out clearly against your layout.
What colors pair well with the grey tone #686565?
This color excels when paired with high-contrast, energetic tones like a deep burnt orange or a calm, muted teal. These combinations create a balanced aesthetic that feels both professional and intentional, avoiding the dullness sometimes associated with neutral greys.
Is #686565 readable on white or black?
#686565 has a 5.77:1 contrast ratio on white and 3.63:1 on black. WCAG asks for 4.5:1 for body text and 3:1 for large text, so on white it works for body text and on black it works only for large text (24px, or 18.5px bold). Try other pairs in the contrast checker.