Warna Shades Generator

Tint dan shade

Tint dibuat dengan mencampur warna dengan putih, membuatnya semakin terang. Shade dibuat dengan mencampur dengan hitam, membuatnya semakin gelap. Bersama-sama, mereka membentuk skala tonal lengkap, berguna untuk desain UI, gradien, status hover, dan sistem warna yang dapat diakses.

Pertanyaan umum

Bagaimana saya menggunakan shade ini?

Gunakan tint terang untuk latar belakang, status hover, dan border. Gunakan shade gelap untuk teks, status aktif, dan penekanan. Klik "Salin semua sebagai variabel CSS" untuk mendapatkan cuplikan CSS yang siap digunakan.

Bisakah saya menyalin warna secara individual?

Ya! Klik sampel mana pun untuk menyalin nilai HEX-nya ke clipboard.

Tint, Shade, dan Tone, Definisi Formal

Tiga istilah digunakan secara longgar; teori warna klasik membedakannya dengan tepat:

• Tint = warna dasar + putih. Lebih terang dan lebih pucat. Pink adalah tint dari merah; biru langit adalah tint dari biru.
• Shade = warna dasar + hitam. Lebih gelap dan lebih dalam. Maroon adalah shade dari merah; navy adalah shade dari biru.
• Tone = warna dasar + abu-abu. Saturasi lebih rendah, lebih redup. Menambahkan nuansa tanpa banyak mengubah kecerahan.

Generator ini menghasilkan tint (lebih terang dari dasar) dan shade (lebih gelap). Tone (menambahkan abu-abu daripada putih atau hitam) berguna untuk palet yang redup dan sophisticated (bayangkan sistem warna desain interior tahun 1970-an) tetapi jarang dibutuhkan untuk pekerjaan UI tipikal.

Mengapa Sistem Desain Modern Menggunakan Skala Numerik

Tailwind CSS mempopulerkan skala numerik 50-100-200-…-900-950 per warna, dengan stop «500» secara konvensional diperlakukan sebagai basis. Material Design menggunakan sistem paralel 50-100-…-900; Bootstrap 5 menggunakan 100-…-900; IBM Carbon menggunakan 10 stop per swatch. Ide bersama: satu warna merek jarang cukup, UI membutuhkan varian yang konsisten untuk state hover, latar belakang, border, focus ring, state nonaktif, badge, dan padanan mode gelap. Skala numerik yang dapat diprediksi memberikan varian tersebut dengan cara yang portabel di seluruh komponen, dapat di-refactor ketika merek berkembang, dan mudah ditemukan oleh siapa pun yang membaca codebase.

Bagaimana Algoritma Berbeda Menghitung Skala

Ada tiga cara umum untuk menghitung skala tint/shade, dengan hasil visual yang berbeda:

• Pencampuran RGB dengan putih / hitam. Definisi teori seni. Menghasilkan tint dan shade yang setia tetapi tidak memperhitungkan keseragaman perseptual, kuning cepat kehilangan saturasi, biru tetap kaya.
• Penyesuaian lightness HSL. Cepat dan mudah: naikkan channel L untuk tint, turunkan untuk shade. Pendekatan yang paling umum di alat lama. Kelemahannya adalah lightness HSL tidak seragam secara perseptual, kuning pada L 50% terlihat jauh lebih cerah daripada biru pada L 50%, sehingga palet yang dibangun dengan langkah HSL terlihat tidak merata di berbagai hue.
• Penskalaan lightness OKLCH atau CIELAB. Pendekatan modern yang seragam secara perseptual. L dalam OKLCH dikalibrasi sehingga «200 → 300 → 400» terasa seperti langkah yang sama terlepas dari hue-nya. Tailwind v4 (dirilis Januari 2025) membangun ulang semua palet defaultnya menggunakan OKLCH untuk alasan inilah.

Jika skala Anda terlihat «datar» (langkah kuning yang pudar, langkah biru yang semuanya terbaca sebagai biru gelap yang sama) ini hampir selalu karena perhitungan yang mendasarinya berbasis HSL bukan berbasis OKLCH. CSS modern (CSS Color Module Level 4) mengekspos oklch(), lab(), dan color-mix(in oklch, …) secara langsung, menjadikan skala yang seragam secara perseptual sebagai one-liner tanpa alat eksternal apa pun.

Kasus Penggunaan

• Memulai sistem desain dari satu warna merek. Pilih HEX merek, hasilkan skala, salin variabel CSS, kirimkan.
• Menyesuaikan peta colors Tailwind. Ganti warna merek default dengan skala 11 stop milik Anda.
• State hover dan focus UI. Pola umum: latar belakang tombol menggunakan 500, hover menggunakan 600, active menggunakan 700, focus ring menggunakan 400 dengan opacity rendah.
• Latar belakang dan elevasi. Latar belakang kartu menggunakan 50; border halus menggunakan 200; teks nonaktif menggunakan 400.
• Padanan mode gelap. Banyak sistem menghasilkan skala mode gelap paralel daripada membalikkan skala terang secara matematis, warna yang terlihat seimbang pada putih tidak selalu terlihat seimbang pada hampir-hitam.
• Variasi mockup. Bandingkan tiga kandidat merek dengan cepat dengan menghasilkan skala untuk masing-masing dan menjatuhkannya ke dalam mockup UI yang sama.
• Buku swatch cetak. Pra-flight palet cetak untuk melihat seberapa halus langkah-langkahnya sebenarnya saat berdekatan.

Aksesibilitas dan Kontras

Skala yang dihasilkan hanya seberguna pasangan teks-pada-latar-belakang yang dihasilkannya. Minimum WCAG 2.1 yang perlu diingat:

• Teks isi normal: 4,5:1 terhadap latar belakangnya (Level AA).
• Teks besar atau tebal (18 pt / 14 pt tebal ke atas): 3:1 (Level AA).
• Komponen UI dan objek grafis: 3:1 (Level AA, SC 1.4.11).

Aturan yang dapat diandalkan di sebagian besar skala yang dibangun dengan baik: pasangan 50 + 900 selalu lolos untuk teks isi, pasangan 100 + 800 hampir selalu lolos. Pasangan 400 + 500 hampir tidak pernah lolos. Uji pasangan spesifik yang Anda inginkan, alat Pemeriksa Kontras Warna menghitung rasio WCAG untuk dua nilai HEX mana pun.

Menghubungkan Keluaran ke Codebase Anda

Tiga cara umum untuk menggunakan skala yang dihasilkan:

/* 1. Plain CSS variables */
:root {
  --brand-50: #f0f9fc;
  --brand-100: #d9eef6;
  --brand-500: #2b7190;
  --brand-900: #0d2935;
}

.btn { background: var(--brand-500); }
.btn:hover { background: var(--brand-600); }

// 2. Tailwind config (tailwind.config.js)
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#f0f9fc',
          100: '#d9eef6',
          500: '#2b7190',
          900: '#0d2935',
        },
      },
    },
  },
};

// then in markup
<button class="bg-brand-500 hover:bg-brand-600">Click</button>

// 3. Sass / SCSS map
$brand: (
  50:  #f0f9fc,
  500: #2b7190,
  900: #0d2935,
);

.btn { background: map-get($brand, 500); }

Kesalahan Umum

1. Menghasilkan terlalu banyak stop. 11 Tailwind adalah kisaran manis. 20 stop berlebihan, sebagian besar tidak dapat dibedakan secara visual, dan Anda tidak akan pernah menggunakannya.
2. Menggunakan skala berbasis HSL untuk warna kuning / oranye / fluoresen. Mereka pudar di stop terang dan tidak menggelap dengan bersih. Gunakan generasi berbasis OKLCH jika warna merek Anda masuk ke rentang hue yang «rumit».
3. Memperlakukan skala sebagai final tanpa memeriksa kontras teks. Hubungan warna yang indah terkadang memasangkan teks putih dengan stop 400 dan gagal WCAG 4,5:1. Uji setiap pasangan yang akan Anda gunakan.
4. Membalikkan palet terang untuk membuat palet mode gelap. Menggoda secara matematis, salah secara visual, warna yang terasa seimbang pada putih terasa mencolok pada hampir-hitam. Hasilkan atau tuning secara manual skala mode gelap paralel.
5. Menggunakan warna dasar sebagai «500» ketika secara perseptual cocok dengan stop lain yang lebih baik. Jika warna merek Anda benar-benar gelap, mungkin itu adalah 700 dari skalanya; biarkan hubungan perseptual menentukan slot mana yang ditempatinya, bukan konvensi.
6. Melupakan stop 50. Tint paling terang adalah yang paling berguna untuk latar belakang dan highlight halus. Jangan potong skala Anda di 100.

Pertanyaan yang Sering Diajukan Lainnya

Mengapa skala saya terlihat datar, semua stop terasa sama?

Dua penyebab umum: (1) terlalu banyak langkah dalam rentang yang terlalu sempit, coba lebih sedikit langkah, terutama jika warnanya sudah mid-luminance; (2) penskalaan berbasis HSL pada hue di mana HSL kurang dikalibrasi dengan baik (kuning, oranye, warna neon). Menggunakan generator palet berbasis OKLCH biasanya memperbaiki keduanya.

Bagaimana cara menghasilkan palet mode gelap dari skala mode terang?

Jangan sekadar membalik. Pembalikan naif (balik stop terang dan gelap) menghasilkan palet mode gelap yang terlihat mencolok atau pudar. Konvensi di Material 3, Radix Colors, dan varian gelap Tailwind adalah menghasilkan skala paralel yang disetel untuk latar belakang gelap, biasanya dengan saturasi yang sedikit dikurangi dan hue yang digeser untuk mengkompensasi bagaimana warna dipersepsikan terhadap permukaan gelap. Sebagian besar sistem desain besar menerbitkan kedua palet secara berdampingan.

Bisakah saya menggunakan warna yang dihasilkan secara komersial?

Ya. Nilai warna tidak dapat dilindungi hak cipta; kode HEX adalah fakta tentang piksel. Gunakan palet yang dihasilkan di mana saja, proyek open-source, situs komersial, sistem merek, cetak, kemasan.

Berapa jumlah langkah yang baik?

Untuk desain UI, 9 hingga 11 stop per warna adalah konvensi yang sudah mapan (Tailwind, Bootstrap, Carbon semuanya ada dalam rentang tersebut). Material Design menggunakan 13. Di bawah 7 stop skala terasa under-resolved; di atas 13 stop menjadi sulit dibedakan satu sama lain.

Apakah ada yang dikirim ke server?

Tidak. Perhitungan matematika warna berjalan di browser Anda; HEX input, stop yang dihasilkan, dan CSS yang disalin tidak pernah menyentuh server. Berguna ketika warna merek belum dirilis atau sedang embargo.

Apa bedanya dengan generator palet warna?

Generator palet memilih beberapa warna berbeda yang bekerja bersama (komplementer, analog, triadik, dll.), hue yang sepenuhnya berbeda. Generator shade (yang ini) mempertahankan satu hue dan menghasilkan varian yang lebih terang dan lebih gelap darinya. Pekerjaan yang berbeda: generator palet memberikan Anda warna-utama merek ditambah aksen; generator shade memberikan variasi dari salah satu warna tersebut.

Alat terkait