Alat warna ToolDeck memungkinkan Anda mengonversi antar format warna, memeriksa rasio kontras aksesibilitas, membuat palet, membangun gradien CSS, serta mencari nama warna atau kelas Tailwind langsung di browser Anda. Color Converter menangani HEX, RGB, HSL, dan HSV dalam dua arah. Contrast Checker menguji kepatuhan WCAG 2.1 AA dan AAA. Palette Generator membuat skema komplementer, analogus, triadik, dan tetradik dari warna dasar mana pun. CSS Gradient Generator menghasilkan kode gradien linear dan radial yang siap disalin. Color Name Finder mencocokkan nilai apa pun ke nama warna CSS terdekat, dan Tailwind Color Finder memetakan warna arbitrer ke kelas utilitas Tailwind. Semua alat berjalan di sisi klien tanpa data yang dikirim ke server mana pun.
Apa Itu Alat Warna?
Alat warna adalah utilitas yang membantu pengembang dan desainer bekerja dengan nilai warna digital. Setiap warna di layar disimpan sebagai angka: tiga kanal untuk RGB (merah, hijau, biru), triplet heksadesimal untuk singkatan CSS, atau sudut hue plus saturasi dan kecerahan untuk HSL. Berpindah antar representasi ini secara manual lambat dan rawan kesalahan, terutama ketika Anda juga perlu memperhitungkan transparansi alpha atau model yang lebih baru seperti OKLCH.
Di luar konversi format, pekerjaan warna melibatkan pengujian aksesibilitas, pembuatan palet, dan penulisan gradien. WCAG 2.1 mendefinisikan rasio kontras minimum (4,5:1 untuk teks normal pada AA, 7:1 untuk AAA) yang sulit diverifikasi secara visual. Membuat skema warna yang harmonis membutuhkan perhitungan sudut yang tepat pada roda warna HSL. Gradien CSS memerlukan sintaks yang benar untuk arah, color stop, dan nilai fallback. Melakukan semua ini secara manual di seluruh design system dengan puluhan token menjadi melelahkan dengan cepat.
Alat warna mengotomatiskan tugas-tugas ini. Mereka menerima warna dalam satu format, menghitung matematikanya, dan mengembalikan hasil yang Anda butuhkan, baik itu nilai yang dikonversi, keputusan lulus/gagal aksesibilitas, sekumpulan swatch yang harmonis, atau cuplikan kode CSS. Ketika alat berjalan di browser, Anda juga menghindari pengunggahan token desain yang sensitif ke layanan pihak ketiga.
Mengapa Menggunakan Alat Warna di ToolDeck?
Alat warna ToolDeck berjalan sepenuhnya di browser Anda. Tidak ada nilai warna yang meninggalkan mesin Anda, tidak diperlukan akun, dan setiap alat dimuat secara instan tanpa menginstal ekstensi atau perangkat lunak desktop.
🎨Konversi format dalam satu langkah
Tempel kode HEX dan dapatkan nilai RGB, HSL, dan HSV secara bersamaan. Tidak perlu merangkai beberapa konverter atau mengingat rumus konversi.
🔒Jaga kerahasiaan token desain
Semua pemrosesan terjadi di sisi klien. Warna merek Anda, keputusan palet yang belum dirilis, dan nilai design system internal tetap ada di perangkat Anda.
♿Uji aksesibilitas secara instan
Periksa pasangan foreground/background apa pun terhadap ambang batas WCAG 2.1 AA dan AAA untuk teks normal maupun teks besar. Dapatkan rasio kontras yang tepat, bukan hanya label lulus/gagal.
⚡Salin keluaran siap produksi
Setiap alat menghasilkan nilai yang dapat Anda tempel langsung ke CSS, konfigurasi Tailwind, atau kolom input alat desain. Tidak perlu memformat ulang.
Kasus Penggunaan Alat Warna
Berikut enam skenario umum di mana alat warna ToolDeck menghemat waktu.
Pemeliharaan Design System
Saat memperbarui design system, Anda sering menerima warna dalam HEX dari desainer tetapi membutuhkan HSL untuk properti kustom CSS.
Color Converter menerjemahkan antar format sehingga Anda dapat mengisi file token tanpa matematika manual.
Audit Aksesibilitas
Selama audit kepatuhan WCAG, setiap kombinasi teks/latar belakang harus memenuhi rasio kontras minimum.
Color Contrast Checker menampilkan rasio yang tepat dan status lulus AA/AAA untuk ukuran teks normal maupun besar.
Eksplorasi Palet Merek
Mulai dari satu warna merek, Anda membutuhkan varian aksen dan netral.
Color Palette Generator menghitung harmoni komplementer, analogus, triadik, dan tetradik sehingga Anda dapat mengevaluasi pilihan sebelum menetapkan palet.
Penataan Gaya Latar Belakang CSS
Membangun bagian hero atau latar belakang kartu dengan gradien membutuhkan sintaks CSS yang benar untuk sudut, color stop, dan prefiks vendor.
CSS Gradient Generator memungkinkan Anda membangun gradien secara visual dan menyalin kodenya.
Migrasi ke Tailwind
Saat memigrasikan proyek ke Tailwind CSS, Anda perlu memetakan nilai HEX atau RGB yang ada ke kelas utilitas Tailwind terdekat.
Tailwind Color Finder menemukan kecocokan terdekat dan menampilkan delta sehingga Anda dapat memutuskan apakah perkiraan tersebut dapat diterima.
Tinjauan Kode dan Dokumentasi
Saat tinjauan kode, nilai HEX mentah seperti #708090 tidak berarti apa-apa sekilas.
Color Name Finder mengidentifikasinya sebagai SlateGray, membuat tinjauan dan dokumentasi lebih mudah dibaca.
Referensi Model Warna CSS
CSS mendukung beberapa model warna. Tabel di bawah ini merangkum enam format paling umum, sintaksnya, dan kasus penggunaan tipikal. Semua ini didukung oleh Color Converter ToolDeck.
| Model | Sintaks CSS | Kanal | Rentang Nilai | Penggunaan Tipikal |
|---|
| HEX | #rrggbb | Merah, Hijau, Biru | 00–ff per kanal | Paling umum di CSS, serah terima desain, panduan merek |
| RGB | rgb(r, g, b) | Merah, Hijau, Biru | 0–255 per kanal | JavaScript canvas API, computed styles, pemrosesan gambar |
| HSL | hsl(h, s%, l%) | Hue, Saturasi, Kecerahan | 0–360 / 0–100% / 0–100% | Token desain, pembuatan tema, varian shade terprogram |
| HSV | T/A (tidak ada di CSS) | Hue, Saturasi, Nilai | 0–360 / 0–100% / 0–100% | Color picker (Photoshop, Figma), kalibrasi warna perangkat keras |
| OKLCH | oklch(L C H) | Kecerahan, Kroma, Hue | 0–1 / 0–0,4 / 0–360 | Palet seragam perseptual (spesifikasi CSS Color Level 4) |
| Named | mis. slategray | Dipetakan ke RGB secara internal | 148 nama yang telah ditentukan | Prototipe, kode yang mudah dibaca, demonstrasi cepat |
CSS Color Level 4 (W3C) juga mendefinisikan fungsi lab(), lch(), dan color(). HEX dan RGB tetap paling banyak didukung di seluruh browser dan alat desain.
Cara Memilih Alat Warna yang Tepat
Setiap alat warna memecahkan masalah yang berbeda. Gunakan panduan di bawah ini untuk menemukan yang tepat untuk tugas Anda.
- 1
Jika Anda perlu mengonversi warna antara format HEX, RGB, HSL, atau HSV → Color Converter - 2
Jika Anda perlu memverifikasi bahwa pasangan warna teks/latar belakang memenuhi standar aksesibilitas WCAG → Color Contrast Checker - 3
Jika Anda perlu membuat sekumpulan warna harmonis dari satu warna dasar → Color Palette Generator - 4
Jika Anda perlu membangun gradien CSS linear atau radial dan mendapatkan kodenya → CSS Gradient Generator - 5
Jika Anda perlu menemukan nama CSS yang mudah dibaca yang paling dekat dengan nilai warna tertentu → Color Name Finder - 6
Jika Anda perlu memetakan warna arbitrer ke kelas utilitas Tailwind CSS terdekat → Tailwind Color Finder
Semua enam alat menerima masukan dalam berbagai format. Jika Anda tidak yakin format warna Anda, mulailah dengan Color Converter, yang mendeteksi otomatis notasi HEX, RGB, HSL, dan HSV.
Pertanyaan yang Sering Diajukan
Apa perbedaan antara format warna HEX dan RGB?
HEX dan RGB mewakili ruang warna yang sama. Kode HEX seperti #ff6600 adalah pengkodean heksadesimal dari tiga kanal RGB: ff = 255 (merah), 66 = 102 (hijau), 00 = 0 (biru). Satu-satunya perbedaan adalah notasi. HEX lebih ringkas di stylesheet CSS, sementara RGB lebih mudah dimanipulasi secara terprogram karena setiap kanal sudah merupakan bilangan bulat desimal.
Kapan saya harus menggunakan HSL daripada HEX atau RGB?
HSL memisahkan hue (warna itu sendiri) dari saturasi dan kecerahan. Ini memudahkan pembuatan varian shade: pertahankan hue tetap, turunkan kecerahan untuk shade yang lebih gelap, naikkan untuk tint yang lebih terang. Design system yang menghasilkan tema terang/gelap dari satu warna dasar sering menyimpan token dalam HSL karena alasan ini. Properti kustom CSS juga berpadu baik dengan HSL karena Anda dapat menimpa kanal individual.
Rasio kontras berapa yang dipersyaratkan WCAG 2.1 untuk teks?
WCAG 2.1 Level AA mensyaratkan rasio kontras minimum 4,5:1 untuk teks normal (di bawah 18pt atau 14pt tebal) dan 3:1 untuk teks besar (18pt+ atau 14pt+ tebal). Level AAA menaikkan ambang batas tersebut menjadi 7:1 dan 4,5:1. Rasio-rasio ini dihitung dari luminansi relatif warna foreground dan background menggunakan rumus yang didefinisikan dalam WCAG 2.1 Success Criterion 1.4.3.
Berapa banyak warna bernama yang didukung CSS?
CSS mendefinisikan 148 warna bernama, yang diwarisi dari spesifikasi warna SVG 1.1 dan CSS3. Ini berkisar dari nama umum seperti red, blue, dan white hingga nama spesifik seperti MediumSlateBlue, PapayaWhip, dan LavenderBlush. Warna bernama dipetakan ke nilai RGB tetap. Spesifikasi CSS Color Level 4 mempertahankan 148 nama yang sama dan tidak menambahkan yang baru. Browser juga mengenali kata kunci transparent (setara dengan rgba(0,0,0,0)).
Bisakah saya menggunakan warna OKLCH di CSS sekarang?
Ya. Fungsi oklch() didukung di Chrome 111+, Firefox 113+, dan Safari 15.4+. OKLCH adalah bagian dari spesifikasi CSS Color Level 4 yang diterbitkan oleh W3C. Keunggulan utamanya dibandingkan HSL adalah keseragaman perseptual: dua warna dengan nilai kecerahan yang sama di OKLCH sebenarnya terlihat sama terangnya bagi mata manusia, yang tidak berlaku untuk HSL. Ini membuat OKLCH menjadi pilihan yang lebih baik untuk menghasilkan palet aksesibel dengan kecerahan yang konsisten secara perseptual.
Apa perbedaan antara HSL dan HSV?
HSL dan HSV keduanya menggunakan representasi silindris dengan hue sebagai sudut, tetapi mendefinisikan kecerahan secara berbeda. Dalam HSL, lightness 50% adalah warna murni; 0% adalah hitam, 100% adalah putih. Dalam HSV, value 100% adalah warna murni; 0% adalah hitam. HSV tidak memiliki cara bawaan untuk mencapai putih tanpa juga mengurangi saturasi. Desainer dan color picker (Photoshop, Figma) biasanya menggunakan HSV, sementara CSS menggunakan HSL secara native.
Bagaimana cara menemukan kelas Tailwind untuk warna HEX arbitrer?
Tailwind CSS hadir dengan palet tetap sekitar 220 kelas warna (22 hue dikali 10 shade masing-masing, ditambah hitam, putih, dan transparan). Untuk menemukan kelas terdekat untuk nilai HEX tertentu, Anda menghitung jarak Euclidean dalam ruang warna perseptual (seperti CIELAB atau OKLCH) antara warna Anda dan setiap swatch Tailwind. Tailwind Color Finder di ToolDeck melakukan ini secara otomatis dan menampilkan kecocokan terdekat beserta perbedaan warna sehingga Anda dapat menilai apakah perkiraannya cukup baik.
Apakah aman menempelkan warna merek yang rahasia ke alat online?
Tergantung pada alatnya. Alat mana pun yang mengirim masukan Anda ke server mengekspos nilai-nilai tersebut dalam lalu lintas jaringan dan log server. Alat warna ToolDeck berjalan sepenuhnya di browser Anda menggunakan JavaScript sisi klien. Tidak ada permintaan HTTP yang membawa data warna Anda ke backend mana pun. Anda dapat memverifikasi ini dengan membuka tab Network browser Anda saat menggunakan alat tersebut. Untuk kehati-hatian maksimal, Anda juga dapat menggunakan alat secara offline setelah pemuatan halaman pertama.