Yang Bisa Dilakukan Pemilih Warna Ini
- Ambil sampel warna dari gambar* atau mulai dari roda warna presisi atau input HEX/RGB
- Konversi lengkap: HEX, HEX8, RGB/A, HSL/A, HSV, CMYK, XYZ, LAB, LCH
- Pemeriksa kontras WCAG bawaan terhadap #000000 dan #FFFFFF menggunakan luminansi relatif
- Saran HEX web-safe dan shorthand jika berlaku
- Harmoni warna: komplementer, triadik, tetradik, analog, monokrom (dihitung via rotasi hue)
- Pratinjau luminansi dan kecerahan persepsi untuk mengantisipasi masalah kontras
- Pencocokan mirip Pantone perkiraan berdasarkan jarak RGB terdekat (dengan dataset tersimpan)
- Analisis berjalan di sisi klien; hanya data minimal yang digunakan saat pencarian Pantone opsional diaktifkan
🔧 Cara Menggunakan Pemilih Warna for color-picker
1. Pilih atau ambil warna dasar
Tempel nilai HEX, ketik RGB/HSL, atau gunakan pemilih untuk mengambil warna dari gambar atau roda. Alat menormalkannya ke nilai HEX aman secara internal.
2. Sesuaikan hue dan kecerahan
Atur hue, saturasi, dan kecerahan hingga sampel warna terlihat pas. Pratinjau besar menunjukkan warna pada permukaan terang dan gelap untuk konteks.
3. Baca dan salin format yang dibutuhkan
Salin HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV, CMYK, XYZ, LAB, dan LCH dalam satu klik. Gunakan untuk variabel CSS, token desain, atau catatan serah terima.
4. Periksa kontras WCAG
Lihat rasio kontras versus #000000 dan #FFFFFF berdasarkan luminansi sRGB. Gunakan hasil untuk memutuskan cepat apakah warna cocok untuk teks tubuh, judul besar, atau elemen UI.
5. Hasilkan harmoni & buat palet
Jelajahi warna komplementer, triadik, tetradik, analog, dan monokrom yang dihasilkan via rotasi hue. Tambahkan favorit ke palet/riwayat dan ekspor sebagai token.
Detail Teknis
Penanganan Input & Normalisasi
Alat menerima kode warna heksadesimal dan mengonversinya ke HEX 6-digit ternormalisasi sebagai referensi internal.
| Aspek | Perilaku | Catatan |
|---|---|---|
| Normalisasi HEX | HEX 3-digit dan 6-digit, # awal opsional | HEX pendek (mis. #0f8) diperluas menjadi #00ff88; karakter non-hex dihapus. |
| Dukungan HEX8 | RGBA melalui #RRGGBBAA | Saluran alfa dikonversi ke 0–255 dan ditambahkan sebagai byte ke-4. |
| Saran web-safe | Menyesuaikan ke langkah 51 terdekat per saluran | Nilai dibulatkan ke kelipatan terdekat dari 51 (0, 51, 102, 153, 204, 255). |
| Saran HEX singkat | Hanya saat dapat dikompresi | Ditampilkan ketika setiap pasangan digit HEX diulang (mis. #112233 → #123). |
Ruang Warna & Konversi
Semua komputasi didasarkan pada sRGB dengan referensi putih D65.
| Ruang | Komputasi | Penggunaan |
|---|---|---|
| RGB | Dari HEX yang dinormalisasi (0–255 per saluran) | Representasi dasar untuk konversi. |
| HSL / HSV | Transformasi silinder standar dari sRGB | Digunakan untuk pengeditan intuitif dan perhitungan harmoni. |
| CMYK | Aproksimasi independen perangkat | Dihitung sebagai 1−maks(R,G,B) dengan komponen 0–100%; tidak terikat pada profil ICC. |
| XYZ | sRGB dilinearisasi → XYZ menggunakan matriks D65 | Ruang perantara untuk LAB/LCH dan analisis lebih dalam. |
| LAB | CIE L*a*b* dari XYZ | Ruang metrik yang lebih seragam secara persepsi. |
| LCH | CIE L*C*h° dari LAB | Berguna untuk penyesuaian hue/chroma/lightness dan desain palet persepsi. |
Luminansi & Kontras WCAG
Kontras dihitung menggunakan rumus luminansi relatif WCAG standar.
| Aspek | Detail | Catatan |
|---|---|---|
| Luminansi relatif | Dihitung dari sRGB yang dilinearisasi (komponen Y) | Menggunakan koefisien 0.2126R + 0.7152G + 0.0722B. |
| Rasio kontras | (L1 + 0.05) / (L2 + 0.05) | Alat melaporkan kontras terhadap #000000 dan #FFFFFF. |
| Ambang batas WCAG | AA/AAA untuk teks normal dan besar | Ambang batas tipikal: 4.5:1 (AA normal), 3:1 (AA besar), 7:1 (AAA normal), 4.5:1 (AAA besar). |
Harmoni & Warna Turunan
Harmoni dihasilkan sebagai rotasi rona sederhana dalam HSL, mempertahankan saturasi dan kecerahan.
| Harmoni | Aturan | Contoh |
|---|---|---|
| Komplementer | +180° rona | Titik berlawanan pada roda warna. |
| Triadik | ±120° rona | Tiga warna yang berjarak sama. |
| Tetradik | +90°, +180°, +270° rona | Empat warna membentuk persegi panjang pada roda. |
| Analog | −30° / +30° rona | Tetangga di sekitar warna dasar. |
| Monokrom | Terang/gelap dalam L | Versi lebih terang dan gelap dari rona yang sama. |
Pencocokan Mirip Pantone (Perkiraan)
Saat dataset Pantone tersedia, alat menghitung kecocokan terdekat dalam ruang RGB.
| Aspek | Perilaku | Catatan |
|---|---|---|
| Pemuatan dataset | Cache + pemuatan asinkron via getPantoneColors / getPantoneColorsCached | UI dapat menampilkan kecocokan segera saat cache hangat, atau setelah pemuatan asinkron singkat. |
| Metrik kecocokan | Jarak Euclidean kuadrat pada RGB (0–255) | Pendekatan cepat dan sederhana; bukan metrik ΔE* perseptual. |
| Keluaran | ID dan nama mirip Pantone | Ditampilkan hanya sebagai panduan; bukan pemetaan Pantone resmi. |
Kinerja & Privasi
Konversi, luminansi, kontras, dan harmoni dihitung sepenuhnya di sisi klien. Pencarian Pantone dapat mengonsultasikan dataset lokal atau jarak jauh tergantung konfigurasi, tetapi warna mentah tetap berupa string HEX sederhana kecuali Anda secara eksplisit membagikan atau mengekspornya.
Kasus Penggunaan Populer
UI/UX & Front-End
- Buat pasangan latar depan/latar belakang yang mudah diakses untuk tombol, tautan, dan teks.
- Ekspor variabel CSS dan token desain langsung dari warna yang dipilih.
- Periksa kontras untuk mode terang/gelap sebelum menerapkan pengganti tema.
/* Token warna CSS */
:root {
--brand: #4caf50;
--brand-rgb: 76, 175, 80;
--on-brand: #0b0b0b;
}
.button-primary {
background-color: var(--brand);
color: var(--on-brand);
}Branding & Identitas Visual
- Turunkan palet primer/sekunder/aksen dari satu warna utama.
- Jelajahi opsi komplementer atau triadik untuk logo atau lini produk.
- Dapatkan penamaan perkiraan mirip Pantone sebelum menyiapkan panduan merek.
Visualisasi Data & Dasbor
- Tentukan warna seri yang tetap dapat dibedakan pada latar belakang terang dan gelap.
- Gunakan LAB/LCH untuk merancang palet dengan langkah perseptual terkontrol.
- Cek cepat apakah warna bagan memenuhi harapan kontras dalam legenda dan label.
❓ Frequently Asked Questions
Apa perbedaan antara HEX, RGB, HSL, dan HSV?
Mengapa nilai CMYK terlihat perkiraan?
Apa kegunaan LAB dan LCH?
Bagaimana kontras dihitung?
Apakah nama Pantone tepat?
Apakah Anda menyimpan gambar atau warna saya?
Pro Tips
Selalu pratinjau warna pada permukaan terang dan gelap; saturasi dan kontras yang dirasakan dapat berubah drastis dengan konteks.
Gunakan LAB atau LCH saat menghasilkan corak dan bayangan agar perubahan kecerahan terasa lebih seragam bagi mata manusia.
Periksa kontras AA/AAA untuk semua status interaktif (hover, aktif, nonaktif), bukan hanya warna tombol default.
Ekspor variabel CSS atau token desain dari tab format untuk menjaga konsistensi warna di seluruh komponen Anda.
Saat mengambil sampel dari gambar, rata-ratakan area kecil alih-alih satu piksel untuk mengurangi noise dari kompresi dan anti-aliasing.
Additional Resources
Other Tools
- Pemerindah CSS
- Pemerindah HTML
- Pemerindah Javascript
- Pemerindah PHP
- Ekstraktor Sprite
- Dekoder Base64
- Encoder Base64
- Pemformat Csharp
- Pemformat CSV
- Dockerfile Formatter
- Pemformat Elm
- Pemformat ENV
- Pemformat Go
- Pemformat GraphQL
- Pemformat HCL
- Pemformat INI
- Pemformat JSON
- Pemformat Latex
- Pemformat Markdown
- Pemformat ObjectiveC
- Php Formatter
- Pemformat Proto
- Pemformat Python
- Pemformat Ruby
- Pemformat Rust
- Pemformat Scala
- Pemformat Skrip Shell
- Pemformat SQL
- Pemformat SVG
- Pemformat Swift
- Pemformat TOML
- Typescript Formatter
- Pemformat XML
- Pemformat YAML
- Pemformat Yarn
- Pengecil CSS
- Html Minifier
- Javascript Minifier
- Pengecil JSON
- Pengecil XML
- Penampil Header HTTP
- PDF Ke Teks
- Penguji Regex
- Pemeriksa Peringkat SERP
- Pencarian Whois