Two theme brand colors

Two-theme brand colors

Goal: one color for the logo (or a key accent) that reads on every background the product uses, light and dark, instead of a different color per theme.

Steps

1. Collect the backgrounds. Ask for, or read from the design tokens, every light background (page, cards) and every dark one. Use hex values like #F0EAE1.
2. Pick the hues to try. Start from examples/hues.csv (twelve greens) or write a data/hues.csv with name,hue,saturation rows for the brand's color family. Hue is 0 to 360; saturation is 0 to 1.
3. Choose the target. Logos and icons need 3 to 1 against their background (WCAG non-text contrast). Text needs 4.5 to 1. A single color rarely reaches 4.5 on both very light and very dark grounds, so this is usually for marks, not text.
4. Run it: node scripts/two-theme-colors.mjs --light "#F0EAE1,#FBF8F3" --dark "#181512,#211D19" --hues examples/hues.csv --min 3 For each hue it tries every lightness and keeps the shade whose worst contrast across all the backgrounds is highest.
5. Read the result. The table lists pass or fail, the hex, and the worst contrast. out/brand-colors.json has every pair. Show the passing colors on both backgrounds side by side so the person can choose by eye.
6. Keep text colors separate. If the chosen color is for the logo, leave link and button text on their own tested colors per theme.

Rules

• Never claim a color passes without running the script on the real backgrounds.
• Report the worst-case number, not the best one.
• If nothing passes, say so and suggest either a lower target for non-text use or a separate color per theme.