Skip to main content

Pembuat Nuansa Warna Buat nuansa warna yang lebih gelap dari warna apa pun dengan jumlah langkah yang dapat disesuaikan.

Pembuat Nuansa Warna illustration
๐ŸŽจ

Pembuat Nuansa Warna

Buat nuansa warna yang lebih gelap dari warna apa pun dengan jumlah langkah yang dapat disesuaikan.

1

Pilih Warna Dasar

Pilih warna apa saja sebagai titik awal Anda.

2

Sesuaikan Langkah

Pilih berapa banyak nuansa yang lebih gelap untuk dihasilkan secara bertahap.

3

Salin Nuansa

Salin nuansa individu atau keseluruhan set.

Loading tool...

What Is Pembuat Nuansa Warna?

Penghasil nuansa warna membuat versi yang semakin gelap dari warna dasar apa pun dengan mengurangi secara sistematis kecerahannya di ruang warna HSL. Nuansa-nuansa tersebut mempertahankan hue dan saturasi asli sambil bergerak menuju hitam, menciptakan serangkaian varian yang lebih gelap yang kohesif. Ini sangat penting untuk sistem desain di mana Anda memerlukan beberapa intensitas warna merek - dari aslinya untuk tombol primer hingga versi yang dalam untuk teks, border, dan state hover. Tidak seperti menambahkan hitam secara sederhana di RGB (yang dapat menggeser hue yang dirasakan), pendekatan berbasis HSL mempertahankan identitas warna sepanjang rentang nuansa. Jumlah langkah yang dapat disesuaikan memungkinkan Anda membuat apa saja dari set nuansa tiga sederhana hingga skala komprehensif lima belas langkah.

Why Use Pembuat Nuansa Warna?

  • Penggelapan berbasis HSL mempertahankan konsistensi hue di semua nuansa
  • Jumlah langkah yang dapat disesuaikan (3 hingga 15) untuk setiap kasus penggunaan
  • Setiap nuansa menampilkan persentase kecerahan untuk referensi
  • Ideal untuk membangun sistem warna desain yang konsisten
  • Salin dengan satu klik untuk nuansa individu atau set lengkap

Common Use Cases

Token Desain

Hasilkan skala nuansa bernomor (600, 700, 800, 900) untuk sistem desain.

Negara Bagian Hover

Buat negara bagian hover tombol yang lebih gelap yang konsisten dengan warna dasar.

Warna Teks

Temukan nuansa gelap dari warna merek untuk judul dan teks tubuh.

Batas & Bayangan

Dapatkan varian yang lebih gelap untuk batas, garis besar, dan warna bayangan.

Technical Guide

Penghasil nuansa mengonversi warna dasar ke HSL dan membuat N nuansa dengan mengurangi kecerahan dari nilai dasar hingga mendekati nol. Rumus untuk setiap nuansa adalah: L = baseLightness ร— (1 - i/(N-1)), di mana i berkisar dari 0 hingga N-1. Ini menciptakan distribusi yang merata dari warna asli ke arah hitam. Hue dan saturasi tetap konstan, memastikan semua nuansa secara perseptual merupakan warna yang sama pada tingkat kegelapan yang berbeda. Dalam teori warna, nuansa secara khusus adalah warna yang dicampur dengan hitam, tidak seperti tint (dicampur dengan putih) atau tone (dicampur dengan abu-abu). Pendekatan HSL lebih seragam secara perseptual daripada penggelapan RGB, yang akan memerlukan penyesuaian semua tiga kanal secara proporsional.

Tips & Best Practices

  • 1
    Gunakan 9 langkah untuk membuat skala sistem desain standar (100-900)
  • 2
    Nuansa tergelap bekerja dengan baik untuk teks pada latar belakang yang terang
  • 3
    Gabungkan generator nuansa dan tint untuk skala warna lengkap
  • 4
    Nuansa dari warna hangat (merah, oranye) membuat latar belakang gelap yang sangat baik
  • 5
    Uji nuansa gelap untuk kontras yang cukup melawan latar belakang yang diinginkan

Related Tools

Frequently Asked Questions

Q Apa perbedaan antara nuansa dan tint?
Nuansa adalah warna yang digelapkan dengan menambahkan hitam (mengurangi kecerahan). Tint adalah warna yang diterangkan dengan menambahkan putih (meningkatkan kecerahan). Suatu nada adalah warna yang dibuat kusam dengan menambahkan abu-abu (mengurangi saturasi).
Q Mengapa tidak hanya menggelapkan dalam RGB?
Penggelapan RGB (mengurangi semua saluran) dapat memindahkan hue yang dipersepsikan. Penggelapan berbasis HSL menjaga hue tetap konstan, sehingga semua nuansa terlihat seperti warna yang sama pada intensitas yang berbeda.
Q Berapa banyak langkah yang harus saya gunakan?
Untuk sistem desain, 9-10 langkah (seperti skala Tailwind CSS). Untuk kebutuhan yang lebih sederhana, 3-5 langkah untuk menutupi varian dasar, gelap, dan tergelap.

About This Tool

Pembuat Nuansa Warna is a free online tool by FreeToolkit.ai. All processing happens directly in your browser โ€” your data never leaves your device. No registration or installation required.