Softonic

Generator Tinta Warna

Langkah 1 / 2
Berikutnya

Tinta merupakan hasil pencampuran suatu warna dengan putih, di mana setiap tahapnya semakin terang. Alat ini mengambil warna dasar Anda dan menghasilkan deretan tinta yang semakin terang secara bertahap, sangat berguna untuk rentang palet sistem desain (100 → 400), pengisian latar belakang yang halus, status hover pada warna primer gelap, serta latar belakang badge atau notifikasi tempat warna aksen perlu hadir namun tetap tidak mencolok.

Bagaimana warna tint dihasilkan

  1. 1

    Pilih warna dasar

    Gunakan pemilih warna untuk memilih warna dasar. Paling cocok digunakan pada latar belakang dengan kecerahan sedang; latar belakang yang hampir putih memiliki sedikit ruang untuk dipercerahkan.

  2. 2

    Pilih jumlah langkah

    Antara 3 dan 20 langkah, dengan bawaan 10. Sepuluh langkah memberikan skala sistem desain yang lengkap; untuk pekerjaan antarmuka yang cepat, langkah yang lebih sedikit sudah cukup.

  3. 3

    Campur dengan putih pada persentase yang semakin meningkat

    Dengan 10 langkah, tinta pertama mencampur sekitar 9% putih dan tinta terakhir sekitar 91%. Interpolasi terjadi langsung di ruang warna RGB, sehingga saturasi memudar seiring meningkatnya tingkat kecerahan.

  4. 4

    Baca nilai HEX

    Setiap swatch menampilkan nilai HEX-nya. Gunakan nilai tersebut dalam variabel CSS, skala Tailwind, atau peta Sass Anda.

Contoh skala warna dari #3B82F6

Tabel di bawah ini menunjukkan hasil yang dihasilkan alat dengan 10 langkah bawaan:

Langkah Hex Putih Peran Umum
0 #3B82F6 Dasar Merek utama (biru-500)
1 #4C8DF6 9,1% Tampilan terang di latar belakang gelap
2 #5E98F7 18,2% setara dengan biru-400
3 #70A4F8 27,3%
4 #82AFF9 36,4% biru-300
5 #94BAFA 45,5%
6 #A5C6FA 54,5%
7 #B7D1FB 63,6%
8 #C9DCFC 72,7% Latar belakang halus (biru-100/200)
9 #DBE8FD 81,8%
10 #EDF3FE 90,9% biru-50

Tinta + bayangan = skala sistem desain

Gabungkan tinta (lebih terang) dan bayangan (lebih gelap) di sekitar satu warna dasar untuk membentuk skala penuh:

  • 50, 100, 200, 300, 400: tinta (dari paling terang hingga sedikit lebih terang daripada warna dasar)
  • 500: dasar
  • 600, 700, 800, 900: bayangan (sedikit lebih gelap dari warna dasar hingga paling gelap)

Hal ini sesuai dengan Tailwind, Material, Open Color, Radix UI, serta sebagian besar sistem desain populer lainnya. Skala berdasarkan 10 hingga 11 tingkatan merupakan standar umum.

Di mana tinta menonjol dalam antarmuka pengguna

  • Latar belakang notifikasi dan badge: teks error-500 di atas latar belakang error-50 = pengenalan langsung tanpa terlalu mencolok secara visual.
  • Status hover di latar belakang gelap: tombol pada permukaan gelap akan berubah menjadi lebih terang saat diarahkan kursor (hover).
  • Visualisasi data menggunakan skala sekuensial: pemetaan nilai ke warna di mana magnitudo tinggi menunjukkan warna yang pekat, sedangkan magnitudo rendah memudar menjadi putih.
  • Placeholder kategori avatar/grafik: tinta warna primer saat tidak ada gambar atau data yang ditampilkan.
  • Lapisan permukaan: latar belakang kartu yang sedikit diwarnai dengan warna merek untuk menciptakan kesan merek yang halus.

Mengapa tinta paling terang kehilangan saturasi

Alat ini mencampur langsung di ruang warna RGB. Semakin banyak putih yang ditambahkan, saturasi turun lebih cepat daripada kecerahan yang dirasakan naik, sehingga langkah-langkah teratas tampak pucat atau keabu-abuan. Ini adalah perilaku normal pencampuran RGB:

  • Pencampuran RGB (alat ini): sederhana dan dapat diprediksi. Saturasi memudar secara stabil; langkah yang sangat terang tampak tanpa jenuh.
  • Interpolasi OKLCH atau LAB: digunakan perangkat lunak desain untuk menjaga kroma lebih stabil saat mencerahkan. Generator ini tidak menyediakan model tersebut; jika Anda membutuhkan tinta dengan rona yang stabil, buatlah di alat desain yang mendukung OKLCH.
  • Pencerahan dalam HSL: menaikkan kecerahan tanpa mencampur putih; hasilnya dapat terlihat pastel, bukan seperti cat.

Batas bawah tinta untuk UI yang dapat digunakan

Tinta yang sangat terang (langkah 8+) mendekati warna putih murni dan secara visual tidak dapat dibedakan pada latar belakang putih. Berguna untuk:

  • Penyorotan seleksi halus di balik teks.
  • Garis-garis baris yang hampir tak terlihat pada tabel yang padat.

Namun, pendekatan ini kurang cocok untuk tombol atau label di mana pengguna memerlukan warna yang jelas. Gunakan nuansa terang bersama elemen yang lebih gelap (batas atau teks) untuk memberikan konteks yang lebih kuat.

Pertanyaan yang Sering Diajukan

Generator mencampur langsung dalam RGB, dan interpolasi RGB menurunkan nilai saturasi seiring naiknya kecerahan, sehingga langkah-langkah teratas bergeser ke arah putih. Interpolasi dalam OKLCH atau LAB justru mempertahankan sedikit jejak warna dasar yang terlihat; gunakan alat yang mendukung OKLCH saat hal itu penting.

Serupa, tetapi tidak identik. Pengadukan dengan warna putih akan mengurangi saturasi dan kecerahan secara proporsional; penyesuaian kecerahan dalam skala HSL justru meningkatkan nilai L secara independen. Nuansa yang dihasilkan terasa lebih alami (mirip cat); namun pengaturan kecerahan HSL dapat menghasilkan warna pastel yang tidak realistis.

Ya, mode gelap umumnya memerlukan skala kecerahan yang berbeda karena latar belakangnya sudah gelap. Banyak sistem membalikkan skala tersebut (nilai 50 pada mode gelap setara dengan nilai 900 pada mode terang dalam skala putih-terhadap-gelap).

Buat tangga tinta 5 tingkat (50–500) dan tangga bayangan 5 tingkat (500–900) dari warna dasar yang sama, lalu gabungkan keduanya untuk membentuk skala sistem desain lengkap sebanyak 10 hingga 11 tingkat.

Alat Terkait

Referensi Tabel ASCII

Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.

Referensi Karakter HTML

Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.

Penghitung FPS

Ukur FPS browser dengan requestAnimationFrame: penghalusan, frame rate minimum dan maksimum, ambang peringatan, dan grafik opsional. Berjalan lokal, tanpa unggahan dan tanpa API.

Generator Warna Acak

Buat 1 hingga 50 warna HEX acak dengan contoh warna yang bisa dipratinjau, disalin, dan dipakai di CSS, pengujian, atau eksplorasi palet.

Pemformat JSON

Tempel JSON untuk dirapikan dengan indentasi 2 atau 4 spasi, dipadatkan menjadi output ringkas, atau diperiksa sintaksnya sebelum hasilnya disalin.

Pemilih Warna HEX

Pilih atau masukkan warna HEX untuk mendapatkan RGB, HSL, perkiraan CMYK, luminans relatif, serta kontras terhadap putih dan hitam.