Pencerah/Penggelap Warna
Mencerahkan atau menggelapkan warna apa pun berdasarkan persentase dengan penggeser interaktif dari -100% hingga +100%. Penyesuaian berbasis HSL mempertahankan rona dan saturasi untuk rona dan nuansa yang tampak alami. Menampilkan pratinjau asli vs penyesuaian yang disesuaikan, skala kecerahan 7 langkah penuh, tombol prasetel untuk penyesuaian cepat, dan salinan satu klik untuk format apa pun. Sepenuhnya pribadi, 100% gratis, dan tidak perlu mendaftar.
Sample Colors
Enter a color to preview
Original Color Values
Lightness Scale
Mengapa Menggunakan Pencerah/Penggelap Warna Kami?
- Terang & Gelap Instan: Pencerah dan penggelap warna memperbarui pratinjau dan semua nilai output secara real-time saat Anda menyeret penggeser. Tidak ada tombol yang perlu ditekan - sesuaikan dari -100% (gelap sepenuhnya) hingga +100% (terang sepenuhnya) dan lihat hasilnya secara instan dengan contoh warna langsung.
- Skala Kecerahan Interaktif: Lihat skala kecerahan 7 langkah penuh di bawah kontrol utama yang menunjukkan warna pada penyesuaian kecerahan -50%, -25%, -10%, asli, +10%, +25%, dan +50%. Klik tombol preset mana pun untuk melompat langsung ke tingkat penyesuaian tersebut untuk eksplorasi warna dengan cepat.
- 100% Pribadi - Tanpa Unggahan: Semua pemrosesan terjadi secara lokal di browser Anda menggunakan JavaScript. Nilai warna Anda tidak pernah meninggalkan perangkat Anda dan tidak pernah dikirim ke server mana pun - sepenuhnya aman untuk proyek klien dan sistem desain eksklusif.
- Gratis & Tanpa Batas: Mencerahkan dan menggelapkan warna tanpa batas tanpa pendaftaran, tanpa langganan, dan tanpa batasan penggunaan. Color Lightener / Darkener sepenuhnya gratis selamanya tanpa iklan yang menghalangi antarmuka.
Kasus Penggunaan Umum untuk Pencerah/Penggelap Warna
- CSS Hover & Status Interaksi: Pengembang frontend menggunakan Color Lightener / Darkener untuk menghasilkan status hover, aktif, dan fokus untuk elemen UI. Dengan mencerahkan atau menggelapkan warna dasar dengan persentase yang konsisten, mereka memastikan umpan balik interaktif yang seragam di seluruh tombol, tautan, dan kartu tanpa menebak nilai warna secara manual.
- Adaptasi Warna Mode Gelap: Desainer dan pengembang menggunakan Color Lightener / Darkener untuk mengadaptasi palet warna mode terang untuk mode gelap. Dengan menggelapkan warna antarmuka secara sistematis sambil mempertahankan rona dan saturasi, mereka menciptakan tema gelap kohesif yang mempertahankan identitas merek dan memastikan keterbacaan.
- Aksesibilitas & Pengoptimalan Kontras: Spesialis aksesibilitas menggunakan Color Lightener / Darkener untuk menemukan varian warna yang dapat diakses dan memenuhi persyaratan kontras WCAG. Dengan mencerahkan atau menggelapkan warna secara bertahap sambil menjaga rona tetap utuh, mereka dapat menemukan penyesuaian minimum yang diperlukan untuk melewati rasio kontras AA atau AAA.
- Palet Warna & Pembuatan Warna/Naungan: Desainer menggunakan Color Lightener / Darkener untuk menghasilkan skala warna untuk sistem desain. Dengan menciptakan langkah kecerahan yang konsisten dari warna dasar, mereka membangun palet warna dan bayangan kohesif yang menjaga konsistensi merek di seluruh elemen UI mulai dari latar belakang hingga teks.
- Varian Komponen UI: Desainer produk menggunakan Color Lightener / Darkener untuk membuat beberapa varian visual komponen UI. Dari status hover yang halus hingga tombol ajakan bertindak yang menonjol, alat ini membantu menghasilkan berbagai varian warna dari satu warna dasar dengan penyesuaian kecerahan yang konsisten dan dapat diprediksi.
- Pembuatan Token Sistem Desain: Pengelola sistem desain menggunakan Color Lightener / Darkener untuk menghasilkan token warna dengan nilai kecerahan yang dapat diprediksi. Dengan menyesuaikan warna di ruang HSL, mereka membuat token seperti --color-primary-50 hingga --color-primary-900 dengan langkah persepsi yang konsisten.
Apa itu Pencerah dan Penggelapan Warna?
Pencerah warna dan penggelapan warna adalah teknik yang menyesuaikan kecerahan warna sambil mempertahankan rona dan saturasinya semaksimal mungkin. Saat Anda mencerahkan warna, nilai kecerahan meningkat hingga 100% (putih), sehingga menciptakan rona. Saat Anda menggelapkan suatu warna, kecerahannya berkurang menuju 0% (hitam), sehingga menciptakan bayangan. Pencerah/Penggelap Warna kami melakukan penyesuaian ini dalam ruang warna HSL, yang memastikan hasil tampak alami dan mempertahankan karakter warna aslinya.
Cara Kerja Pencerah/Penggelap Warna Kami
- Memasukkan warna dasar: Ketikkan nilai warna HEX atau gunakan pemilih warna asli untuk memilih warna apa pun. Alat ini langsung mengubahnya menjadi format HSL (Hue, Saturation, Lightness), yang memisahkan warna menjadi saluran independen untuk manipulasi yang tepat.
- Menyesuaikan penggeser kecerahan: Seret penggeser ke kiri untuk menggelapkan (persentase negatif) atau ke kanan untuk mencerahkan (persentase positif). Jalur gradien menunjukkan rentang penuh dari gelap hingga terang. Klik tombol preset mana pun (-50%, -25%, dll.) untuk lompatan cepat. Pratinjau warna yang disesuaikan diperbarui secara real-time bersama dengan aslinya untuk perbandingan.
- Jelajahi skala dan salin: Skala kecerahan 7 langkah di bawah menunjukkan tampilan warna pada tingkat penyesuaian yang berbeda. Klik langkah mana pun untuk langsung melompat ke level tersebut. Gunakan tombol Salin di samping format apa pun untuk menyalin nilai individual, atau salin semua format sekaligus dengan tombol “Salin Semua Nilai”.
Penyesuaian Ringan Dijelaskan
- Lightening (tints): Saat Anda mencerahkan suatu warna, nilai kecerahan meningkat secara proporsional menuju 100% (putih murni). Penyesuaian +50% pada warna dengan kecerahan 50% akan memindahkan 50% dari jarak yang tersisa menjadi 100%, sehingga menghasilkan kecerahan 75%. Ini menciptakan rona seperti pastel yang mempertahankan rona dan saturasi aslinya.
- Penggelapan (nuansa): Saat Anda menggelapkan suatu warna, nilai kecerahan berkurang secara proporsional menuju 0% (hitam murni). Penyesuaian -50% pada warna dengan kecerahan 50% akan memindahkan 50% jaraknya ke arah 0%, sehingga menghasilkan kecerahan 25%. Ini menciptakan nuansa yang lebih dalam yang mempertahankan karakter aslinya.
- Pelestarian rona dan saturasi: Tidak seperti pencampuran RGB sederhana (bercampur dengan putih atau hitam), penyesuaian berbasis HSL menjaga nilai rona dan saturasi tidak berubah. Artinya, warna tetap sesuai dengan karakter aslinya dan hanya kecerahannya saja yang berubah, sehingga menghasilkan variasi warna yang lebih bersih dan lebih mudah diprediksi.
- Kisaran -100% hingga +100%: Penggeser berkisar dari -100% (gelap sepenuhnya hingga hitam) hingga 0% (warna asli) hingga +100% (terang sepenuhnya hingga putih). Pada nilai ekstrim, warna menjadi hitam murni atau putih murni, namun pada nilai menengah, rona dan saturasi asli tetap terlihat.
Pencerah Warna vs. Kecerahan vs. Saturasi
Lightening (menyesuaikan kecerahan dalam HSL) berbeda dengan mengatur kecerahan (V dalam HSV/HSB). Kecerahan di HSL berkisar dari hitam (0%) hingga warna murni (50%) hingga putih (100%), sedangkan kecerahan di HSV berkisar dari hitam hingga warna murni saja. Ini berarti penyesuaian kecerahan HSL menghasilkan rona dan corak yang tampak lebih alami dan sesuai dengan pemikiran desainer tentang warna.
Saturasi adalah properti terpisah yang mengontrol intensitas warna. Saat mencerahkan atau menggelapkan, saturasi tetap konstan untuk menjaga kecerahan warna. Jika Anda perlu menyesuaikan kecerahan dan saturasi secara bersamaan, gunakan alat Saturator Warna / Desaturator kami. Bagi banyak alur kerja desain, menyesuaikan kecerahan saja sudah cukup untuk menciptakan varian warna yang diperlukan untuk komponen UI, status hover, dan token sistem desain.
Pertanyaan yang Sering Diajukan
Color Lightener / Darkener adalah alat yang menyesuaikan kecerahan warna apa pun dengan memodifikasi nilai kecerahannya dalam ruang warna HSL (Hue, Saturation, Lightness). Tidak seperti pencampuran RGB sederhana, pencerahan dan penggelapan berbasis HSL mempertahankan rona dan saturasi asli, menghasilkan rona dan gradasi yang tampak alami dan mempertahankan karakter warna dasar.
Masukkan warna dasar Anda menggunakan masukan HEX atau pemilih warna asli, lalu seret penggeser Terang/Gelap ke kiri untuk menggelapkan (ke arah hitam) atau ke kanan untuk mencerahkan (ke arah putih). Penggeser berkisar dari -100% hingga +100%, dan Anda dapat mengeklik tombol prasetel mana pun (-50%, -25%, -10%, 0%, +10%, +25%, +50%) untuk lompatan cepat. Hasilnya diperbarui secara real time bersamaan dengan warna asli untuk perbandingan.
Persentase menunjukkan seberapa besar perubahan warna menuju putih murni (terang) atau hitam murni (gelap). Penyesuaian +50% memindahkan warna 50% dari jarak yang tersisa dari kecerahan saat ini menjadi 100% putih. Penyesuaian -50% memindahkannya 50% jaraknya menuju 0% hitam. Pendekatan proporsional ini memastikan hasil yang konsisten terlepas dari warna awalnya.
Ya. Semua pemrosesan terjadi 100% di sisi klien di browser Anda menggunakan JavaScript. Nilai warna Anda tidak pernah dikirim ke server mana pun, tidak pernah disimpan, dan tidak pernah dikirim ke mana pun. Color Lightener / Darkener sepenuhnya bersifat pribadi dan memproses semuanya secara lokal di perangkat Anda, sehingga aman untuk sistem desain eksklusif dan pekerjaan klien.
Lightening dan tinting sering digunakan secara bergantian untuk mendeskripsikan mendekatkan warna ke putih. Dalam Color Lightener / Darkener kami, pencerahan menyesuaikan saluran kecerahan HSL menuju 100%, yang menciptakan rona asli dari warna aslinya. Karena rona dan saturasinya tetap tidak berubah, hasilnya mempertahankan karakter warna yang sama namun tampak lebih cerah.
Ya! Di bawah kontrol utama, alat menampilkan skala kecerahan 7 langkah yang menunjukkan warna pada penyesuaian -50%, -25%, -10%, asli, +10%, +25%, dan +50%. Setiap langkah menunjukkan nilai HEX dan persentase keringanan. Klik langkah mana pun untuk melompat langsung ke tingkat penyesuaian tersebut. Anda dapat menyalin nilai warna individual dari langkah mana pun untuk digunakan dalam token desain Anda.
Ya. Color Lightener / Darkener 100% gratis tanpa perlu mendaftar, tanpa fitur premium, dan tanpa batasan penggunaan. Mencerahkan dan menggelapkan warna tanpa batas tanpa batasan atau biaya tersembunyi apa pun. Tidak ada iklan yang menghalangi antarmuka, dan semua fitur termasuk penggeser interaktif, preset, skala kecerahan, dan salinan sekali klik tersedia untuk semua orang.
Lightening di HSL hanya menyesuaikan saluran lightness sambil menjaga rona dan saturasi tetap konstan. Dalam RGB, "lightening" sering kali berarti memadukan dengan warna putih, yang secara bersamaan mengubah ketiga saluran dan dapat menggeser rona. Penyesuaian berbasis HSL menghasilkan hasil yang lebih dapat diprediksi dan alami - warna tetap sesuai dengan karakter aslinya namun hanya menjadi lebih terang atau lebih gelap.