How to Set Up Team Colors in OBS Studio
Getting the Right Color Codes
Before opening OBS, get the exact HEX codes for your team from a verified source like EsportTeamColors. Do not eyedrop from screenshots or social media images — compression and color profiles introduce errors that accumulate across your overlay design. Write down the primary, secondary, and any tertiary colors you plan to use.
OBS Studio accepts colors in HEX format in most contexts. For the native color picker, you can also enter RGB values. Having both formats ready saves time during setup.
Method 1: Color Sources for Simple Panels
For solid-color background panels, OBS Color Sources are the fastest option. Add a new Color Source, click the color picker, and enter the HEX code directly (paste it without the # symbol in the hex field, or enter RGB values in the R/G/B fields). Resize and position the source to create your panel.
This method works well for simple border bars, accent lines, and background blocks. Layer multiple Color Sources with transparency adjustments to build basic branded overlays without any HTML or CSS knowledge.
Method 2: Browser Sources with CSS Variables
For complex overlays, Browser Sources with CSS custom properties offer the most flexibility. Create an HTML file with your overlay layout and define team colors as CSS variables at the root level. Reference these variables throughout your stylesheet for borders, backgrounds, text colors, and accent elements.
The advantage of this approach: switching team colors requires editing only the variable definitions, not every individual element. For tournament organizers who change team branding per match, this workflow scales to dozens of matchups without redesigning the overlay.
Method 3: Text Source Styling
OBS Text Sources (GDI+ on Windows, FreeType 2 on Mac/Linux) offer built-in color options. For team-branded text elements, set the text color to the team's primary HEX, add a 2-pixel black outline for legibility, and optionally enable a semi-transparent background panel in the text source settings.
For maximum readability, avoid colored text on colored backgrounds. White text with a black outline on a team-colored panel provides the best legibility across all game backgrounds and stream conditions.
Testing Your Team Color Setup
After applying team colors, run three tests before going live. First, preview at 720p resolution — this is the most common viewer resolution, and readability issues that are invisible at 1080p become apparent here. Second, record a 30-second clip with actual gameplay and review the overlay in motion, checking for color clashing between overlay and game UI elements.
Third, test on a mobile device. Pull up your stream preview on your phone and verify that team-colored elements remain legible at small screen size. If any text or accent is hard to read on mobile, increase the contrast or size before going live.
Related Color References
Frequently Asked Questions
What color format does OBS Studio use?
OBS Studio primarily uses HEX codes in its color picker, though you can also enter RGB values. For Browser Source overlays, use HEX codes in your CSS. EsportTeamColors provides HEX values for every team that can be copied directly into OBS.
How do I change team colors quickly between matches in OBS?
Use Browser Source overlays with CSS custom properties (variables). Define team colors as --team-a-primary and --team-b-primary at the root level. Before each match, update these two variable values to switch the entire overlay's team branding instantly.