Image & design · Practical guide
Turn a colour idea into readable text
Convert a brand colour, check contrast, and adjust with a purpose.
1. Get consistent colour values
Convert an opaque HEX colour to RGB and HSL. HSL lightness is useful for making controlled adjustments, but it is not a measure of perceived brightness.
Open Colour converter & picker ↗2. Check the actual pair
Test text and background together. Aim for at least 4.5:1 for normal text under WCAG AA. A pass for large headings does not guarantee that smaller labels will pass.
Open Colour contrast checker ↗3. Refine and check again
Adjust the colour, then repeat the contrast check. Test both light and dark themes, hover and focus states, and any muted supporting text. Contrast is one part of an accessible design.
Open Colour converter & picker ↗Tool links open a fresh workspace. Inputs are not transferred between pages. For supported text operations, the private workbench offers explicit transfers in memory.