Generator Tint dan Shade Warna

Cara menggunakan generator tint dan shade

1. Pilih Warna dasar dengan kotak warna, atau ketik nilai di Kode warna: #1E90FF, rgb(30 144 255), hsl(210 100% 56%), atau nama warna CSS seperti teal.
2. Pilih Langkah: 5%, 10%, 20%, atau 25%. Dengan 10%, Anda mendapatkan tint pada 10%, 20% … 100% dan shade dalam jumlah yang sama.
3. Pilih cara Campur dalam: OKLCH (perseptual) atau sRGB (klasik). Kedua baris langsung diperbarui: Tint (dicampur putih) dan Shade (dicampur hitam), masing-masing dimulai dari warna dasar.
4. Klik Salin di bawah contoh warna mana pun untuk menyalin kode HEX-nya.
5. Di bawah Ekspor sebagai, pilih Variabel CSS, Konfigurasi Tailwind (v3), Tailwind @theme (v4), Variabel SCSS, atau JSON, isi Nama seperti primary atau brand, lalu Salin atau Unduh kodenya.

Tint, shade, dan tone

Dalam teori warna, tint adalah warna yang dicampur putih, shade adalah warna yang dicampur hitam, dan tone adalah warna yang dicampur abu-abu. Persentasenya menunjukkan berapa banyak putih atau hitam yang ditambahkan: tint 30% terdiri dari 70% warna dasar dan 30% putih. Pada 100% Anda mencapai putih murni atau hitam murni; karena itu contoh warna terakhir di setiap baris selalu #FFFFFF atau #000000, yang menandai ujung skala.

Tint dan shade adalah cara tercepat untuk membangun skala warna yang konsisten dari satu warna brand: latar belakang terang dan status hover dari tint, sedangkan border, status ditekan, dan teks gelap dari shade.

Campuran OKLCH atau sRGB?

sRGB (klasik) mencampur nilai merah, hijau, dan biru secara langsung. Inilah yang dilakukan sebagian besar generator lama, dan sama dengan CSS color-mix(in srgb, …). Rumus tint cukup channel + (255 − channel) × p, dan untuk shade channel × (1 − p). Hasilnya mudah ditebak, tetapi langkah-langkahnya tidak merata secara perseptual: warna biru cenderung bergeser ke ungu saat makin terang, dan shade yang gelap sering tampak kusam.

OKLCH (perseptual) mencampur warna di ruang warna OKLCH yang dirancang oleh Björn Ottosson pada 2020, seperti CSS color-mix(in oklch, …). Kecerahan, kroma, dan rona diinterpolasi secara terpisah. Putih dan hitam tidak memiliki rona, sehingga rona dasar dipertahankan sepanjang skala, dan setiap langkah mengubah kecerahan dengan jumlah yang secara visual mirip. Warna yang akan jatuh di luar gamut sRGB dikembalikan dengan mengurangi kroma, bukan dengan memotong kanal, sehingga rona tetap stabil. Untuk design system, cara ini biasanya menghasilkan skala yang lebih bersih dan merata.

Menggunakan hasil ekspor

• Variabel CSS menghasilkan blok :root seperti --primary-tint-20 dan --primary-shade-40, siap ditempel ke stylesheet.
• Konfigurasi Tailwind (v3) menghasilkan objek colors untuk theme.extend.colors; Anda lalu bisa menulis class seperti bg-primary-tint-20 atau text-primary-shade-60. DEFAULT berisi warna dasar, jadi bg-primary juga berfungsi.
• Tailwind @theme (v4) menghasilkan variabel --color-… untuk konfigurasi berbasis CSS di Tailwind 4.
• Variabel SCSS dan JSON cocok untuk alat build lain dan design token.

Nama diubah menjadi huruf kecil dan spasi menjadi tanda hubung, jadi “Brand Blue” menjadi brand-blue.