---
title: Color palette
intro: Colors measured from XS-1 to XS-3 material, a proposed core palette for the digital product, usage rules, and WCAG contrast check results.
updated: 1 Nov 2026
status: Hipotesis
---

> [!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 [V4](/research/pertanyaan-terbuka/#q-v4) on the [Open questions](/research/pertanyaan-terbuka/).

## How we measured

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

```viz-flow
## Shrink and group
kicker: 1
tone: visual
- Evidence images are shrunk, then each pixel is grouped by hue, saturation, and brightness
## Separate neutrals
kicker: 2
tone: visual
- Neutral colors (low saturation) are separated from accent colors so the black background does not "dirty" the accent average
## Sample the logo directly
kicker: 3
tone: visual
- 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.

```viz-swatches
## Background and neutrals
sub: Pixel share in XS-3 material
- Arena background | #040403 | ±60–70% of pixels. [Seat plan](/assets/evidence/xs3-seatplan-harga.jpg), [FAQ](/assets/evidence/xs3-faq-1.jpg)
- Graphite (stands, panels) | #2e2b2b | ±9–13%. FAQ, key visual
- Text white | #f9f9f9 | ±5%. FAQ
## Red
sub: Logo, glow, ticket tiers
- Logo red (average) | #ca3f3e | [Player repost](/assets/evidence/xs3-players-repost-1.jpg)
- Logo red (brightest) | #e5444a | Player repost
- Deep red (top glow) | #531311 | ±3–5%. FAQ, seat plan, player cards
- Ticket tier red | #ba2d24 | ±2%. Seat plan
## Mint and teal
sub: Wordmark and side light
- Logo mint (average) | #71ded7 | Player repost
- Logo mint (brightest) | #92f8fa | Player repost
- Teal (side light) | #4d9c9f | ±1%. FAQ
- Deep teal | #224a4b | ±1%. FAQ, key visual
## Gold
sub: Ticket tier
- Ticket tier gold | #c7a440 | ±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.

```viz-ratio
title: Color share in XS-3 material
- Arena background | 65 | #040403 | ±60–70%
- Graphite | 11 | #2e2b2b | ±9–13%
- Text white | 5 | #f9f9f9 | ±5%
- Deep red | 4 | #531311 | ±3–5%
- Ticket tier red | 2 | #ba2d24 | ±2%
- Ticket tier gold | 2 | #c7a440 | ±2%
- Teal | 1 | #4d9c9f | ±1%
- Deep teal | 1 | #224a4b | ±1%
- The rest | 9 | #8b949e | Player photos, skin, mixed colors. Not measured
```

![Seat plan and prices](/assets/evidence/xs3-seatplan-harga.jpg "XS-3: seat plan with color tiers (teal, gold, red). Source: TICKET IG highlight @xseries___.")
![Player card](/assets/evidence/xs3-players-repost-1.jpg "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.

```viz-swatches
## XS-2
sub: Jan 2026
- Key visual blue | #3254a1 | [Falcão vs Ricardinho](/assets/evidence/falcao-ricardinho-1.jpg)
- Backdrop purple | #5c43b7 | [Presscon](/assets/evidence/xs2-presscon.jpg)
- Documentary gold | #b19577 | [All GOAT](/assets/evidence/xs2-all-goat.jpg)
## XS-1
sub: Sep 2025
- LED court blue | #599ad4 | [XS-1](/assets/evidence/xs1-1.jpg)
- Light blue highlight | #8cc0d7 | XS-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.

```viz-swatches
size: lg
## Neutrals
sub: Background, surface, line, text
- xs-black | #0b0f14 | Main background. Slightly bluish so it does not "die" on OLED screens
- xs-graphite | #1a1f26 | Card surfaces, panels, navbar
- xs-line | #2e2b2b | Divider lines and decorative borders only (1.37:1 on `xs-black`). Not for input boundaries
- xs-line-strong | #6b7380 | Form input and control boundaries. At least 3:1: 4.02:1 on `xs-black`, 3.46:1 on `xs-graphite`
- xs-white | #f6f4f2 | Main text on dark
## Red
sub: Action and moments
- xs-red | #e5383b | Main accent: edition number, live, card moments
- xs-red-strong | #cf2a2e | Red button with white text
- xs-red-deep | #531311 | Glow, top gradient
## Teal and mint
sub: Brand, graphics, links
- xs-mint | #71ded7 | Wordmark, highlight, links on dark
- xs-teal | #0e9aa7 | Graphics, icons, secondary elements
- xs-teal-ink | #0b7480 | Teal text on a light background
- xs-teal-deep | #224a4b | Glow, bottom gradient
## Accent
sub: Only on dark
- xs-gold | #c7a440 | President 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.

```viz-swatches
## XS-1
sub: Archive accent
- LED court blue | #599ad4 | XS-1
## XS-2
sub: Archive accent
- Key visual blue | #3254a1 | XS-2. Fill and decoration only, not for text (2.67:1 on `xs-black`)
- Backdrop purple | #5c43b7 | XS-2. Fill and decoration only, not for text (2.69:1 on `xs-black`)
## XS-3
sub: Same as the core palette
- xs-red | #e5383b | Edition number "3"
- xs-mint | #71ded7 | Wordmark
- xs-teal | #0e9aa7 | Side 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.

```viz-swatches
- X Cards (Q1–Q2) | #71ded7 | `xs-mint`. Same as the X wordmark
- President Cards (Q4) | #c7a440 | `xs-gold`. Throne, power, exclusive
- Negative effect / opponent | #e5383b | `xs-red`. Danger, attack
- 24-second shot clock | #f6f4f2 | `xs-white` during normal time
- Last 5 seconds of the shot clock | #e5383b | Changes to `xs-red`. Urgency
```

### Team colors

> [!IMPORTANT]
> The official colors of the four franchises are **not verified** ([V6](/research/pertanyaan-terbuka/#q-v6)). XS-2 photos show an orange jersey (Nova Titans) and a navy jersey with blue-yellow accents (Fury Squad) ([Franchise teams](/research/tim/#roster-by-team)), 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.

## Contrast check (WCAG 2.2)

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.

```viz-contrast
pass: Passes AA
large: Large text only
fail: Fails
- #f6f4f2 | #0b0f14 | Main text | `xs-white` on `xs-black`
- #71ded7 | #0b0f14 | Mint link | `xs-mint` on `xs-black`
- #c7a440 | #0b0f14 | Premium tier | `xs-gold` on `xs-black`
- #0e9aa7 | #0b0f14 | Teal icon | `xs-teal` on `xs-black`
- #e5383b | #0b0f14 | LIVE | `xs-red` on `xs-black`. Barely passes
- #ffffff | #e5383b | Buy tickets | White on `xs-red`. Fails for normal text
- #ffffff | #cf2a2e | Buy tickets | White on `xs-red-strong`. Use this for buttons and the LIVE label
- #0e9aa7 | #ffffff | Teal text | `xs-teal` on white. Fails for normal text
- #0b7480 | #ffffff | Teal text | `xs-teal-ink` on white
- #c7a440 | #ffffff | Gold | `xs-gold` on white. Fails at all sizes
- #e5383b | #1a1f26 | LIVE | `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
- #3254a1 | #0b0f14 | XS-2 archive | Key visual blue on `xs-black`. Fill and decoration only, not for text
- #5c43b7 | #0b0f14 | XS-2 archive | Backdrop purple on `xs-black`. Fill and decoration only, not for text
- #2e2b2b | #0b0f14 | Line | `xs-line` on `xs-black`. Decorative only, not enough for input boundaries
- #6b7380 | #1a1f26 | Input boundary | `xs-line-strong` on `xs-graphite`. Passes 3:1 for control boundaries
```

Rules that come out of this check:

```viz-compare
## Do
tone: do
- Red button | Use `xs-red-strong` (`#cf2a2e`) with white text
- Teal on a light background | Use `xs-teal-ink` for text
- Red for small text | OK on `xs-black` only, for labels, numbers, and status
- Gold | Only on a dark background
## Avoid
tone: dont
- `xs-red` button with white text | The ratio is below 4.5:1
- Gold on a light background | Fails even for large text
- `xs-teal` for text on white | Only passes for large text
- Red for paragraphs | Too 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.

```viz-gradients
- 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](/assets/evidence/xs3-faq-cover.jpg)
- Wordmark | linear-gradient(180deg, #92f8fa 0%, #71ded7 55%, #0e9aa7 100%) | Bright mint to teal, taken from the XS-3 logo
```

## Next

- Color usage in components is in [Digital product UI direction](/visual-direction/arah-ui/).
- Palette decisions are recorded in the [Visual decision log](/visual-direction/log-keputusan/).

## Research basis

- All color codes were taken from screenshots of IG material and then grouped, so they are estimates: [method](/research/log-riset/#method) and [research limitations](/research/log-riset/#limitations). The measured images are in [Sources](/research/sumber/#evidence-assets).
- The XS-3 palette of black, red, and cyan: [Instagram content audit](/research/audit-konten-instagram/#xs3-players), from [Instagram @xseries___](https://www.instagram.com/xseries___/)
- The blue XS-1 LED court and the XS-2 key visual: [Edition timeline](/research/timeline-edisi/#xseries-1-2025) and [XS-2](/research/timeline-edisi/#xseries-2-january-2026), from [Instagram @xseries___](https://www.instagram.com/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](/research/tim/#roster-by-team), from [Instagram @xseries___](https://www.instagram.com/xseries___/) highlights. Official team colors are not verified ([V6](/research/pertanyaan-terbuka/#q-v6)).
- Official color codes and the decision to lock black, red, and mint are not yet confirmed by the client ([V4](/research/pertanyaan-terbuka/#q-v4), [V5](/research/pertanyaan-terbuka/#q-v5)). The core palette and card function colors are proposals from the design team.