Color palette

Colors measured from XS-1 to XS-3 material, a proposed core palette for the digital product, usage rules, and WCAG contrast check results.

Warning
Colors are measured from compressed, small Instagram screenshots, so the values are estimates. Once the official brand files are received, this page needs to be matched again. See question Official color codes on the Open questions.

How we measured

These three steps are used for all numbers on this page.

Shrink and group

Evidence images are shrunk, then each pixel is grouped by hue, saturation, and brightness

Separate neutrals

Neutral colors (low saturation) are separated from accent colors so the black background does not "dirty" the accent average

Sample the logo directly

The wordmark area is sampled directly, then the average and the brightest value are recorded

Measured results per edition

XS-3

See how few colors are actually used: almost everything is black, and the rest is red and teal light.

Background and neutralsPixel share in XS-3 material

#040403

Arena background±60–70% of pixels. Seat plan, FAQ

#2e2b2b

Graphite (stands, panels)±9–13%. FAQ, key visual

#f9f9f9

Text white±5%. FAQ

RedLogo, glow, ticket tiers

#ca3f3e

Logo red (average)Player repost

#e5444a

Logo red (brightest)Player repost

#531311

Deep red (top glow)±3–5%. FAQ, seat plan, player cards

#ba2d24

Ticket tier red±2%. Seat plan

Mint and tealWordmark and side light

#71ded7

Logo mint (average)Player repost

#92f8fa

Logo mint (brightest)Player repost

#4d9c9f

Teal (side light)±1%. FAQ

#224a4b

Deep teal±1%. FAQ, key visual

GoldTicket tier

#c7a440

Ticket tier gold±2%. Seat plan

The bar below uses the midpoint of the ranges above. The rest is player photos and mixed colors that were not measured.

Color share in XS-3 material

Arena background 65%±60–70%
Graphite 11%±9–13%
Text white 5%±5%
Deep red 4%±3–5%
Ticket tier red 2%±2%
Ticket tier gold 2%±2%
Teal 1%±1%
Deep teal 1%±1%
The rest 9%Player photos, skin, mixed colors. Not measured

Seat plan and prices — XS-3: seat plan with color tiers (teal, gold, red). Source: TICKET IG highlight @xseries___.

Player card — XS-3: mint-cyan wordmark with a red number 3. This area was used to measure the logo colors. Source: IG @xseries___.

XS-2 and XS-1

Compare with XS-3: the two earlier editions rely on blue, with warm gold in the XS-2 documentary content.

XS-2Jan 2026

#3254a1

Key visual blueFalcão vs Ricardinho

#5c43b7

Backdrop purplePresscon

#b19577

Documentary goldAll GOAT

XS-1Sep 2025

#599ad4

LED court blueXS-1

#8cc0d7

Light blue highlightXS-1

Proposed core palette

The principle: black, red, and mint are XSERIES colors, not just XS-3 colors. Other editions' colors may appear as archive accents.

Brand colors

These thirteen tokens are the digital product palette. Read row by row per group: neutrals for surfaces, red for action, teal-mint for brand and graphics, gold for the rare.

NeutralsBackground, surface, line, text

#0b0f14

xs-blackMain background. Slightly bluish so it does not "die" on OLED screens

#1a1f26

xs-graphiteCard surfaces, panels, navbar

#2e2b2b

xs-lineDivider lines and decorative borders only (1.37:1 on xs-black). Not for input boundaries

#6b7380

xs-line-strongForm input and control boundaries. At least 3:1: 4.02:1 on xs-black, 3.46:1 on xs-graphite

#f6f4f2

xs-whiteMain text on dark

RedAction and moments

#e5383b

xs-redMain accent: edition number, live, card moments

#cf2a2e

xs-red-strongRed button with white text

#531311

xs-red-deepGlow, top gradient

Teal and mintBrand, graphics, links

#71ded7

xs-mintWordmark, highlight, links on dark

#0e9aa7

xs-tealGraphics, icons, secondary elements

#0b7480

xs-teal-inkTeal text on a light background

#224a4b

xs-teal-deepGlow, bottom gradient

AccentOnly on dark

#c7a440

xs-goldPresident Cards, premium ticket tier. Only on dark

Edition colors are not thrown away. In the archive, each edition still uses its own accent inside the same brand frame.

XS-1Archive accent

#599ad4

LED court blueXS-1

XS-2Archive accent

#3254a1

Key visual blueXS-2. Fill and decoration only, not for text (2.67:1 on xs-black)

#5c43b7

Backdrop purpleXS-2. Fill and decoration only, not for text (2.69:1 on xs-black)

XS-3Same as the core palette

#e5383b

xs-redEdition number "3"

#71ded7

xs-mintWordmark

#0e9aa7

xs-tealSide light

Card function colors

Each card type and moment has one color. Players should be able to guess the card type from its color alone.

#71ded7

X Cards (Q1–Q2)xs-mint. Same as the X wordmark

#c7a440

President Cards (Q4)xs-gold. Throne, power, exclusive

#e5383b

Negative effect / opponentxs-red. Danger, attack

#f6f4f2

24-second shot clockxs-white during normal time

#e5383b

Last 5 seconds of the shot clockChanges to xs-red. Urgency

Team colors

Important
The official colors of the four franchises are not verified (Four franchise identities). XS-2 photos show an orange jersey (Nova Titans) and a navy jersey with blue-yellow accents (Fury Squad) (Franchise teams), but the official color of each team needs client confirmation. Until then, team components in the digital product must accept the team color as a variable (--team-color), not a fixed value.

Each box shows the actual color pair. The ratio is computed automatically, and the label shows whether it passes for normal text (4.5:1) or only for large text (3:1). For lines and control boundaries (not text), the minimum is 3:1.

Main text

#f6f4f2 / #0b0f14

17.52:1Passes AA

xs-white on xs-black

Mint link

#71ded7 / #0b0f14

12.02:1Passes AA

xs-mint on xs-black

Premium tier

#c7a440 / #0b0f14

8.07:1Passes AA

xs-gold on xs-black

Teal icon

#0e9aa7 / #0b0f14

5.67:1Passes AA

xs-teal on xs-black

LIVE

#e5383b / #0b0f14

4.54:1Passes AA

xs-red on xs-black. Barely passes

Buy tickets

#ffffff / #e5383b

4.23:1Large text only

White on xs-red. Fails for normal text

Buy tickets

#ffffff / #cf2a2e

5.22:1Passes AA

White on xs-red-strong. Use this for buttons and the LIVE label

Teal text

#0e9aa7 / #ffffff

3.39:1Large text only

xs-teal on white. Fails for normal text

Teal text

#0b7480 / #ffffff

5.49:1Passes AA

xs-teal-ink on white

Gold

#c7a440 / #ffffff

2.38:1Fails

xs-gold on white. Fails at all sizes

LIVE

#e5383b / #1a1f26

3.91:1Large text only

xs-red on a xs-graphite card. Fails for small text. The LIVE label on cards uses white text on an xs-red-strong pill

XS-2 archive

#3254a1 / #0b0f14

2.67:1Fails

Key visual blue on xs-black. Fill and decoration only, not for text

XS-2 archive

#5c43b7 / #0b0f14

2.69:1Fails

Backdrop purple on xs-black. Fill and decoration only, not for text

Line

#2e2b2b / #0b0f14

1.37:1Fails

xs-line on xs-black. Decorative only, not enough for input boundaries

Input boundary

#6b7380 / #1a1f26

3.46:1Large text only

xs-line-strong on xs-graphite. Passes 3:1 for control boundaries

Rules that come out of this check:

✓Do

Red buttonUse xs-red-strong (#cf2a2e) with white text
Teal on a light backgroundUse xs-teal-ink for text
Red for small textOK on xs-black only, for labels, numbers, and status
GoldOnly on a dark background

✕Avoid

xs-red button with white textThe ratio is below 4.5:1
Gold on a light backgroundFails even for large text
xs-teal for text on whiteOnly passes for large text
Red for paragraphsToo thin to read for long

Signature gradients

Arena light is the visual signature of XS-3: red from above, teal from below or the side. The CSS code under each bar can be copied directly.

Arena light: red top, teal bottom

radial-gradient(120% 60% at 50% -10%, #531311 0%, transparent 60%), radial-gradient(120% 60% at 50% 110%, #224a4b 0%, transparent 60%), #0b0f14

Hero background and page transitions

Arena light: red top, teal side

radial-gradient(120% 60% at 50% -10%, #531311 0%, transparent 60%), radial-gradient(60% 90% at 105% 60%, #224a4b 0%, transparent 60%), #0b0f14

A variant for wide layouts, as in the FAQ cover

Wordmarklinear-gradient(180deg, #92f8fa 0%, #71ded7 55%, #0e9aa7 100%)Bright mint to teal, taken from the XS-3 logo

Color usage in components is in Digital product UI direction.
Palette decisions are recorded in the Visual decision log.

Research basis

All color codes were taken from screenshots of IG material and then grouped, so they are estimates: method and research limitations. The measured images are in Sources.
The XS-3 palette of black, red, and cyan: Instagram content audit, from Instagram @xseries___
The blue XS-1 LED court and the XS-2 key visual: Edition timeline and XS-2, from Instagram @xseries___ highlights
Contrast ratios were calculated with the WCAG 2.2 contrast formula. The main red pairs were double-checked: white on #e5383b 4.23:1, white on #cf2a2e 5.22:1, #e5383b on #0b0f14 4.54:1, #e5383b on #1a1f26 3.91:1. XS-2 archive accents on #0b0f14: #3254a1 2.67:1 and #5c43b7 2.69:1. Lines: #2e2b2b on #0b0f14 1.37:1, #6b7380 on #1a1f26 3.46:1.
The orange Nova Titans jersey and the navy Fury Squad jersey with blue-yellow accents: Franchise teams, from Instagram @xseries___ highlights. Official team colors are not verified (Four franchise identities).
Official color codes and the decision to lock black, red, and mint are not yet confirmed by the client (Official color codes Locking brand colors). The core palette and card function colors are proposals from the design team.

How we measured

Measured results per edition

XS-3

XS-2 and XS-1

Proposed core palette

Brand colors

Card function colors

Team colors

Contrast check (WCAG 2.2)

Signature gradients

Next

Research basis

How this page connects

Builds on 8

Used by 11