Lompat ke konten
Aback Tools Logo

Generator Tint & Shade

Buat skala warna lengkap dari warna dasar apa pun — tint yang dicampur putih dan shade yang dicampur hitam. Pilih 5, 8, 10, atau 12 langkah per sisi, klik swatch apa pun untuk menyalin kode HEX-nya, dan ekspor palet lengkap sebagai variabel CSS, objek konfigurasi Tailwind CSS, atau daftar HEX biasa. Tanpa pendaftaran.

Tint & Shade Generator

Enter any base color to instantly generate tints (mixed with white) and shades (mixed with black). Click any swatch to copy its HEX code. Export as CSS variables, Tailwind config, or a plain HEX list - all processed locally in your browser.

Base Color

#3B82F6 · rgb(59, 130, 246) · hsl(217, 91%, 60%)

Quick Presets

Generated Palette
Click any swatch to copy its HEX code

Tints - mixed with white (10 steps)

Base Color

Shades - mixed with black (10 steps)

TypeHEXRGBHSL
Tint 1#4D8DF7rgb(77, 141, 247)hsl(217, 91%, 64%)
Tint 2#5F99F8rgb(95, 153, 248)hsl(217, 92%, 67%)
Tint 3#70A4F8rgb(112, 164, 248)hsl(217, 91%, 71%)
Tint 4#82AFF9rgb(130, 175, 249)hsl(217, 91%, 74%)
Tint 5#94BBFArgb(148, 187, 250)hsl(217, 91%, 78%)
Tint 6#A6C6FBrgb(166, 198, 251)hsl(217, 91%, 82%)
Tint 7#B8D2FCrgb(184, 210, 252)hsl(217, 92%, 85%)
Tint 8#CADDFDrgb(202, 221, 253)hsl(218, 93%, 89%)
Tint 9#DBE8FDrgb(219, 232, 253)hsl(217, 89%, 93%)
Tint 10#EDF4FErgb(237, 244, 254)hsl(215, 89%, 96%)
Base#3B82F6rgb(59, 130, 246)hsl(217, 91%, 60%)
Shade 1#3676E0rgb(54, 118, 224)hsl(217, 73%, 55%)
Shade 2#306AC9rgb(48, 106, 201)hsl(217, 61%, 49%)
Shade 3#2B5FB3rgb(43, 95, 179)hsl(217, 61%, 44%)
Shade 4#26539Drgb(38, 83, 157)hsl(217, 61%, 38%)
Shade 5#204786rgb(32, 71, 134)hsl(217, 61%, 33%)
Shade 6#1B3B70rgb(27, 59, 112)hsl(217, 61%, 27%)
Shade 7#152F59rgb(21, 47, 89)hsl(217, 62%, 22%)
Shade 8#102343rgb(16, 35, 67)hsl(218, 61%, 16%)
Shade 9#0B182Drgb(11, 24, 45)hsl(217, 61%, 11%)
Shade 10#050C16rgb(5, 12, 22)hsl(215, 63%, 5%)
Export Palette
:root {
  --color-tint-1: #4d8df7;
  --color-tint-2: #5f99f8;
  --color-tint-3: #70a4f8;
  --color-tint-4: #82aff9;
  --color-tint-5: #94bbfa;
  --color-tint-6: #a6c6fb;
  --color-tint-7: #b8d2fc;
  --color-tint-8: #caddfd;
  --color-tint-9: #dbe8fd;
  --color-tint-10: #edf4fe;
  --color-base: #3b82f6;
  --color-shade-1: #3676e0;
  --color-shade-2: #306ac9;
  --color-shade-3: #2b5fb3;
  --color-shade-4: #26539d;
  --color-shade-5: #204786;
  --color-shade-6: #1b3b70;
  --color-shade-7: #152f59;
  --color-shade-8: #102343;
  --color-shade-9: #0b182d;
  --color-shade-10: #050c16;
}

All tint and shade generation runs 100% locally in your browser - your color data is never sent to any server. Tints are created by linearly interpolating between the base color and white; shades by interpolating between the base color and black.

Mengapa Menggunakan Generator Tint & Shade Kami?

  • Pembuatan Tint & Shade Instan: Generator memperbarui seluruh palet Anda pada setiap perubahan warna tanpa jeda. Klik swatch apa pun untuk menyalin kode HEX-nya seketika — tanpa tombol yang perlu ditekan.
  • Aman & 100% Privat: Semua pembuatan tint dan shade berjalan sepenuhnya di browser Anda. Data warna Anda tidak pernah dikirim ke server mana pun — aman untuk warna merek yang belum dirilis dan sistem desain rahasia.
  • Ekspor sebagai Variabel CSS, Konfigurasi Tailwind, atau Daftar HEX: Ekspor palet yang dihasilkan dalam tiga format: properti khusus CSS (:root), objek konfigurasi Tailwind CSS, atau daftar HEX biasa. Nama variabel dan jumlah langkah dapat dikonfigurasi (5, 8, 10, atau 12 langkah).
  • 100% Gratis - Tanpa Pendaftaran: Sepenuhnya gratis tanpa akun, tanpa tingkat premium, tanpa batas penggunaan, dan tanpa iklan yang menghalangi antarmuka. Buat tint dan shade sebanyak yang Anda butuhkan.

Kasus Penggunaan Umum Generator Tint & Shade

  • Skala Warna Sistem Desain: Insinyur sistem desain menggunakan generator untuk membangun skala warna lengkap untuk pustaka komponen. Ekspor langsung sebagai variabel CSS atau konfigurasi Tailwind untuk diintegrasikan ke pipeline design token Anda.
  • Perluasan Palet Warna Merek: Desainer merek menggunakan generator untuk memperluas satu warna merek menjadi palet lengkap varian lebih terang dan lebih gelap — menyediakan rentang yang dibutuhkan untuk latar belakang, batas, status hover, dan teks.
  • Pustaka Warna Figma & Sketch: Desainer UI menggunakan generator untuk membuat pustaka warna di Figma dan Sketch. Salin kode HEX dari tabel swatch dan tempel langsung ke gaya warna di alat desain Anda.
  • Situs E-commerce & Pemasaran: Pengembang web menggunakan generator untuk membuat status hover, status aktif, dan varian latar belakang dari satu warna merek — memastikan konsistensi visual di halaman produk dan landing page.
  • Adaptasi Warna Mode Gelap: Pengembang yang membuat tema mode gelap menggunakan generator untuk menemukan varian lebih terang yang sesuai dari warna dasar mereka untuk latar gelap — memastikan kontras cukup tanpa mengubah hue merek.
  • Warna Khusus Tailwind CSS: Pengembang Tailwind CSS menggunakan generator untuk membuat skala warna khusus yang sesuai konvensi penamaan 50-900 Tailwind. Ekspor langsung sebagai objek konfigurasi Tailwind dan tempel ke tailwind.config.js.

Apa Itu Tint dan Shade?

Dalam teori warna, tint adalah warna yang dicampur putih, membuatnya lebih terang dan kurang jenuh. Shade adalah warna yang dicampur hitam, membuatnya lebih gelap dan lebih jenuh. Bersama-sama, tint dan shade membentuk skala warna — rentang nilai dari hampir putih hingga hampir hitam yang semuanya berbagi hue yang sama dengan warna dasar. Skala warna adalah fondasi sistem desain modern: menyediakan seluruh rentang nilai yang dibutuhkan untuk latar belakang, batas, teks, status hover, dan indikator fokus sambil mempertahankan konsistensi visual. Generator tint dan shade berbasis browser kami membuat skala ini seketika dari warna dasar apa pun menggunakan interpolasi RGB linier.

Cara Kerja Generator Tint & Shade Kami

  1. Masukkan Warna Dasar Anda: Ketik nilai HEX (mis. #3b82f6 ) atau RGB ke input warna, atau gunakan pemilih warna bawaan. Anda juga dapat memilih warna prasetel untuk memulai dengan cepat.
  2. Pilih Jumlah Langkah: Pilih 5, 8, 10, atau 12 langkah per sisi. Langkah lebih banyak memberi granularitas lebih halus untuk sistem desain kompleks; langkah lebih sedikit lebih baik untuk palet sederhana. Generator memperbarui palet seketika pada setiap perubahan.
  3. Salin atau Ekspor: Klik swatch apa pun untuk menyalin kode HEX-nya. Gunakan panel Ekspor untuk menyalin palet lengkap sebagai properti khusus CSS, objek konfigurasi Tailwind CSS, atau daftar HEX biasa — dengan nama variabel yang dapat dikonfigurasi.

Bagaimana Tint dan Shade Dihitung

  • Rumus Tint: Setiap tint dihitung dengan interpolasi linier antara warna dasar dan putih (RGB 255, 255, 255). Tint dengan rasio r = dasar × r + putih × (1 − r). Tint paling terang memiliki nilai r terkecil (paling dekat putih); tint paling gelap memiliki nilai r terbesar (paling dekat warna dasar).
  • Rumus Shade: Setiap shade dihitung dengan interpolasi linier antara warna dasar dan hitam (RGB 0, 0, 0). Shade dengan rasio r = dasar × r. Shade paling terang memiliki nilai r terbesar (paling dekat warna dasar); shade paling gelap memiliki nilai r terkecil (paling dekat hitam).
  • Distribusi Langkah: Langkah-langkah didistribusikan merata antara warna dasar dan putih/hitam, tanpa menyertakan titik ujung murni. Ini memastikan palet memiliki jarak visual yang konsisten antar langkah.
  • Format Output: Nilai HEX, RGB, dan HSL tersedia untuk setiap swatch. Representasi HSL berguna untuk memahami bagaimana kecerahan berubah di sepanjang skala sementara hue dan saturasi tetap kurang lebih konstan.

Tint vs. Shade vs. Tone

Tint menambahkan putih ke warna (menambah kecerahan, mengurangi saturasi). Shade menambahkan hitam ke warna (mengurangi kecerahan, dapat menambah atau mengurangi saturasi). Tone menambahkan abu-abu ke warna (mengurangi saturasi tanpa mengubah kecerahan secara drastis). Generator kami berfokus pada tint dan shade — varian yang paling sering dibutuhkan dalam sistem desain UI. Untuk pembuatan tone, gunakan alat Pencampur Warna untuk mencampur warna dasar Anda dengan abu-abu netral.

Pertanyaan yang Sering Diajukan

Generator tint dan shade membuat varian yang lebih terang (tint, dicampur putih) dan lebih gelap (shade, dicampur hitam) dari satu warna dasar. Semua pemrosesan berjalan lokal di browser Anda.

Tint mencampur warna dasar dengan putih (lebih terang). Shade mencampur warna dasar dengan hitam (lebih gelap). Tint digunakan untuk latar belakang; shade untuk batas dan teks.

Tint menggunakan interpolasi RGB linier antara warna dasar dan putih. Shade menggunakan interpolasi RGB linier antara warna dasar dan hitam. Langkah-langkah didistribusikan secara merata.

10 langkah sesuai dengan skala warna Tailwind CSS. Gunakan 5 untuk palet sederhana, 12 untuk sistem desain kompleks yang memerlukan kontrol lebih detail.

Bisa. Pilih «Konfigurasi Tailwind» di panel Ekspor. Generator menghasilkan objek konfigurasi dengan kunci numerik yang dapat Anda tempel langsung ke tailwind.config.js.

Bisa. Pilih «Variabel CSS» untuk mendapatkan blok :root { } dengan properti khusus CSS. Anda dapat menyesuaikan awalan nama variabel.

Tentu. Semua pembuatan berjalan 100% di sisi klien. Tidak ada data warna yang pernah dikirim ke server mana pun.

HEX (#RGB, #RRGGBB) dan nilai RGB/RGBA. Anda juga dapat menggunakan pemilih warna bawaan. Output tersedia dalam HEX, RGB, dan HSL untuk setiap swatch.

Ya. 100% gratis tanpa pendaftaran, tanpa tingkat premium, tanpa kuota penggunaan, dan tanpa iklan yang menghalangi antarmuka.