Deadlock Panorama CSSSupport

Color Blind Builder

Pick a preset, preview HUD colors, then download a local Deadlock mod file.

Ready. Pick colors, then build a local VPK.

Deadlock colorblind modpak86_dir.vpk172 UI elements

Starting paletteColor strength100%Background strength100%

What do these controls mean?Show

Starting palette: loads a preset set of colors.
Color strength: changes HUD tint and text color intensity.
Background strength: changes filled panels, blocks, and background intensity.

Install noteShow

The browser downloads pak86_dir.vpk. Put it in your Deadlock colorblind mod folder when you are ready.

Editing

Combat

49 HUD parts affected

Enemy main

InfoShow

Enemy health, objective health, death feed, minimap enemies, and hostile HUD status. Affects 21 UI elements.

ColorHexStrength100%

Enemy damage delta

InfoShow

Recent damage, danger prices, missing components, and destructive shop cues. Affects 10 UI elements.

ColorHexStrength100%

Neutral camp health

InfoShow

Neutral camp health bars, damage delta, and neutral progress indicators. Affects 4 UI elements.

ColorHexStrength100%

Dark edge

InfoShow

Health borders, locked overlays, cooldown masks, and disabled panels. Affects 14 UI elements.

ColorHexStrength100%

HUD color preview

Health bars

Enemy healthenemy fill

Ally healthoutline = ally border

Neutral campneutral health fill

Lane markers

State chips

ReadyUpgradeGoldTechOff

Color meaningsShow

Ready: Ready abilities, owned items, healing, and positive states.
Upgrade: Ability upgrades, AP, recommended items, and sell/new item cues.
Gold: Souls, gold, purchasable costs, and weapon shop cues.
Tech: Tech shop category markings and tech mod headers.
Off: Cooldown, locked, not trained, disabled, and unavailable states.

Export toolsShow

Advanced tools for copying CSS or saving this builder preset.

Style file

Generated CSSShow

/* Generated by Deadlock Color Blind Builder. */
@import url("s2r://panorama/styles/base/unit_status.vcss_c");

.enemy #unit_ult_ready_icon
{
  wash-color: #F0E442;
}

.enemy #unit_healthbar_lagging
{
  wash-color: #F0E442;
}

.enemy #unit_healthbar_bullet_shield
{
  background-color: #F0E442;
}

.enemy #state_progressbar
{
  wash-color: #F0E442;
}

.enemy #pip_image
{
  wash-color: #F0E442;
}

.enemy #unit_healthbar_delta
{
  wash-color: #D55E00;
}

.friend #unit_ult_ready_icon
{
  wash-color: #0072B2;
}

.friend #unit_healthbar_lagging
{
  wash-color: #0072B2;
}

.friend #unit_healthbar_bullet_shield
{
  background-color: #0072B2;
}

.friend #state_progressbar
{
  wash-color: #0072B2;
}

.friend #pip_image
{
  wash-color: #0072B2;
}

.friend #unit_healthbar_delta
{
  wash-color: #56B4E9;
}

.team_neutral #unit_healthbar_lagging
{
  wash-color: #5BEFB5;
}

.team_neutral #unit_healthbar_delta
{
  wash-color: #5BEFB5;
}

.team_neutral #state_progressbar
{
  wash-color: #5BEFB5;
}

.team_neutral #unit_ult_ready_icon
{
  wash-color: #5BEFB5;
}

.enemy .healthbar_border
{
  wash-color: #111827;
}

.friend .healthbar_border
{
  wash-color: #DDE7EE;
}

Load presetShow

Paste a saved builder preset JSON. This changes the page only.