Alat Warna — Pemilih, Palet, Kontras, Gradien & Lainnya
Alat Warna
Alat warna online gratis — pemilih warna, pembuat palet, konverter format, simulator buta warna, pembuat gradien, pemeriksa kontras WCAG, ekstraktor warna dominan, pencampur, suhu warna, warna tradisional Tionghoa. Semuanya di browser. Untuk menulis HTML/CSS (padanan hex/rgb/hsl, 148 warna bernama, palet web-safe 216, deklarasi siap salin) gunakan pembantu Kode Warna HTML yang berorientasi kode.
HEX:#ff0000
RGB:255, 0, 0
HSL:0, 100%, 50%
Komplementer
Triadik
Tetradik
Analog
Komplementer Terbagi
Asli
Tersimulasi
0%100%
Teks Contoh
50%
6500K
Cara kerja setiap mode
Pemilih: Kotak besar adalah peta saturasi-nilai pada rona saat ini — dari kiri ke kanan saturasi bertambah, dari atas ke bawah kecerahan berkurang. Klik di mana saja untuk memilih warna. Batang vertikal tipis di kanan adalah penggeser rona (0° hingga 360°) — geser untuk mengubah rona dasar dan kotak akan digambar ulang. Sisi kanan menampilkan warna yang dipilih dalam format HEX, RGB, dan HSL — klik nilai mana pun untuk menyalinnya.
Palet: Pemilih warna kiri dan kotak edit kanan menyimpan warna Dasar yang sama — keduanya tersinkronisasi dua arah (pilih warna atau ketik nilai hex, keduanya saling memperbarui). Lima baris palet di bawah semuanya diturunkan dari warna Dasar ini dengan memutar rona pada roda warna: Komplementer (rona +180°, kontras terkuat), Triadik (+120° / +240°, triad seimbang), Tetradik (+90° / +180° / +270°, empat warna persegi panjang), Analog (-30° / dasar / +30° / +60°, tetangga yang harmonis), dan Komplementer Terbagi (+150° / +210°, lebih lembut daripada komplementer murni). Swatch pertama di setiap baris selalu warna Dasar itu sendiri, dan sisanya adalah variasi rona yang diputar.
Konversi: Masukkan warna valid apa pun — HEX (#3b82f6), fungsi CSS (rgb(59,130,246) / hsl(217,90%,60%)), atau warna bernama (dodgerblue) — dan dapatkan konversi instan ke semua format utama. Dropdown format dapat memberi petunjuk kepada parser jika deteksi otomatis memilih format yang salah. Keluaran menampilkan HEX, RGB (0-255), HSL (derajat, %, %), HSV, dan CMYK. Klik nilai mana pun untuk menyalinnya.
Buta warna: Unggah gambar dan pilih jenis defisiensi penglihatan warna untuk disimulasikan. Alat menerapkan transformasi matriks respons kerucut pada setiap piksel, memetakan ulang nilai RGB untuk memperkirakan bagaimana orang dengan berbagai bentuk buta warna memandang gambar. Kanvas kiri menampilkan aslinya, kanan menampilkan tampilan simulasi. Dropdown mencakup tiga jenis dikromasi (kehilangan satu pigmen kerucut: protanopia, deuteranopia, tritanopia), achromatopsia lengkap (tanpa penglihatan warna), dan tiga jenis trikromasi anomali (respons kerucut lemah). Gambar beresolusi lebih rendah dimuat lebih cepat.
Gradien: Ini adalah pembuat gradien CSS visual. Pilih linear (berarah) atau radial (dari pusat ke luar), atur sudut (0° = bawah ke atas, 90° = kiri ke kanan), dan tentukan titik warna. Setiap titik memiliki pemilih warna dan diberi jarak merata (0%, 50%, 100% untuk tiga titik). Klik + Berhenti untuk menambahkan titik warna perantara bagi gradien yang lebih kompleks. Pratinjau diperbarui secara langsung, dan CSS yang dihasilkan siap disalin di bawah.
Kontras: Menghitung rasio kontras WCAG 2.1 antara teks latar depan dan warna latar belakang menggunakan rumus luminansi relatif dari nilai sRGB (dikoreksi gamma). Rasio berkisar dari 1:1 (warna identik) hingga 21:1 (hitam vs putih). Hasil menampilkan lulus/gagal pada tiga tingkat kepatuhan: AA Teks Normal (rasio ≥ 4,5:1), AAA Teks Besar (rasio ≥ 4,5:1 untuk teks ≥ 18pt atau tebal ≥ 14pt), dan AAA Teks Normal (rasio ≥ 7:1). Pratinjau teks contoh diperbarui secara real time saat warna disesuaikan.
Ekstrak: Unggah gambar apa pun dan alat mengidentifikasi palet warna dominannya menggunakan kuantisasi warna. Gambar diperkecil menjadi 100×100 piksel, lalu setiap piksel dimasukkan ke dalam histogram 4-bit per kanal (16 level per R/G/B = 4096 bin). Piksel transparan dilewati. Bin yang paling sering muncul diurutkan berdasarkan jumlah piksel, dan warna tengah setiap bin menjadi swatch. Setiap swatch menampilkan nilai HEX-nya dan persentase piksel gambar yang diwakilinya. Sesuaikan penggeser jumlah (2-12) untuk mengatur berapa banyak warna dominan yang diekstrak.
Pencampur: Mencampur dua warna dalam ruang warna RGB dengan interpolasi linear. Penggeser rasio menentukan campuran: 0% adalah Warna 1 murni, 100% adalah Warna 2 murni, dan 50% adalah campuran rata. Setiap kanal R, G, B diinterpolasi secara terpisah (misalnya merah + biru pada 50% menghasilkan ungu). Pratinjau hasil serta nilai HEX/RGB diperbarui secara langsung saat penggeser digeser atau salah satu warna diubah.
Suhu: Mengonversi suhu warna benda hitam dalam Kelvin menjadi warna tampak yang sesuai menggunakan algoritma pendekatan Tanner Helland. Suhu rendah (1000-3000K) menghasilkan nada oranye/merah hangat seperti cahaya lilin dan lampu pijar; rentang menengah (4000-6500K) menghasilkan putih netral hingga cahaya siang; suhu tinggi (8000-40000K) bergeser ke biru sejuk seperti langit mendung dan air dalam. Label di bawah mengidentifikasi sumber cahaya dunia nyata terdekat untuk setiap suhu.
Bernama: Menelusuri koleksi gabungan dari 80 warna tradisional Tionghoa (胭脂, 朱砂, 黛蓝, dll. — nama yang diambil dari sastra, lukisan, dan tradisi pewarnaan Tionghoa klasik) dan 140+ warna bernama CSS (palet web standar). Gunakan kotak pencarian untuk menyaring berdasarkan nama atau nilai HEX, atau beralih antar kategori dengan dropdown. Klik chip warna mana pun untuk melihat pratinjau besar dengan nama dan kode HEX — klik kodenya untuk menyalin.