Brand palette & contrast
Create lighter and darker brand-colour candidates and inspect solid-colour contrast ratios.
Brand palette & contrast: inputs, results and limitations
Create lighter and darker brand-colour candidates and inspect solid-colour contrast ratios.
How to use Brand palette & contrast
- Paste your text or use the example to inspect the operation.
- Run the tool once the input is ready.
- Inspect the preview or result, then download a new file.
An illustrative use case
A brand HEX colour with lighter and darker candidates.
Sample input
#426bd1
What to inspect in the output
Check the actual text/background pairing rather than assuming every palette colour is readable. Contrast calculations for solid colours do not model gradients, photos or all visual accessibility needs.
Where this tool stops
Review the output before using it. Your original input is not changed.
Troubleshooting Brand palette & contrast
Inspect the result in the destination component or viewer. A declaration needs a valid CSS context; an image needs suitable dimensions; a sanitized SVG can lose unsupported features.
Questions about Brand palette & contrast
Does a generated palette certify accessibility?
No. Test the specific UI combinations, text size and interaction states in the final design.
What input does Brand palette & contrast need?
Use the sample text shown below, then replace it with your own input. Review the result for the destination where it will be used.
Which options does Brand palette & contrast provide?
There are no extra settings in this version. Select or paste the appropriate input and review the produced result.
Your original input is preserved. Review the new output before using it in a published page, customer delivery or production workflow.
JavaScript enables the interactive workspace.