Color Converter & Picker
Convert warna antara format HEX, RGB, HSL, dan HSV. Dilengkapi color picker visual untuk memilih warna dengan mudah. Berguna untuk web design dan development.
Click to pick a color
HEX: #RRGGBB format (e.g., #3B82F6)
RGB: Red, Green, Blue (0-255)
HSL: Hue (0-360°), Saturation (0-100%), Lightness (0-100%)
HSV: Hue (0-360°), Saturation (0-100%), Value (0-100%)
Apa Itu Color Format?
Warna digital dapat direpresentasikan dalam berbagai format, masing-masing dengan kegunaan dan karakteristik yang berbeda. Memahami format warna membantu designer dan developer memilih representasi yang paling sesuai untuk kebutuhan mereka.
Format Warna yang Didukung
HEX (Hexadecimal)
Format paling umum di web development. Menggunakan 6 digit hexadecimal (#RRGGBB) untuk merepresentasikan Red, Green, dan Blue.
Contoh: #3B82F6 (Blue)
- ✅ Compact dan mudah dibaca
- ✅ Standar CSS
- ✅ Copy-paste friendly
RGB (Red Green Blue)
Format additive color model. Setiap channel (R, G, B) memiliki nilai 0-255.
Contoh: rgb(59, 130, 246)
- ✅ Intuitif untuk programmer
- ✅ Mendukung alpha (RGBA)
- ✅ Mudah di-manipulasi
HSL (Hue Saturation Lightness)
Format yang lebih intuitif untuk manusia. Hue (0-360°) adalah warna dasar, Saturation (0-100%) adalah intensitas, Lightness (0-100%) adalah kecerahan.
Contoh: hsl(217, 91%, 60%)
- ✅ Mudah membuat variasi warna
- ✅ Bagus untuk color schemes
- ✅ CSS modern support
HSV (Hue Saturation Value)
Mirip dengan HSL, tetapi Value (brightness) berbeda dari Lightness. Lebih umum digunakan di color pickers dan design software.
Contoh: hsv(217, 76%, 96%)
- ✅ Natural untuk color picking
- ✅ Digunakan di Photoshop, Figma
- ✅ Mudah adjust brightness
Kapan Menggunakan Format Apa?
- HEX: Untuk CSS, HTML, dan dokumentasi design. Paling compact dan universal.
- RGB: Ketika perlu manipulasi programmatic atau menggunakan transparency (RGBA).
- HSL: Untuk membuat color palettes, themes, atau variasi warna (lighter/darker).
- HSV: Untuk color picking UI atau ketika bekerja dengan design tools.
Tips Memilih Warna untuk Web
1. Kontras yang Cukup
Pastikan kontras antara teks dan background minimal 4.5:1 untuk readability (WCAG AA standard). Gunakan tools seperti WebAIM Contrast Checker.
2. Konsistensi Color Palette
Gunakan 3-5 warna utama: primary, secondary, accent, neutral, dan error/success states. Buat variasi dengan HSL untuk consistency.
3. Accessibility
Jangan hanya mengandalkan warna untuk conveying information. Gunakan icons, labels, atau patterns untuk color-blind users.
FAQ: Pertanyaan Umum
Apa perbedaan HSL dan HSV?
Keduanya menggunakan Hue dan Saturation yang sama, tetapi berbeda di komponen ketiga. HSL menggunakan Lightness (0% = hitam, 50% = warna murni, 100% = putih), sedangkan HSV menggunakan Value/Brightness (0% = hitam, 100% = warna paling terang). HSV lebih intuitif untuk color picking, HSL lebih baik untuk membuat gradients.
Apakah HEX 3-digit valid?
Ya! HEX 3-digit (seperti #F00) adalah shorthand untuk HEX 6-digit di mana setiap digit diulang (#FF0000). Ini hanya bisa digunakan ketika setiap pasangan digit sama.
Bagaimana cara membuat warna lebih terang/gelap?
Cara termudah adalah menggunakan HSL. Untuk membuat warna lebih terang, tingkatkan Lightness (L). Untuk lebih gelap, kurangi L. Alternatifnya, di RGB, tambahkan/kurangi nilai yang sama ke semua channel, atau gunakan CSS filter: brightness().