Bhinish Dhiman
Cara mengubah satu warna brand menjadi design token, 50 sampai 950
Diterjemahkan dari versi asli berbahasa Inggris. Baca versi asli
Masukkan warna brand di ramp generator dan beri nama token untuk skalanya. Alat ini membangun sebelas tingkat, 50 sampai 950, pada target lightness OKLCH yang tetap dengan memakai hue dan chroma warna Anda, lalu mengukur setiap tingkat terhadap putih dan hitam untuk memilih role teks, teks besar, border, dan surface di setiap tema. Copy roles memberikannya sebagai CSS custom property dengan blok skema gelap; panel kode memberikan tingkat mentahnya.
Metode di balik ramp token (pertahankan hue, telusuri lightness, beri tugas pada tiap tingkat berdasarkan pengukuran) dijelaskan di Cara membangun palet yang aksesibel dari satu warna brand. Panduan ini adalah sisi mekanisnya: apa yang dilakukan ramp and token generator terhadap hex yang Anda berikan, di bagian mana hasilnya sering mengejutkan orang, dan cara mengeluarkan dua jenis token darinya tanpa tertukar.
Design token adalah nilai bernama yang dirujuk komponen sebagai ganti warna mentah. Alat ini memberi Anda dua jenis. Step token, seperti --brand-600, menamai sebuah posisi (tingkat) di ramp. Role token, seperti --brand-text, menamai sebuah tugas, dan di setiap tema token ini menunjuk ke tingkat mana pun yang menjalankan tugas tersebut.
Membangun ramp dan role-nya
- Masukkan warna brand. Ketik di kolom “Brand colour” atau gunakan swatch di sebelahnya. Kolom ini menerima kode hex, juga nilai rgb(), hsl(), atau oklch().
- Beri nama skala. “Token name” awalnya berisi brand. Nilainya diubah ke huruf kecil, dan apa pun selain huruf, angka, dan tanda hubung menjadi tanda hubung, jadi “Ocean Blue” menghasilkan
--ocean-blue-500. - Baca strip warnanya. Sebelas swatch, 50 sampai 950. Swatch berlabel “yours” adalah tingkat yang target lightness-nya paling dekat dengan lightness warna Anda.
- Baca kartu Light theme dan Dark theme. Masing-masing mencantumkan empat role beserta tingkat yang dipilih, kegunaan role tersebut, dan rasio hasil pengukuran.
- Tekan Copy roles di bilah bawah. Tombol ini menyalin role token untuk kedua tema sebagai CSS custom property.
- Salin tingkat-tingkatnya dari panel kode. Pilih CSS, Tailwind, atau JSON di atasnya lalu tekan Copy.
- Tekan Share jika developer membutuhkan ramp yang sama. Tautannya membawa warna dan nama token, jadi akan membangun ulang ramp yang persis sama.
Sebelas target itu sudah tetap
Alat ini hanya mengambil dua hal dari warna Anda: hue dan chroma-nya. Lightness berasal dari tabel tetap, sama untuk setiap brand, dan chroma diskalakan per tingkat agar ujung yang pucat dan yang pekat tetap bisa ditampilkan. Jika sebuah tingkat masih tidak bisa menampung chroma itu di layar, chroma-nya dikurangi lagi, sementara hue dan lightness dibiarkan.
| Tingkat | Lightness OKLCH | Porsi chroma Anda |
|---|---|---|
| 50 | 0.972 | 14% |
| 100 | 0.938 | 26% |
| 200 | 0.878 | 46% |
| 300 | 0.800 | 68% |
| 400 | 0.702 | 88% |
| 500 | 0.608 | 100% |
| 600 | 0.524 | 96% |
| 700 | 0.442 | 84% |
| 800 | 0.362 | 68% |
| 900 | 0.286 | 50% |
| 950 | 0.212 | 36% |
Jaraknya tidak seragam. Paling rapat di ujung pucat, di mana 0.034 memisahkan 50 dari 100, dibandingkan 0.098 antara 300 dan 400, sehingga tint paling terang letaknya jauh lebih berdekatan daripada nada tengah.
Hex persis Anda tidak ada di ramp
Inilah bagian yang mengejutkan. Karena lightness berasal dari tabel, warna Anda hanya muncul di ramp jika lightness-nya kebetulan sama dengan salah satu target. Jika tidak, tingkat bertanda “yours” adalah tetangga yang dibangun pada target lightness, sering kali dengan porsi chroma Anda yang berbeda.
Alat ini terbuka dengan #2563eb, yang berada pada lightness OKLCH 54.6%. Target terdekat adalah 600, di 0.524 (selisih 0.022, dibandingkan 0.062 untuk 500), jadi 600 ditandai “yours” dan tombol di bilah bertuliskan “Base is 600”. Tingkat itu dibangun pada 0.524 dengan 96% chroma, jadi dekat dengan #2563eb tetapi bukan #2563eb.
Menekan tombol itu akan mengganti warna yang Anda masukkan dengan nilai ramp untuk tingkat tersebut. Lakukan hanya jika Anda memang ingin memakai versi ramp sebagai warna brand. Jika hex brand harus muncul persis di kode, simpan sebagai token tersendiri di samping ramp, jangan mengedit salah satu tingkatnya.
Cara role memilih tingkatnya
Setiap role punya syarat, dan alat ini menelusuri ramp dari ujung surface sampai menemukan tingkat yang memenuhinya. Di kartu terang, penelusuran dimulai dari 50 menuju 950, mengukur setiap tingkat terhadap putih; di kartu gelap, dimulai dari 950 menuju 50, mengukur terhadap hitam. Tingkat pertama yang lolos langsung diambil, artinya tingkat paling tidak ekstrem yang masih lulus.
| Role | Kegunaan menurut alat ini | Syarat | Light theme | Dark theme |
|---|---|---|---|---|
| text | Teks isi di atas latar halaman | 4.5:1 | Tingkat pertama dari 50 yang lolos di atas putih | Tingkat pertama dari 950 yang lolos di atas hitam |
| text-large | Judul 24px ke atas | 3:1 | Sama seperti di atas, pada 3:1 | Sama seperti di atas, pada 3:1 |
| border | Border input dan kontrol lain yang harus mudah ditemukan | 3:1 | Sama seperti di atas, pada 3:1 | Sama seperti di atas, pada 3:1 |
| surface | Blok latar berwarna tipis | Tidak ada | Tingkat 50 | Tingkat 950 |
Ada dua konsekuensinya. Text-large dan border berbagi ambang dan pencarian yang sama, jadi keduanya selalu jatuh di tingkat yang sama. Selain itu, role border jatuh lebih gelap dari yang diduga banyak orang. Untuk ramp netral, di mana lightness OKLCH adalah akar pangkat tiga dari relative luminance, tingkat 500 memberikan 1.05 ÷ (0.608³ + 0.05) ≈ 3.8:1 di atas putih dan tingkat 400 memberikan 1.05 ÷ (0.702³ + 0.05) ≈ 2.7:1. Jadi border yang menunjukkan letak sebuah input, dan karena itu butuh 3:1, berada di 500 atau lebih gelap di atas putih. Garis pemisah yang murni dekoratif tidak punya syarat dan boleh sepucat apa pun.
Jika tidak ada tingkat di sebuah ramp yang mencapai rasio sebuah role, Copy roles akan menulis baris itu sebagai komentar yang menyatakannya, alih-alih diam-diam menghilangkan role tersebut.
Menghubungkan role token ke step token
Copy roles menulis nilai hex, sebuah blok :root untuk tema terang dan blok kedua di dalam media query prefers-color-scheme: dark. Panel kode menulis step token: CSS memberikan --brand-50 sampai --brand-950, Tailwind memberikan objek colors dalam hex untuk config JavaScript, dan JSON menyusun sebelas tingkat di bawah nama token.
Agar keduanya tetap selaras saat warna brand berubah, tempel step token, lalu arahkan setiap role ke tingkat yang disebut di kartunya, bukan ke hex hasil salinan:
:root {
--brand-text: var(--brand-600); /* the step the Light theme card chose */
}Jika situs Anda berganti tema dengan class atau atribut, bukan dengan pengaturan sistem, pindahkan blok gelap ke bawah selector tersebut.
Untuk tingkat-tingkatnya, gunakan panel kode, bukan tombol Export di bilah bawah. Export dipakai bersama oleh semua alat warna dan menamai warna berdasarkan urutan, brand-1 sampai brand-11, bukan berdasarkan tingkat.
Cara lain untuk melakukannya
Tidak ada cara bawaan di macOS, Windows, atau iPhone untuk membangun ramp token, dan tidak ada cara lewat command line di antara yang kami jamin dalam panduan-panduan ini. Secara manual, metode di panduan sebelumnya bisa dipakai dengan color picker apa pun yang menampilkan OKLCH, ditambah contrast checker untuk mengukur setiap tingkat terhadap setiap latar.
Memastikan tidak ada yang dikirim
Tidak ada file yang terlibat, dan warna serta nama token disimpan setelah tanda # di address bar, bagian yang tidak dikirim browser ke server. Dengan DevTools terbuka di panel Network, ubah warna brand beberapa kali dan perhatikan: tidak ada data keluar yang membawanya.
Buka ramp and token generator dengan hex brand Anda dan baca kedua kartu role sebelum melihat swatch-nya. Jika Anda bekerja dengan Tailwind v4, alat Tailwind colours membangun sebelas tingkat yang sama dan mengekspornya sebagai blok @theme.