Generator Gradasi Warna
Ubah satu warna HEX dasar menjadi skala OKLCH, HSL, atau RGB dengan langkah yang bisa diatur, petunjuk kontras WCAG per langkah, dan ekspor ke CSS, Tailwind, dan JSON.
Generator Gradasi Warna — Masukkan satu warna dasar dalam HEX dan langsung bangun skala lengkap dengan interpolasi yang merata secara perseptual di OKLCH atau HSL — hue tetap stabil dengan kecerahan yang dibagi merata — atau pencampuran linear RGB klasik, dengan jumlah langkah sesuka Anda. Sesuaikan hue dan saturasi, baca petunjuk kontras WCAG per langkah yang menunjukkan warna mana yang tetap terbaca sebagai teks di atas putih dan hitam, lalu salin seluruh ramp sebagai custom property CSS, konfigurasi warna Tailwind, atau JSON. Semuanya berjalan sepenuhnya di browser Anda; tidak ada warna yang pernah dikirim ke server.
Apa itu Generator Gradasi Warna?
Generator Gradasi Warna mengubah satu warna HEX dasar menjadi skala tint-dan-shade lengkap yang siap untuk sebuah design system. Alih-alih hanya mencampur secara linear di RGB, alat ini bisa menginterpolasi di OKLCH atau HSL sehingga hue tetap stabil dan kecerahan dibagi merata, menghasilkan ramp yang seimbang secara perseptual tanpa langkah yang kusam atau pudar. Anda memilih berapa banyak langkah yang dibuat — dari 2 hingga 24, atau daftar label khusus yang dipisah koma —, menggeser hue atau menskalakan saturasi, dan membaca petunjuk kontras WCAG per langkah yang menunjukkan warna mana yang cocok sebagai teks di atas putih dan hitam. Skala yang selesai bisa disalin sebagai custom property CSS, objek konfigurasi warna Tailwind, atau JSON dengan satu klik.
Cara menggunakan Generator Gradasi Warna
- Ketik warna dasar di kolom Warna dasar (HEX) dengan format #rrggbb atau #rgb, atau klik sampel besar untuk memilihnya secara visual.
- Pilih ruang warna: OKLCH atau HSL untuk ramp yang merata secara perseptual dengan hue stabil, atau RGB untuk pencampuran linear klasik.
- Atur berapa langkah yang Anda mau (2–24), atau buka Pengaturan untuk memasukkan daftar langkah khusus yang dipisah koma, menggeser hue, menskalakan saturasi, dan menetapkan nama warna ekspor.
- Baca dua sel kontras di setiap baris — huruf A di atas putih dan hitam —, yang disorot ketika warna itu memenuhi WCAG AA untuk teks.
- Salin HEX satu langkah, atau salin seluruh skala sebagai variabel CSS, konfig Tailwind, atau JSON dengan tombol salin.
Contoh
Ramp OKLCH merata dari biru merek
Pilih OKLCH dan pertahankan 11 langkah: skala 50–950 membagi kecerahan secara merata sambil mempertahankan hue biru, sehingga tidak ada langkah yang tampak kusam atau pudar seperti yang bisa terjadi pada pencampuran linear RGB.
Konfig Tailwind khusus lima langkah
Masukkan 100, 300, 500, 700, 900 sebagai daftar langkah khusus untuk menghasilkan lima sampel saja, lalu salin sebagai objek warna Tailwind dengan label itu sebagai kunci, atau sebagai variabel CSS dan JSON.
Pertanyaan yang sering diajukan
- Apa beda opsi RGB, HSL, dan OKLCH?
- RGB mencampur warna Anda secara linear ke arah putih dan hitam, cepat tetapi bisa tampak tidak merata di nada tengah. HSL dan OKLCH justru menjaga hue tetap stabil dan membagi kecerahan secara merata; OKLCH merata secara perseptual, jadi setiap langkah terlihat seperti lompatan kecerahan yang sama. Pilih OKLCH untuk ramp yang paling seimbang.
- Berapa banyak warna yang bisa saya buat, dan bisakah diberi nama?
- Atur jumlah langkah berapa pun dari 2 hingga 24. Nilai 11 memakai penomoran Tailwind yang familier (50, 100…900, 950); nilai lain dibagi merata dari 50 hingga 950. Anda juga bisa mengetik daftar label khusus yang dipisah koma di Pengaturan, yang menimpa jumlah langkah dan menamai setiap langkah persis seperti yang Anda tulis.
- Bagaimana petunjuk kontras WCAG dihitung?
- Untuk setiap warna, alat menghitung rasio kontras WCAG terhadap putih murni dan hitam murni dari luminansi relatif. Dua sel kecil di setiap baris menampilkan huruf A di atas putih dan hitam dan disorot ketika rasionya mencapai 4.5:1 (AA untuk teks normal); arahkan kursor untuk melihat rasio persisnya dan apakah AA atau AAA.
- Apakah data warna saya diunggah ke mana pun?
- Tidak. Perhitungan warna, pemeriksaan kontras, dan ketiga ekspor berjalan sepenuhnya di browser Anda, jadi tidak ada nilai warna yang pernah dikirim ke server. Alat ini bekerja offline dan menjaga palet Anda tetap pribadi.
Alat terkait
Kode ke Gambar
Ubah cuplikan kode menjadi gambar dengan penyorotan sintaksis di browser Anda, dengan 20+ bahasa, tema dan latar kustom, nomor baris, serta ekspor PNG atau SVG.
Pemeriksa Kontras Warna
Periksa kontras WCAG 2.1 dan skor APCA Lc antara warna teks dan latar belakang, lihat lencana AA, AAA, dan 3:1, lalu terapkan warna lolos terdekat.
Pencampur Warna
Campurkan dua warna HEX pada rasio yang dipilih dalam ruang warna RGB atau Lab dan baca warna tengah hasilnya sebagai sampel dan nilai HEX yang dapat disalin.
Simulator Buta Warna
Unggah gambar dan pratinjau tampilannya dengan protanopia, deuteranopia, tritanopia, atau buta warna total, lalu unduh hasil simulasinya.