Configuring Dynamic Color Schemes in WinCC Unified HMI Systems

Overview: Color Scheme Architecture in WinCC Unified

WinCC Unified, introduced with TIA Portal V17 and expanded through V18, V19, and V20, ships a Chromium-based runtime that supports dynamic styling of screen objects. Unlike the legacy WinCC Comfort/Advanced platforms, the Unified architecture separates visual design (defined by Styles), runtime behavior (JavaScript, VB, C), and data binding (tags), enabling theme switching without recompiling the project or redeploying HMI images.

The OpenBridge design system from Siemens extends this capability by providing standardized color palettes, typography, and object templates used across the SIMATIC HMI portfolio. Engineers migrating OpenBridge-based HMI designs into WinCC Unified must replicate the four built-in OpenBridge schemes (Light, Dark, High-Contrast, and Brand) using Unified's Style Designer, central color tags, and runtime scripting. The general theory of combining two or more colors for aesthetic and practical design is documented in the Color scheme reference, but the engineering implementation in WinCC Unified requires project-specific configuration.

Prerequisites

Before implementing dynamic color schemes in a WinCC Unified project, verify that the engineering environment meets the following requirements:

• TIA Portal: V17 Update 4 or higher (V18 Update 3 or V19 recommended for the full Style Designer feature set, including the Dark/Light runtime switch introduced in V18).
• WinCC Unified Engineering: Installed component within TIA Portal. Confirm via "Installed software" in the TIA Portal Help menu.
• WinCC Unified Runtime: A licensed RT version (RT 128, RT 512, RT 2048, RT 4096, RT 1500, RT 3000) deployed on a Unified PC, Unified Comfort Panel (MTP700/1000/1200/1500/1900/2200), or IPC.
• Device firmware: Comfort Panels and IPCs running firmware V17.0.1.0 or higher. MTP Unified panels ship with V18 firmware; verify on the Siemens Industry Online Support portal.
• OpenBridge Style library: Download the SIMATIC OpenBridge Style package for WinCC Unified from the Siemens support portal (entry ID 109824234) and import it into TIA Portal.
• JavaScript knowledge: Familiarity with the WinCC Unified scripting API (HMIRuntime, Tags, Screen.Items).

Style System Architecture

The WinCC Unified Style system is a three-tier cascade. Understanding the cascade is critical before scripting dynamic switching because each tier has different change-propagation behavior.

Dynamic color switching at runtime can occur at Level 1 (via the central scheme tag) and at Level 2 (via per-style recoloring). Direct manipulation of Level 3 is discouraged for large projects because it creates maintenance debt and breaks the cascade.

Method 1: Using the Built-in Light/Dark Scheme Selector (V18+)

Starting with TIA Portal V18, WinCC Unified provides a runtime API for switching between Light and Dark color schemes. This is the fastest path to a two-theme system and uses no user-written code.

1. Open the project and navigate to Runtime settings → Design.
2. Verify that the design "SIMATIC WinCC Unified - Dark" or "SIMATIC WinCC Unified - Light" is selected. Both designs are installed by default with the WinCC Unified Style package.
3. Create a Boolean internal tag named UI.Scheme.IsDark (HMI tag, internal scope).
4. On a header screen, place a "Switch" object. Bind its value to UI.Scheme.IsDark.
5. In the Switch configuration, under the "Events" tab for the "Value change" event, add a System Function: HMIRuntime.UI.Scheme.Switch. This function is registered in the V18+ function catalog under "User interface".
6. Compile the project (full compile) and download to the runtime.

At runtime, toggling the switch flips the entire screen between the Light and Dark color palettes. The change is propagated to all objects that are not using a local property override.

Method 2: Centralized Color Tag with JavaScript Scripting

The recommended approach for projects that must support more than two color schemes is to define a small set of central HMI tags that hold the active color values, and to drive all screen objects from those tags. The tag value is then read by a Scheduled task on screen change, and individual object properties are set via a global script.

Step 2.1: Define the Central Color Tag

Create an internal HMI tag of type String with the name @Scheme_Active. The tag carries the name of the active scheme. Populate the allowed values:

• Light
• Dark
• HighContrast
• Brand

Step 2.2: Define the Color-Palette Tags

For each scheme, create the palette tags as internal HMI tags of type UInt32 (DWord). A 24-bit RGB color is encoded as 0x00RRGGBB. Example tag set for the background color palette:

Encode the values in the tag's "Initial value" field using the 16#RRGGBB notation (TIA Portal accepts 16#F2F2F2 directly). Group all scheme palette tags in a dedicated HMI tag folder named ColorScheme for clean export/import.

Step 2.3: Build the Scheme Selection Screen

On the global header screen, place four Radio Button objects (or a single I/O field with a drop-down list bound to a text list). Bind the selection to @Scheme_Active. In the "Value change" event of the Radio Button group, call a global function ApplyColorScheme.

Step 2.4: Global JavaScript Function

Open Project tree → Scripts → Project scripts and add a new JavaScript file. Paste the following function. The function reads the active scheme tag, maps it to a palette, and pushes the values into the corresponding central color tags.

// Project script: ApplyColorScheme.js
// WinCC Unified V18+, TIA Portal V18+
// Reads @Scheme_Active and writes Color.* tags.

const PALETTES = {
    "Light": {
        "Background": 0x00F2F2F2,
        "Foreground": 0x001F1F1F,
        "Accent":      0x00007CC0,
        "Warning":     0x00FFB600,
        "Error":       0x00C00000
    },
    "Dark": {
        "Background": 0x00242424,
        "Foreground": 0x00F0F0F0,
        "Accent":      0x0000A8E1,
        "Warning":     0x00FFB600,
        "Error":       0x00FF4040
    },
    "HighContrast": {
        "Background": 0x00000000,
        "Foreground": 0x00FFFFFF,
        "Accent":      0x00FFFF00,
        "Warning":     0x00FFFF00,
        "Error":       0x00FF0000
    },
    "Brand": {
        "Background": 0x00FFFFFF,
        "Foreground": 0x00003366,
        "Accent":      0x00E2001A,
        "Warning":     0x00FFB600,
        "Error":       0x00C00000
    }
};

function ApplyColorScheme() {
    const scheme = Tags("@Scheme_Active").Read();
    if (!PALETTES[scheme]) {
        HMIRuntime.Trace("ApplyColorScheme: unknown scheme '" + scheme + "'");
        return;
    }
    const p = PALETTES[scheme];
    Tags("Color.Background").Write(p.Background);
    Tags("Color.Foreground").Write(p.Foreground);
    Tags("Color.Accent").Write(p.Accent);
    Tags("Color.Warning").Write(p.Warning);
    Tags("Color.Error").Write(p.Error);

    // Optional: cache the choice in a persistent tag so the choice survives restart
    Tags("@Scheme_Active_Persist").Write(scheme);

    HMIRuntime.Trace("ApplyColorScheme: applied '" + scheme + "'");
}

Step 2.5: Bind Object Properties to Color Tags

For every screen object whose color should track the active scheme, open the property, click the small data-binding icon (chain) to the right of the value, and select "HMI tag". Choose the relevant Color.* tag. Repeat for:

• Background color of every screen
• Foreground (text) color of labels and buttons
• Border color of input fields
• Fill color of status indicators (Accent / Warning / Error)

Because the central color tags are global, a single change of Color.Background will repaint every object bound to that tag without any additional scripting. This is the same propagation model used by the central color tag in OpenBridge Unified libraries.

Step 2.6: Schedule the Scheme Application on Startup

Add a Scheduled task to the runtime that fires ApplyColorScheme 200 ms after the global screen loads. This guarantees that the persisted scheme is applied even if the user has not yet opened the settings screen. In Project tree → Scheduled tasks:

• Trigger: Runtime startup
• Delay: 200 ms
• Function: ApplyColorScheme

Method 3: SVG and Custom Object Recoloring

Project-specific graphical objects (lines, rectangles, custom icons imported as SVG) cannot reference an HMI tag for their fill color through the standard properties pane in TIA Portal V17. To recolor these, use the Screen Items API.

// Recolor all Rectangle objects on the active screen
function RecolorRectangles() {
    const items = Screen.Items;
    const accent = Tags("Color.Accent").Read();
    const bg     = Tags("Color.Background").Read();

    for (let i = 0; i < items.Count; i++) {
        const it = items.Item(i);
        if (it.TypeName === "HMIButton") {
            it.BackColor = bg;
            it.ForeColor = accent;
        } else if (it.TypeName === "HMIShape") {
            // Shape objects: rectangle, ellipse, line, polyline
            if (it.ShapeType === 1 /* Rectangle */) {
                it.FillColor = bg;
            } else if (it.ShapeType === 3 /* Line */) {
                it.BorderColor = accent;
            }
        } else if (it.TypeName === "HMISymbolicWidget") {
            // SVG-based widget: requires V19+ API
            it.Properties.Color = accent;
        }
    }
    Screen.Update();
}

Working with the Siemens OpenBridge Style Library

The OpenBridge library referenced in Siemens Support entry 109824234 ships a set of standardized screen window templates and faceplate types that already include the four color palettes. To use the library in a new project:

1. Download the package SIMATIC_WinCC_Unified_OpenBridge_Style_V18.zip from the Siemens support entry.
2. In TIA Portal, open Options → Style library → Import style library.
3. Select the downloaded ZIP file. The library appears under Project tree → Styles → OpenBridge.
4. Drag the OpenBridge Master style into the project's Styles folder.
5. Open the master style and inspect the central property ColorScheme.Palette. The library exposes four pre-defined palettes that can be selected by changing the property value at runtime via a global tag.

The OpenBridge master style is structured so that all control templates and faceplates read from the central palette. As a result, switching the palette tag updates the entire HMI in a single tag write, with no per-object scripting required.

Parameter Reference Table

Verification and Commissioning Checks

After the scheme switching mechanism is implemented, run the following commissioning checklist on the target runtime:

1. Tag round-trip: Manually change @Scheme_Active to Dark via the HMI tag simulator. Verify within 500 ms that Color.Background equals 16#242424.
2. Object coverage: Open every screen and visually confirm that background, foreground, and accent objects updated. Any object still showing the old color has a local property override that must be cleared.
3. Persistence: Restart the runtime. The persisted tag @Scheme_Active_Persist should restore the previously selected scheme within 2 s (next screen-cycle).
4. Faceplate propagation: Open a faceplate instance. Verify that the faceplate background and border colors follow the global scheme. Faceplate type defaults override object defaults; check the type's "Master" appearance.
5. Alarm control: The WinCC Unified Alarm Control uses its own color table (AlarmControl.ColorSettings). This is not affected by the central color tags. Configure alarm colors via the alarm control's properties or via a custom column style.
6. Trend control: Verify that trend curves use the scheme Accent color. If not, set the trend curve color property to bind to Color.Accent directly.
7. Logout/login: Switch the active user. Confirm that the scheme does not reset unexpectedly. If it does, move the scheme application from a per-user event to the global startup scheduler.

Troubleshooting Matrix

Performance and Memory Considerations

The Unified runtime maintains a property cache per object. Each binding from an object property to an HMI tag adds one subscription in the change-notification system. A typical process screen with 150 objects fully color-bound results in 450 subscriptions (3 colors per object). The runtime handles this comfortably on MTP1500 and IPC227G, but on the MTP700 (4-inch) and MTP1000 (7-inch) a fully bound screen with 300+ objects may consume up to 25 % of the renderer thread.

Mitigation strategies:

• Bind background and foreground only; keep accent and warning as static colors unless the screen is operator-facing.
• For read-only overview screens, do not bind colors at all and let the global design handle the palette.
• Combine multiple color tags into a single PLC-DB struct and use a script to push the struct once, rather than writing five individual tags.

Backup, Restore, and Recipe Considerations

When the active scheme is stored only in volatile runtime memory, a power loss reverts the HMI to the project default. For plants that require the operator's selected scheme to survive an outage:

1. Add a persistent internal tag @Scheme_Active_Persist with the "Persistent" property enabled (in the tag's properties, set "Persistence mode" to "Permanent").
2. Mirror the active scheme into the persistent tag in ApplyColorScheme (see Step 2.4).
3. On startup, the Scheduled task reads @Scheme_Active_Persist and writes it back into @Scheme_Active before applying the palette.

If multiple users share the panel, the persistent tag stores the last selection, not a per-user choice. For per-user theming, use a user-specific tag group or a user management entry.

Migration Notes: WinCC Comfort/Advanced to Unified

Projects migrated from WinCC Comfort/Advanced to Unified do not retain the legacy color palette configuration. The Comfort "Color scheme" property at the screen level has no direct equivalent in Unified; the closest match is the screen-level design selection combined with object bindings to central color tags. Engineers must:

1. Export the Comfort color table to a CSV file.
2. Map each Comfort color index (0-31) to a Unified UInt32 tag.
3. Re-bind every object that referenced a Comfort color index to the corresponding Unified tag.

The Siemens migration tool TIA Portal Migration → "Migrate project" performs a partial conversion but does not regenerate color bindings. Manual re-binding is required for production-grade projects.

Standards and Accessibility Notes

Although the source content focuses on the engineering implementation, color schemes used in operator interfaces should comply with the plant's accessibility and ergonomics standards. The IEC 60446 and ISO 9241-210 standards define color-coding rules for industrial HMIs; verify the High-Contrast scheme against the WCAG 2.1 AA minimum contrast ratio (4.5:1 for text) before commissioning. The Brand scheme typically uses customer-defined brand colors that may not pass the contrast check; in those cases, use the Brand scheme only for non-operational overview screens and the Light/Dark/High-Contrast schemes for operator-control screens.

FAQ