Colour, with a purpose
Begin with a role
Choose a background, a text colour and one action colour. Name them by their job, not their appearance. A token called action is easier to maintain than orange-500.
Check the pair
Contrast belongs to a pair of colours. Test text against its actual background, including hover and disabled states. Chroma checks opaque solid sRGB pairs; it does not audit an entire interface.
Keep the meaning
Do not communicate a state through colour alone. Add a word, icon or pattern. Test your choices with the people who will use them.
Make it yours.
Choose the format that fits your workflow.
Read in your browser
text/html · v1.0.0 · en · 820 B
File details & reuse
License: CC0-1.0
Redistribution: allowed
SHA-256 0ee7838e6888820871601880d14be7989c5409f472b6eec2c70255723cad9af2
Markdown source
text/markdown · v1.0.0 · en · 581 B
File details & reuse
License: CC0-1.0
Redistribution: allowed
SHA-256 05e0ba4cb68e609f63a0707030f7aea95c428195cfbd7ee07bdb2cae6d78128a
Ships with.
Published by Jetskibay mock studio. Fictional brand, working prototype.