How to Design Theme Colors for White-Label Services

A white-label service lets several companies offer the same underlying product under their own brands. Changing the logo and colors should not make buttons, text, or forms harder to use. The practical approach is to define colors by their roles, keep the shared interface consistent, and limit what each company can change.

Separate shared interface colors from brand-specific colors

Start with two groups: colors each client can customize and colors shared by every client. Brand-specific colors may appear on primary buttons, selected tabs, and a few branded headings. Shared colors cover body text, card backgrounds, form boundaries, and error messages. Recoloring warnings and errors for every brand can make their meanings inconsistent.

Name colors for what they do, such as “primary button background,” “button text,” and “page background.” If you use CSS (the styling language for web pages), its custom properties let you reuse these role-based values. Define button text and button background as a pair rather than changing only the brand color. A logo color is not automatically suitable for text or buttons; check the actual foreground and background together.

Build two themes from one interface

Imagine a booking dashboard supplied to two different store operators. Company A uses blue and Company B uses green, while the layout and shared interface stay the same. The six-digit values beginning with “#” below are HEX color codes used to specify colors.

Use ■#F8FAFC for the common page background and ■#FFFFFF for cards. Set body text to ■#1F2937 on ■#FFFFFF cards, and use ■#64748B for form field borders. The border has a contrast ratio of approximately 4.76:1 against white, making the field boundary distinguishable.

For Company A, give the primary button a ■#1D4ED8 blue background with ■#FFFFFF text. Their contrast ratio is approximately 6.70:1. For Company B, change the button background to ■#166534 green and retain ■#FFFFFF text, producing approximately 7.13:1. Keep the button shape and size consistent; use the background color to reflect each brand.

Keep error text consistent across both companies: ■#B42318 on ■#FFFFFF has a contrast ratio of approximately 6.57:1. Add an explicit message such as “Check the information you entered,” rather than using color alone. These are example combinations for the described screen; logos and other surfaces need their own checks.

Check every state after switching a theme

WCAG (Web Content Accessibility Guidelines) Level AA specifies a contrast ratio of at least 4.5:1 for normal-sized text and 3:1 for large text. Visual information needed to identify interface controls or meaningful status icons generally needs at least 3:1 against adjacent colors. Judge each foreground/background pair by its calculated contrast, not its apparent brightness alone.

Review links, hover states, keyboard focus outlines, selected tabs, and mobile layouts as well as the primary button. If a client’s brand color is too pale for a text-bearing button, keep the pale shade for larger decorative areas and prepare a darker functional variant.

A client-facing theme editor can show each editable role and a preview, making changes easier to review. Whenever you onboard another company, verify both the shared styling rules and whether text and controls remain distinguishable in the actual interface.