ColorPairLab6 entries
Color Palettes in Practice
Work through six color design examples: UI roles, light and dark pages, button labels, palette reviews, developer handoffs and reference sheets.
Follow worked examples for using a palette in a website, checking its text and handing off the files.
How to Assign Palette Colors to UI Roles
Give each swatch a job. This example turns Editorial Navy into a reading surface, body text, a button and a note panel, checking each pair along the way.
How to Use One Palette for Light and Dark Pages
A dark page needs more than reversed body text. Use Monochrome Newsroom to check the main reading pair and choose a caption color for each background.
How to Check a Four-Color Palette for Text Contrast
A four-color palette gives you sixteen matrix cells, but only a few may belong in your design. Here is how to choose and check those pairs with Forest Paper.
Button Text Contrast: Compare Light and Dark Labels
A bright button can still have a hard-to-read label. Compare two versions of the same action, then try a darker label on the orange fill.
How to Hand Off Color Tokens to a Developer
Give the developer exact colors and a clear account of where they belong. This example packages Cobalt Porcelain with CSS, JSON and a short role map.
How to Make a Website Color Reference Sheet
Pair a portable swatch card with a short table of text and background uses. Sage Notebook provides the colors for this small website reference.