Color customization in CTV apps is a crucial aspect of user experience and brand identity. Here’s why:
Brand Consistency: Custom colors ensure your app aligns with your brand's visual identity, reinforcing brand recognition and loyalty among users.
User Engagement: Thoughtful color choices can enhance user engagement. Colors that complement each other create a visually appealing interface, making users more likely to enjoy and use the app regularly.
Accessibility: Customizable color schemes improve accessibility for users with visual impairments. High contrast and appropriately chosen colors can make navigation easier for everyone.
Differentiation: In a crowded market, unique color schemes help your app stand out from competitors, attracting more users and retaining their interest.
Mood and Tone: Colors can set the mood and tone of your app. Warm colors can evoke excitement and energy, while cooler tones can create a calm and relaxing environment, tailoring the user experience to your app’s content and audience.
So, color customization is not just about aesthetics; it’s about creating an engaging, accessible, and distinctive user experience that reflects your brand’s essence.
Step-by-Step Guide
From the Apps section of the left menu select Connected TV Apps and then select the CTV app you would like to customize
Once you review all themes and select one, head to the Basic Info tab and expand the Color Customization Section
Customize the colors based on your brand identity and color principles.
Save the changes
What Is Base Color?
The base color is the background color used in your app
Home Page  | Detail Page (layout 1)  | EPG Page 
|
What Is Brand Color?
Brand color refers to the specific colors that represent a brand. The item on focus is highlighted with the Primary brand color.
Primary Brand Color - The item on focus is indicated with the primary brand color
Secondary Brand Color - The player title is displayed in the brand secondary color
Tertiary Brand Color - Loaders are shown in the brand tertiary color
The brand color is used to:
Enhance Recognition: Instantly identify the brand (e.g., Netflix red).
Build Emotional Connection: Influence customer emotions and perceptions.
Ensure Consistency: Maintain a unified look across all platforms.
Aid Differentiation: Set the brand apart from competitors.
So, brand colors are crucial for a strong, memorable brand identity.
Home Page  - The highlight on header denotes the page the current page in header navigation (Home) | Detail Page  - The video title is highlighted in brand color - The primary focus action button (typically Play button) is in brand color. | EPG Page  -The program card that is on focus - Program Name (title) category (overline) are highlighted in brand color (left of thumb area) -Start and End Time of current program in brand color (left of thumb area) |
What Is Text on Brand Color?
When the focus is on a particular item it appears in brand color, Text on Brand Color is the color in which the text of the highlighted item (button appears)
Example: When the 'Subscribe to Watch' is selected the Subscribe to Watch text appears in this color whereas the button by itself appears on the brand color
Home Page  - The (text Home) current page along with its icon appears on the brand color in the header | Details Page  - The text on (label of) the button currently in focus | EPG Page  - The text on the highlighted card |
What Is Surface Color?
Surface color is used for keyboard keys, input fields like search boxes or form fields, the top menu background on the home page, the section background of the text below thumbnails, and other inactive action buttons.
Home Page  -The top menu background is in the surface color
| Details Page  - The inactive buttons are on this color | EPG Page  - All other cards except the selected card are in surface color |
What Is Text on Surface Color?
Any text that appears directly on the surface color appears in this color. The most common place to see this is the text on buttons that are not selected. The Program name and schedule details of all programs except the selected program on the EPG page and the keypad text.
Keypad and Form  (eg: Signin Page)
| Details Page 
| EPG Page 
|
By aligning with brand colors, apps can enhance recognition, build emotional connections, ensure consistency, and stand out in a crowded market. Custom colors also improve accessibility and set the mood, tailoring the user experience to your content.
💡 Recap
Base Color: The background color used in various app pages (Home, Detail, EPG).
Brand Color: Colors that represent your brand, such as the primary color for focused items (e.g., Netflix red), secondary for titles, and tertiary for loaders.
Text on Brand Color: The color of text on highlighted items, ensuring clarity and focus.
Surface Color: Used for UI elements like keyboard keys, input fields, and inactive buttons, creating a clear structure and hierarchy.
Text on Surface Color: The color of text on surface-colored elements, typically for non-selected buttons and general text.
By aligning with brand colors, apps can enhance recognition, build emotional connections, ensure consistency, and stand out in a crowded market. Custom colors also improve accessibility and set the mood, tailoring the user experience to your content.
Thoughtfully applying color principles helps create a visually appealing, accessible, and memorable app that reflects your brand's identity and enhances the overall user experience.