Same color, three notations
HEX is compact and common in design handoffs. RGB is what a canvas and most image code expect. HSL separates hue, saturation and lightness, which makes it the easiest format for building a palette: keep the hue, change the lightness, and you have a matching set of tints and shades.
The contrast check matters
The ratios shown compare your color against white and black text using the WCAG formula. A ratio of 4.5:1 is the minimum for normal body text and 3:1 for large headings. Light grey text on a white card is the most common accessibility failure on the web, and it also hurts real readers on phone screens in daylight.
Building a palette from one color
Take the HSL value, keep the hue fixed and vary the lightness in steps for surfaces and borders. Pick one accent from a clearly different hue for actions, and stop there. Two well chosen hues almost always look better than five.
Frequently asked questions
How do I convert HEX to RGB by hand?
Split the six digits into three pairs and read each pair as a base sixteen number. For example 27 is 39, 43 is 67, and D6 is 214.
What contrast ratio do I need?
At least 4.5:1 for normal text and 3:1 for large text, to meet WCAG level AA.
Does it support 3 digit HEX codes?
Yes. Short codes such as #2b5 are expanded automatically before conversion.