--- title: Color palette intro: Warna yang diukur dari materi XS-1 sampai XS-3, usulan palet inti untuk produk digital, aturan pemakaian, dan hasil cek kontras WCAG. updated: 1 Nov 2026 status: Hipotesis --- > [!WARNING] > Warna diukur dari screenshot Instagram yang sudah terkompresi dan berukuran kecil, jadi nilainya **perkiraan**. Begitu file brand resmi diterima, halaman ini perlu dicocokkan ulang. Lihat pertanyaan [V4](/research/pertanyaan-terbuka/#q-v4) di [Open questions](/research/pertanyaan-terbuka/). ## Cara mengukur Tiga langkah ini dipakai untuk semua angka di halaman ini. ```viz-flow ## Perkecil dan kelompokkan kicker: 1 tone: visual - Gambar evidence diperkecil, lalu tiap piksel dikelompokkan berdasarkan hue, saturasi, dan kecerahan ## Pisahkan netral kicker: 2 tone: visual - Warna netral (saturasi rendah) dipisah dari warna aksen supaya latar hitam tidak "mengotori" rata-rata aksen ## Ambil logo langsung kicker: 3 tone: visual - Area wordmark diambil langsung, lalu dicatat rata-rata serta nilai paling terangnya ``` ## Hasil ukur per edisi ### XS-3 Lihat seberapa sedikit warna yang benar-benar dipakai: hampir semuanya hitam, sisanya cahaya merah dan teal. ```viz-swatches ## Latar dan netral sub: Porsi piksel di materi XS-3 - Latar arena | #040403 | ±60–70% piksel. [Seat plan](/assets/evidence/xs3-seatplan-harga.jpg), [FAQ](/assets/evidence/xs3-faq-1.jpg) - Graphite (tribun, panel) | #2e2b2b | ±9–13%. FAQ, key visual - Putih teks | #f9f9f9 | ±5%. FAQ ## Merah sub: Logo, glow, tier tiket - Merah logo (rata-rata) | #ca3f3e | [Repost pemain](/assets/evidence/xs3-players-repost-1.jpg) - Merah logo (paling terang) | #e5444a | Repost pemain - Merah dalam (glow atas) | #531311 | ±3–5%. FAQ, seat plan, player card - Merah tier tiket | #ba2d24 | ±2%. Seat plan ## Mint dan teal sub: Wordmark dan cahaya samping - Mint logo (rata-rata) | #71ded7 | Repost pemain - Mint logo (paling terang) | #92f8fa | Repost pemain - Teal (cahaya samping) | #4d9c9f | ±1%. FAQ - Teal dalam | #224a4b | ±1%. FAQ, key visual ## Emas sub: Tier tiket - Emas tier tiket | #c7a440 | ±2%. Seat plan ``` Bar di bawah memakai nilai tengah dari rentang di atas. Sisanya adalah foto pemain dan warna campuran yang tidak diukur. ```viz-ratio title: Porsi warna di materi XS-3 - Latar arena | 65 | #040403 | ±60–70% - Graphite | 11 | #2e2b2b | ±9–13% - Putih teks | 5 | #f9f9f9 | ±5% - Merah dalam | 4 | #531311 | ±3–5% - Merah tier tiket | 2 | #ba2d24 | ±2% - Emas tier tiket | 2 | #c7a440 | ±2% - Teal | 1 | #4d9c9f | ±1% - Teal dalam | 1 | #224a4b | ±1% - Sisanya | 9 | #8b949e | Foto pemain, kulit, campuran. Tidak diukur ``` ![Seat plan dan harga](/assets/evidence/xs3-seatplan-harga.jpg "XS-3: seat plan dengan tier warna (teal, emas, merah). Sumber: highlight TICKET IG @xseries___.") ![Player card](/assets/evidence/xs3-players-repost-1.jpg "XS-3: wordmark mint-cyan dengan angka 3 merah. Area ini dipakai untuk mengukur warna logo. Sumber: IG @xseries___.") ### XS-2 dan XS-1 Bandingkan dengan XS-3: dua edisi sebelumnya bertumpu pada biru, dengan emas hangat di konten dokumenter XS-2. ```viz-swatches ## XS-2 sub: Jan 2026 - Biru key visual | #3254a1 | [Falcão vs Ricardinho](/assets/evidence/falcao-ricardinho-1.jpg) - Ungu backdrop | #5c43b7 | [Presscon](/assets/evidence/xs2-presscon.jpg) - Emas dokumenter | #b19577 | [All GOAT](/assets/evidence/xs2-all-goat.jpg) ## XS-1 sub: Sep 2025 - Biru lapangan LED | #599ad4 | [XS-1](/assets/evidence/xs1-1.jpg) - Biru muda highlight | #8cc0d7 | XS-1 ``` ## Usulan palet inti Prinsipnya: **hitam, merah, dan mint adalah warna XSERIES**, bukan warna XS-3 saja. Warna edisi lain boleh hadir sebagai aksen arsip. ### Warna brand Tiga belas token ini adalah palet produk digital. Baca baris per kelompok: netral untuk permukaan, merah untuk aksi, teal-mint untuk brand dan grafik, emas untuk yang langka. ```viz-swatches size: lg ## Netral sub: Latar, permukaan, garis, teks - xs-black | #0b0f14 | Latar utama. Sedikit kebiruan supaya tidak "mati" di layar OLED - xs-graphite | #1a1f26 | Permukaan kartu, panel, navbar - xs-line | #2e2b2b | Garis pemisah dan border dekoratif saja (1,37:1 di atas `xs-black`). Bukan untuk batas input - xs-line-strong | #6b7380 | Batas input form dan kontrol. Minimal 3:1: 4,02:1 di atas `xs-black`, 3,46:1 di atas `xs-graphite` - xs-white | #f6f4f2 | Teks utama di atas gelap ## Merah sub: Aksi dan momen - xs-red | #e5383b | Aksen utama: angka edisi, live, momen kartu - xs-red-strong | #cf2a2e | Tombol merah dengan teks putih - xs-red-deep | #531311 | Glow, gradasi atas ## Teal dan mint sub: Brand, grafik, link - xs-mint | #71ded7 | Wordmark, highlight, link di atas gelap - xs-teal | #0e9aa7 | Grafik, ikon, elemen sekunder - xs-teal-ink | #0b7480 | Teks teal di atas latar terang - xs-teal-deep | #224a4b | Glow, gradasi bawah ## Aksen sub: Hanya di atas gelap - xs-gold | #c7a440 | President Cards, tier tiket premium. Hanya di atas gelap ``` Warna edisi tidak dibuang. Di arsip, tiap edisi tetap memakai aksennya sendiri di dalam bingkai brand yang sama. ```viz-swatches ## XS-1 sub: Aksen arsip - Biru lapangan LED | #599ad4 | XS-1 ## XS-2 sub: Aksen arsip - Biru key visual | #3254a1 | XS-2. Isian dan dekorasi saja, bukan untuk teks (2,67:1 di atas `xs-black`) - Ungu backdrop | #5c43b7 | XS-2. Isian dan dekorasi saja, bukan untuk teks (2,69:1 di atas `xs-black`) ## XS-3 sub: Sama dengan palet inti - xs-red | #e5383b | Angka edisi "3" - xs-mint | #71ded7 | Wordmark - xs-teal | #0e9aa7 | Cahaya samping ``` ### Warna fungsi kartu Tiap jenis kartu dan momen punya satu warna. Pemain harus bisa menebak jenis kartu dari warnanya saja. ```viz-swatches - X Cards (Q1–Q2) | #71ded7 | `xs-mint`. Sama dengan wordmark X - President Cards (Q4) | #c7a440 | `xs-gold`. Takhta, kekuasaan, eksklusif - Efek negatif / lawan | #e5383b | `xs-red`. Bahaya, serangan - Shot clock 24 detik | #f6f4f2 | `xs-white` selama waktu normal - Shot clock 5 detik terakhir | #e5383b | Berubah ke `xs-red`. Urgensi ``` ### Warna tim > [!IMPORTANT] > Warna resmi empat franchise **belum terverifikasi** ([V6](/research/pertanyaan-terbuka/#q-v6)). Dari foto XS-2 terlihat jersey oranye (Nova Titans) dan navy beraksen biru-kuning (Fury Squad) ([Tim franchise](/research/tim/#roster-per-tim)), tapi warna resmi tiap tim perlu dikonfirmasi klien. Sementara itu, komponen tim di produk digital harus menerima warna tim sebagai variabel (`--team-color`), bukan nilai tetap. ## Cek kontras (WCAG 2.2) Setiap kotak menampilkan pasangan warna aslinya. Rasio dihitung otomatis, dan label menunjukkan apakah lolos untuk teks normal (4,5:1) atau hanya teks besar (3:1). Untuk garis dan batas kontrol (bukan teks), batas minimumnya 3:1. ```viz-contrast pass: Lolos AA large: Teks besar saja fail: Gagal - #f6f4f2 | #0b0f14 | Teks utama | `xs-white` di atas `xs-black` - #71ded7 | #0b0f14 | Link mint | `xs-mint` di atas `xs-black` - #c7a440 | #0b0f14 | Tier premium | `xs-gold` di atas `xs-black` - #0e9aa7 | #0b0f14 | Ikon teal | `xs-teal` di atas `xs-black` - #e5383b | #0b0f14 | LIVE | `xs-red` di atas `xs-black`. Lolos tipis - #ffffff | #e5383b | Beli tiket | Putih di atas `xs-red`. Gagal untuk teks normal - #ffffff | #cf2a2e | Beli tiket | Putih di atas `xs-red-strong`. Pakai ini untuk tombol dan label LIVE - #0e9aa7 | #ffffff | Teks teal | `xs-teal` di atas putih. Gagal untuk teks normal - #0b7480 | #ffffff | Teks teal | `xs-teal-ink` di atas putih - #c7a440 | #ffffff | Emas | `xs-gold` di atas putih. Gagal di semua ukuran - #e5383b | #1a1f26 | LIVE | `xs-red` di atas kartu `xs-graphite`. Gagal untuk teks kecil. Label LIVE di kartu memakai teks putih di pill `xs-red-strong` - #3254a1 | #0b0f14 | Arsip XS-2 | Biru key visual di atas `xs-black`. Isian dan dekorasi saja, bukan untuk teks - #5c43b7 | #0b0f14 | Arsip XS-2 | Ungu backdrop di atas `xs-black`. Isian dan dekorasi saja, bukan untuk teks - #2e2b2b | #0b0f14 | Garis | `xs-line` di atas `xs-black`. Dekoratif saja, tidak cukup untuk batas input - #6b7380 | #1a1f26 | Batas input | `xs-line-strong` di atas `xs-graphite`. Lolos 3:1 untuk batas kontrol ``` Aturan yang muncul dari cek ini: ```viz-compare ## Lakukan tone: do - Tombol merah | Pakai `xs-red-strong` (`#cf2a2e`) dengan teks putih - Teal di latar terang | Pakai `xs-teal-ink` untuk teks - Merah untuk teks kecil | Boleh di atas `xs-black` saja, untuk label, angka, dan status - Emas | Hanya di atas latar gelap ## Hindari tone: dont - Tombol `xs-red` dengan teks putih | Rasionya di bawah 4,5:1 - Emas di latar terang | Gagal bahkan untuk teks besar - `xs-teal` untuk teks di atas putih | Hanya lolos untuk teks besar - Merah untuk paragraf | Terlalu tipis untuk dibaca lama ``` ## Gradasi khas Cahaya arena adalah tanda tangan visual XS-3: merah dari atas, teal dari bawah atau samping. Kode CSS di bawah setiap bar bisa langsung disalin. ```viz-gradients - Cahaya arena: merah atas, teal bawah | radial-gradient(120% 60% at 50% -10%, #531311 0%, transparent 60%), radial-gradient(120% 60% at 50% 110%, #224a4b 0%, transparent 60%), #0b0f14 | Latar hero dan transisi halaman - Cahaya arena: merah atas, teal samping | radial-gradient(120% 60% at 50% -10%, #531311 0%, transparent 60%), radial-gradient(60% 90% at 105% 60%, #224a4b 0%, transparent 60%), #0b0f14 | Varian untuk layout lebar, seperti di [cover FAQ](/assets/evidence/xs3-faq-cover.jpg) - Wordmark | linear-gradient(180deg, #92f8fa 0%, #71ded7 55%, #0e9aa7 100%) | Mint terang ke teal, diambil dari logo XS-3 ``` ## Lanjutan - Pemakaian warna di komponen ada di [Arah UI](/visual-direction/arah-ui/). - Keputusan palet dicatat di [Decision log](/visual-direction/log-keputusan/). ## Dasar riset - Semua kode warna diambil dari screenshot materi IG lalu dikelompokkan, jadi hasilnya perkiraan: [metode](/research/log-riset/#metode) dan [batasan riset](/research/log-riset/#batasan). Gambar yang diukur ada di [Daftar sumber](/research/sumber/#aset-bukti). - Palet XS-3 hitam, merah, dan cyan: [Audit konten Instagram](/research/audit-konten-instagram/#xs3-players), dari [Instagram @xseries___](https://www.instagram.com/xseries___/) - Lapangan LED biru XS-1 dan key visual XS-2: [Timeline edisi](/research/timeline-edisi/#xseries-1-2025) dan [XS-2](/research/timeline-edisi/#xseries-2-januari-2026), dari highlight [Instagram @xseries___](https://www.instagram.com/xseries___/) - Rasio kontras dihitung dengan rumus kontras WCAG 2.2. Pasangan merah utama sudah dicek ulang: putih di atas `#e5383b` 4,23:1, putih di atas `#cf2a2e` 5,22:1, `#e5383b` di atas `#0b0f14` 4,54:1, `#e5383b` di atas `#1a1f26` 3,91:1. Aksen arsip XS-2 di atas `#0b0f14`: `#3254a1` 2,67:1 dan `#5c43b7` 2,69:1. Garis: `#2e2b2b` di atas `#0b0f14` 1,37:1, `#6b7380` di atas `#1a1f26` 3,46:1. - Jersey Nova Titans oranye dan Fury Squad navy beraksen biru-kuning: [Tim franchise](/research/tim/#roster-per-tim), dari highlight [Instagram @xseries___](https://www.instagram.com/xseries___/). Warna resmi tim belum terverifikasi ([V6](/research/pertanyaan-terbuka/#q-v6)). - Kode warna resmi dan keputusan mengunci hitam, merah, dan mint belum dikonfirmasi klien ([V4](/research/pertanyaan-terbuka/#q-v4), [V5](/research/pertanyaan-terbuka/#q-v5)). Palet inti dan warna fungsi kartu adalah usulan tim desain.