Color palette
Warna yang diukur dari materi XS-1 sampai XS-3, usulan palet inti untuk produk digital, aturan pemakaian, dan hasil cek kontras WCAG.
Peringatan
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 di Open questions.
Cara mengukur
Tiga langkah ini dipakai untuk semua angka di halaman ini.
- Gambar evidence diperkecil, lalu tiap piksel dikelompokkan berdasarkan hue, saturasi, dan kecerahan
- Warna netral (saturasi rendah) dipisah dari warna aksen supaya latar hitam tidak "mengotori" rata-rata aksen
- 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.
Bar di bawah memakai nilai tengah dari rentang di atas. Sisanya adalah foto pemain dan warna campuran yang tidak diukur.
- Latar arena 65%±60–70%
- Graphite 11%±9–13%
- Putih teks 5%±5%
- Merah dalam 4%±3–5%
- Merah tier tiket 2%±2%
- Emas tier tiket 2%±2%
- Teal 1%±1%
- Teal dalam 1%±1%
- Sisanya 9%Foto pemain, kulit, campuran. Tidak diukur
XS-2 dan XS-1
Bandingkan dengan XS-3: dua edisi sebelumnya bertumpu pada biru, dengan emas hangat di konten dokumenter XS-2.
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
Dua 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.
Warna edisi tidak dibuang. Di arsip, tiap edisi tetap memakai aksennya sendiri di dalam bingkai brand yang sama.
Warna fungsi kartu
Tiap jenis kartu dan momen punya satu warna. Pemain harus bisa menebak jenis kartu dari warnanya saja.
xs-mint. Sama dengan wordmark Xxs-gold. Takhta, kekuasaan, eksklusifxs-red. Bahaya, seranganxs-white selama waktu normalxs-red. UrgensiWarna tim
Penting
Warna resmi empat franchise belum terverifikasi (V6). Dari foto XS-2 terlihat jersey oranye (Nova Titans) dan navy beraksen biru-kuning (Fury Squad) (Tim franchise), 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).
#f6f4f2 / #0b0f14xs-white di atas xs-black#71ded7 / #0b0f14xs-mint di atas xs-black#c7a440 / #0b0f14xs-gold di atas xs-black#0e9aa7 / #0b0f14xs-teal di atas xs-black#e5383b / #0b0f14xs-red di atas xs-black. Lolos tipis#ffffff / #e5383bxs-red. Gagal untuk teks normal#ffffff / #cf2a2exs-red-strong. Pakai ini untuk tombol#0e9aa7 / #ffffffxs-teal di atas putih. Gagal untuk teks normal#0b7480 / #ffffffxs-teal-ink di atas putih#c7a440 / #ffffffxs-gold di atas putih. Gagal di semua ukuran#e5383b / #1a1f26xs-red di atas kartu xs-graphite. Lebih rendah daripada di atas hitam, jadi pakai untuk teks besar atau label tebal sajaAturan yang muncul dari cek ini:
- Tombol merahPakai
xs-red-strong(#cf2a2e) dengan teks putih - Teal di latar terangPakai
xs-teal-inkuntuk teks - Merah untuk teks kecilBoleh di atas hitam, untuk label, angka, dan status
- EmasHanya di atas latar gelap
- Tombol
xs-reddengan teks putihRasionya di bawah 4,5:1 - Emas di latar terangGagal bahkan untuk teks besar
xs-tealuntuk teks di atas putihHanya lolos untuk teks besar- Merah untuk paragrafTerlalu 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.
radial-gradient(120% 60% at 50% -10%, #531311 0%, transparent 60%), radial-gradient(120% 60% at 50% 110%, #224a4b 0%, transparent 60%), #0b0f14Latar hero dan transisi halamanradial-gradient(120% 60% at 50% -10%, #531311 0%, transparent 60%), radial-gradient(60% 90% at 105% 60%, #224a4b 0%, transparent 60%), #0b0f14Varian untuk layout lebar, seperti di cover FAQ
linear-gradient(180deg, #92f8fa 0%, #71ded7 55%, #0e9aa7 100%)Mint terang ke teal, diambil dari logo XS-3Lanjutan
- Pemakaian warna di komponen ada di Arah UI.
- Keputusan palet dicatat di Decision log.
Dasar riset
- Semua kode warna diambil dari screenshot materi IG lalu dikelompokkan, jadi hasilnya perkiraan: metode dan batasan riset. Gambar yang diukur ada di Daftar sumber.
- Palet XS-3 hitam, merah, dan cyan: Audit konten Instagram, dari Instagram @xseries___
- Lapangan LED biru XS-1 dan key visual XS-2: Timeline edisi dan XS-2, dari highlight Instagram @xseries___
- Rasio kontras dihitung dengan rumus kontras WCAG 2.2. Pasangan merah utama sudah dicek ulang: putih di atas
#e5383b4,23:1, putih di atas#cf2a2e5,22:1,#e5383bdi atas#0b0f144,54:1. - Jersey Nova Titans oranye dan Fury Squad navy beraksen biru-kuning: Tim franchise, dari highlight Instagram @xseries___. Warna resmi tim belum terverifikasi (V6).
- Kode warna resmi dan keputusan mengunci hitam, merah, dan mint belum dikonfirmasi klien (V4, V5). Palet inti dan warna fungsi kartu adalah usulan tim desain.
Benang merah halaman ini
Halaman yang menjadi dasar halaman ini, dan halaman lain yang memakainya.