Pemilih Warna
Pilih warna dan dapatkan nilai HEX, RGB, HSL.
Tentang Pemilih Warna
Pemilih Warna GuruAlpha memungkinkan Anda memilih warna apa pun dari spektrum interaktif dan mendapatkan nilai HEX, RGB, dan HSL-nya secara instan. Klik di mana saja pada gradien warna untuk memilih warna, sesuaikan saturasi dan kecerahan dengan penggeser, atau masukkan kode warna yang diketahui untuk melihat pratinjaunya. Ini adalah alat penting bagi desainer web, seniman grafis, dan pengembang yang bekerja dengan warna setiap hari.
Memilih warna adalah tugas mendasar dalam alur kerja desain. Baik Anda membangun situs web, mendesain logo, membuat materi pemasaran, atau mengedit foto, Anda perlu memilih warna yang tepat dan mendapatkan nilai teknisnya untuk digunakan dalam CSS, perangkat lunak desain, atau spesifikasi cetak. Pemilih Warna menyediakan ketiga format warna utama secara bersamaan, menghilangkan kebutuhan akan alat konversi terpisah.
Spektrum warna interaktif menampilkan seluruh rentang warna yang terlihat dalam gradien dua dimensi. Sumbu horizontal mewakili hue (0-360 derajat pada roda warna), dan sumbu vertikal mewakili saturasi. Penggeser kecerahan terpisah mengontrol seberapa terang atau gelap warna yang dipilih. Antarmuka intuitif ini memungkinkan Anda menemukan warna yang tepat secara visual, lalu menyalin nilainya untuk digunakan dalam proyek Anda.
Alat ini juga menyertakan palet warna yang umum digunakan yang diatur berdasarkan kategori: warna web-safe, warna Material Design, warna Tailwind CSS, dan warna referensi Pantone. Klik preset mana pun untuk langsung memuatnya ke pemilih. Pustaka preset ini mempercepat pemilihan warna untuk kasus penggunaan umum dan memastikan konsistensi dengan sistem desain yang mapan.
Integrasi pemeriksa kontras menampilkan rasio kontras warna yang dipilih terhadap latar belakang putih dan hitam, membantu Anda memilih warna yang memenuhi standar aksesibilitas WCAG. Rasio kontras minimal 4.5:1 diperlukan untuk teks normal (WCAG AA), dan 7:1 untuk aksesibilitas yang ditingkatkan (WCAG AAA). Fitur ini mencegah masalah aksesibilitas sebelum mencapai tahap produksi.
Fitur Utama Pemilih Warna
- Spektrum warna interaktif dengan kontrol hue, saturasi, dan kecerahan
- Nilai HEX, RGB, dan HSL ditampilkan secara bersamaan
- Palet warna preset: Web Safe, Material Design, Tailwind, Pantone
- Pemeriksa rasio kontras untuk aksesibilitas WCAG
- Salin nilai dengan satu klik dalam format apa pun
- Riwayat warna terbaru
- Berfungsi di semua perangkat
- Tanpa perlu mendaftar
Cara Menggunakan Pemilih Warna
- Buka Pemilih Warna di GuruAlpha.
- Klik pada spektrum warna untuk memilih hue dan saturasi.
- Sesuaikan penggeser kecerahan untuk menyempurnakan tingkat terang.
- Lihat nilai HEX, RGB, dan HSL yang ditampilkan secara real-time.
- Atau masukkan kode warna yang diketahui dalam format apa pun untuk melihat pratinjaunya.
- Periksa rasio kontras untuk kepatuhan aksesibilitas.
- Salin nilai warna dalam format pilihan Anda.
Tips Menggunakan Pemilih Warna
- Gunakan pemeriksa kontras untuk memastikan keterbacaan teks pada latar belakang yang Anda pilih.
- Preset menghemat waktu — mulai dengan warna Material Design atau Tailwind lalu sesuaikan.
- HSL adalah format paling intuitif untuk menyesuaikan warna — ubah hue, saturasi, atau kecerahan secara terpisah.
- Riwayat warna terbaru membantu Anda kembali ke warna yang dipilih sebelumnya.
- Gunakan HEX untuk CSS, RGB untuk alat desain, HSL untuk penyesuaian warna.
Pertanyaan Umum tentang Pemilih Warna
Apa perbedaan antara HEX, RGB, dan HSL?
HEX menggunakan kode heksadesimal 6 digit (#FF5733). RGB mendefinisikan warna berdasarkan nilai merah, hijau, biru (masing-masing 0-255). HSL menggunakan Hue (0-360), Saturasi (0-100%), dan Kecerahan (0-100%).
Apa itu rasio kontras WCAG?
WCAG menetapkan kontras minimum untuk keterbacaan. AA memerlukan 4.5:1 untuk teks normal. AAA memerlukan 7:1. Alat ini menampilkan rasio warna yang Anda pilih terhadap putih dan hitam.
Bisakah saya memasukkan kode warna secara langsung?
Ya. Masukkan nilai HEX (#FF5733), RGB (rgb(255,87,51)), atau HSL (hsl(9,100%,60%)) dan pemilih akan menampilkan warna tersebut.
Apakah preset berasal dari sistem desain sungguhan?
Ya. Preset mencakup warna Web Safe, Google Material Design, Tailwind CSS, dan warna referensi Pantone.