Alat warna gratis
Konversi warna, hasilkan palet, periksa kontras aksesibilitas, simulasikan buta warna, dan banyak lagi.
Semua alat warna
Warna Konverter
Konversi warna antara HEX, RGB, dan HSL secara instan. Pratinjau langsung dengan pemetik warna. Salin nilai CSS. Gratis, tanpa pendaftaran.
Generator Palet Warna Online Gratis
Hasilkan palet warna indah secara acak atau dari warna dasar. Kunci favorit, salin kode HEX, ekspor sebagai CSS atau gambar. Gratis dan instan.
Pemeriksa Kontras Warna
Periksa rasio kontras warna untuk kepatuhan aksesibilitas WCAG 2.1. Uji warna latar depan dan latar belakang untuk standar AA dan AAA.
Warna Shades Generator
Pilih warna apa pun dan hasilkan tint yang lebih ringan dan shade yang lebih gelap secara instan. Salin nilai HEX, RGB, atau HSL.
Warna Mixer
Campurkan dua atau lebih warna bersama-sama dan lihat hasilnya secara real-time. Dapatkan nilai HEX, RGB, dan HSL. Gratis, tanpa pendaftaran.
Simulator Buta Warna
Simulator buta warna gratis. Unggah gambar atau masukkan warna untuk melihat bagaimana tampilannya bagi orang dengan protanopia, deuteranopia.
Pemilih Warna Gambar
Unggah gambar apa pun dan klik untuk mengekstrak warna. Dapatkan nilai HEX, RGB, dan HSL secara instan.
Heks ke RGB Konverter
Konversi kode warna HEX ke nilai RGB secara instan. Pratinjau warna langsung, konversi batch, dan keluaran CSS siap salin. Gratis, tanpa pendaftaran.
CSS Warna Name Finder
Pemformat nama warna CSS gratis. Masukkan warna hex atau RGB dan temukan nama warna CSS terdekat secara instan dengan jarak dan pratinjau.
Roda Warna Gratis
Jelajahi harmoni warna dengan roda warna interaktif. Temukan warna komplementer, analogus, triadik, dan split-komplementer untuk warna dasar apa pun.
Pembuat Wallpaper Gradien Gratis
Buat dan unduh wallpaper gradien kustom untuk desktop atau ponsel. Pilih warna, sudut, dan resolusi, unduh sebagai PNG.
Pengekstrak Palet Warna Gratis
Ekstrak warna dominan dari gambar apa pun untuk membangun palet warna. Unggah foto dan dapatkan warna teratas sebagai nilai HEX, RGB, dan HSL.
Pembuat Palet Warna yang Dapat Diakses
Hasilkan palet warna yang memenuhi persyaratan kontras WCAG 2.2. Setiap kombinasi diuji terhadap standar AA dan AAA secara real-time.
Tentang alat warna kami
Absolutool menyertakan 7 alat warna khusus untuk desainer, developer, dan profesional aksesibilitas. Konversi antara format HEX, RGB, HSL, dan HSB. Buat palet harmonis dengan teori warna. Periksa rasio kontras WCAG untuk memastikan desain Anda dapat diakses semua orang.
Simulator buta warna menggunakan matriks penelitian Brettel/Viénot untuk memodelkan secara akurat 8 jenis defisiensi penglihatan warna · unggah gambar atau uji warna individu. Gunakan generator nuansa warna untuk token sistem desain, mixer warna untuk pencampuran tepat, dan pemilih warna gambar untuk mengekstrak warna dari foto apa pun. Semua alat berjalan sepenuhnya di browser Anda.
Model Warna di Web
Setiap piksel pada halaman web modern dijelaskan oleh sebuah nilai warna yang ditafsirkan peramban dan diminta untuk dirender oleh GPU. Dua format yang paling sering Anda lihat adalah HEX (triplet heksadesimal enam digit seperti #3b82f6) dan RGB (nilai desimal seperti rgb(59 130 246)). Keduanya menjelaskan hal yang sama: berapa banyak cahaya merah, hijau, dan biru yang dicampur pada layar yang menggunakan warna aditif. Tampilan 24-bit standar memberi 256 tingkat per kanal, yang berarti 16,78 juta warna unik dapat dialamati. HEX lebih pendek, RGB lebih mudah dihitung, dan keduanya dapat dipertukarkan.
HSL (hue, saturation, lightness) dan HSB (hue, saturation, brightness) menjelaskan warna layar yang sama tetapi dalam koordinat yang lebih dekat dengan cara manusia mempersepsikannya. Hue adalah posisi warna pada roda warna dari 0° (merah) hingga 360°. Saturasi adalah seberapa pekat warnanya, dari abu-abu hingga sepenuhnya murni. Lightness mengendalikan seberapa banyak putih atau hitam yang dicampurkan. HSL adalah format yang biasanya dipilih desainer saat membangun sistem desain karena menyesuaikan satu kanal menghasilkan pergeseran yang dapat diprediksi, seperti membuat tombol 10% lebih gelap untuk keadaan hover. CSS mendukung HEX, RGB, HSL, serta format LCH dan OKLCH yang lebih baru secara bawaan.
Di balik semua format ini terdapat sebuah ruang warna, yang mendefinisikan secara persis apa arti “merah 255” dalam istilah fisik. Bawaan web adalah sRGB, distandarkan oleh IEC pada 1996 dan gamut yang sama yang dicakup hampir setiap tampilan desktop dan ponsel. Perangkat Apple, OLED, dan kelas atas yang lebih baru mendukung Display P3, gamut yang lebih lebar yang menambahkan sekitar 25% lebih banyak merah dan hijau jenuh. CSS kini memungkinkan Anda menulis color(display-p3 1 0 0) untuk memanfaatkannya. Sebagian besar alat warna di situs ini bekerja dalam sRGB dan menjangkau setiap peramban; P3 memperluas yang tersedia tanpa mengubah alur kerja.
Memahami Kontras Warna WCAG
Web Content Accessibility Guidelines (WCAG 2.1) menetapkan ambang numerik untuk kontras antara teks dan latar belakangnya. Tingkat AA, tingkat yang ditargetkan sebagian besar audit aksesibilitas, mensyaratkan rasio setidaknya 4,5:1 untuk teks normal dan 3:1 untuk teks besar (18pt biasa atau 14pt tebal ke atas). Tingkat AAA memperketatnya menjadi 7:1 dan 4,5:1. Rasio dihitung dari luminansi relatif setiap warna, sebuah nilai kecerahan perseptual yang diturunkan dari primer sRGB melalui rumus IEC 61966-2-1. Dua warna yang terlihat “hampir sama” tetap bisa lulus, dua warna yang terlihat sangat berbeda bisa gagal jika yang satu abu-abu di atas abu-abu.
Angka-angka ini penting karena sekitar 5% populasi dewasa di seluruh dunia memiliki sensitivitas kontras yang berkurang secara terukur akibat katarak, glaukoma, retinopati diabetik, atau perubahan makula terkait penuaan. Sinar matahari luar ruangan yang terang mengurangi kontras efektif bagi semua orang. Layar seluler yang dilihat dari sudut mengurangi kontras lebih jauh. Ambang WCAG dirancang untuk menjaga teks tetap terbaca dalam kondisi nyata itu, bukan pada monitor terkalibrasi warna di kantor yang remang. Algoritma yang lebih baru bernama APCA (kandidat pengganti yang akan hadir di WCAG 3.0) memperhitungkan hal-hal yang diabaikan WCAG 2.x, seperti ketebalan dan polaritas teks. Untuk saat ini, AA 4,5:1 tetap menjadi standar yang dirujuk sebagian besar regulator.
Buta Warna dan Desain Inklusif
Sekitar 8% pria dan 0,5% wanita keturunan Eropa Utara memiliki suatu bentuk defisiensi penglihatan warna merah-hijau, dan angka globalnya serupa dalam skala. Tiga jenis paling umum memengaruhi cara sel kerucut di retina merespons panjang gelombang tertentu. Deuteranomali (yang paling umum, sekitar 5% pria) mengurangi sensitivitas terhadap cahaya hijau panjang-gelombang-menengah. Protanomali mengurangi sensitivitas terhadap cahaya merah panjang-gelombang-panjang. Tritanomali memengaruhi persepsi biru-kuning dan jauh lebih langka. Simulator di situs ini memakai penurunan matriks-warna dari Brettel, Viénot & Mollon (1997), rujukan standar untuk transformasi ini dalam ilmu warna.
Aturan desain praktisnya adalah “jangan hanya mengandalkan warna”. Ikon galat merah dan ikon sukses hijau terlihat identik bagi banyak pengguna dengan deuteranomali. Menambahkan bentuk yang berbeda (silang versus centang), label (“Galat” atau “Sukses”), atau pola memperbaiki ini tanpa biaya bagi pengguna lain. Desain bagan dan dasbor adalah pelanggar paling sering karena legenda biasanya bergantung pada contoh warna. Simulator Buta Warna di situs ini memungkinkan Anda mempratinjau tangkapan layar nyata melalui setiap defisiensi umum sebelum diterbitkan, sehingga Anda dapat menemukan pola yang akan gagal di produksi.
Teori Warna untuk Palet
Roda warna menyusun rona menurut sudutnya di sekeliling lingkaran: merah di 0°, kuning di 60°, hijau di 120°, sian di 180°, biru di 240°, magenta di 300°. Warna komplementer berada tepat berseberangan satu sama lain (merah dan sian, biru dan jingga) dan menghasilkan kontras terkuat. Palet analog memakai dua hingga empat rona yang berdekatan pada roda dan terasa tenang serta menyatu, cocok untuk latar belakang dan gradien. Palet triadik memakai tiga rona berjarak sama 120° terpisah, memberi keseimbangan dengan variasi. Palet tetradik memakai empat rona yang membentuk persegi panjang. Aturan ini muncul dari manual seniman abad ke-19 tetapi cocok dengan apa yang sejak itu dikonfirmasi penelitian perseptual.
Sistem merek pada umumnya membutuhkan sekitar lima warna: warna merek utama, aksen (sering kali komplementer), abu-abu netral, ditambah hijau-sukses dan merah-galat. Pembuat Palet di situs ini memilih harmoni terlebih dahulu lalu menawarkan skala tint dan shade 10-langkah untuk setiap warna yang dipilih, struktur yang sama yang dipakai sistem desain seperti Tailwind, Material, dan Carbon. Alat Palet Aksesibel membatasi pembuatan pada kombinasi yang memenuhi kontras WCAG AA pada latar putih atau gelap. Kedua alat bekerja sepenuhnya di peramban Anda, sehingga warna yang Anda pilih untuk merek yang belum dirilis tidak pernah dikirim ke mana pun.
Pertanyaan yang Sering Diajukan
Mengapa warna yang sama terlihat berbeda di layar yang berbeda?
Sebagian besar monitor menargetkan gamut sRGB, tetapi setiap panel memiliki kalibrasi titik-putih, kecerahan, dan gamma yang sedikit berbeda. Dua tampilan yang baru keluar dari kotaknya dapat menampilkan #3b82f6 dengan perbedaan rona dan lightness yang terukur. Desain profesional mengandalkan monitor terkalibrasi warna (proba perangkat keras X-Rite atau Calibrite) untuk membawanya ke dalam toleransi. Untuk pekerjaan sehari-hari, memilih nilai dalam HSL memberi Anda peluang terbaik agar hubungan warna yang Anda inginkan (sebuah hover yang 10% lebih gelap, misalnya) bertahan di berbagai layar.
Apakah kontras 4,5:1 selalu cukup untuk aksesibilitas?
Itu adalah batas AA, yang merupakan minimum legal yang dirujuk sebagian besar regulator (Section 508 di AS, EAA di Eropa, AODA di Ontario). Untuk teks yang keterbacaannya kritis, pengguna penglihatan rendah, antarmuka yang terbaca di bawah sinar matahari, atau konten untuk audiens yang lebih tua, targetkan rasio AAA 7:1 yang lebih ketat. Untuk elemen UI yang bukan teks (ikon, batas tombol), berlaku aturan kontras non-teks 3:1 dari WCAG 2.1.
Apa perbedaan antara HSL dan HSV/HSB?
Keduanya berbagi kanal hue dan saturasi tetapi berbeda pada sumbu ketiganya. Lightness HSL simetris di sekitar 50%: 0% hitam, 50% rona murni, dan 100% putih. Brightness HSV/HSB asimetris: 0% hitam dan 100% rona murni tanpa putih. HSL lebih ramah untuk sistem desain di mana Anda mencampur menuju kedua ujung. HSV lebih umum dalam penyuntingan citra karena ia memetakan ke intuisi seniman.
Apakah kode heks sama dengan warna Pantone atau RAL?
Tidak. Kode heks menjelaskan warna layar yang dicampur dari cahaya merah, hijau, dan biru (aditif, terproyeksi). Pantone, RAL, dan sistem serupa menjelaskan pigmen fisik yang dicetak di atas kertas (subtraktif, memantul). Padanan heks dari “Pantone 286” adalah perkiraan layar, bukan kecocokan sempurna, karena gamut-nya tidak tumpang-tindih sepenuhnya. Untuk pekerjaan merek yang melintasi layar dan cetak, desainer biasanya menetapkan keduanya: Pantone untuk percetakan dan heks untuk digital.
Mengapa menyimulasikan buta warna pada sebuah desain?
Sekitar 1 dari 12 pria secara global memiliki suatu bentuk defisiensi penglihatan warna, sehingga desain apa pun yang dipakai audiens umum menjangkau pengguna yang tidak dapat membedakan rona tertentu. Indikator status merah versus hijau bisa terlihat identik bagi mereka. Menjalankan tangkapan layar melalui simulator sebelum diterbitkan mengungkap bagian desain mana yang hanya mengandalkan warna, sehingga Anda dapat menambahkan label, ikon, atau pola agar maknanya tersampaikan tanpa warna.
Apakah alat warna ini mengunggah gambar atau palet saya ke mana pun?
Tidak. Setiap alat dalam kategori ini berjalan sepenuhnya di peramban Anda. Gambar yang diunggah diproses oleh JavaScript pada canvas lokal, data palet tersimpan di localStorage, dan tidak ada yang dikirim ke server. Anda dapat memverifikasinya dengan membuka alat pengembang peramban dan mengamati tab Network saat Anda memakai salah satu alat. Satu-satunya permintaan yang akan Anda lihat adalah untuk aset statis dan Google Analytics, tidak pernah byte gambar atau nilai warna Anda.