What's the difference between HEX, RGB, and HSL?

HEX = Hexadecimal (#FF0000 for red). RGB = Red, Green, Blue (0-255 each). HSL = Hue (0-360°), Saturation (0-100%), Lightness (0-100%). All represent the same color differently.

How to use the color picker?

Click on the color square to open your browser's color picker. Any color you choose converts automatically between HEX, RGB, and HSL. You can also type HEX manually.

Why do developers need color conversion?

CSS accepts HEX, RGB, and HSL. Figma/Photoshop uses HEX. Tailwind/Bootstrap use HEX. APIs sometimes require RGB. Having all formats visible saves time and prevents errors.

What does Hue mean in HSL?

Hue = position on the color wheel: 0° = red, 60° = yellow, 120° = green, 180° = cyan, 240° = blue, 300° = magenta, 360° = red again. This lets you change the base color easily.

How to create a consistent color palette?

Use HSL: pick a base Hue (e.g., 217° for blue). For backgrounds: L=95%. For primary elements: L=50%. For text: L=20%. Keep S and H constant, vary L — instant consistent palette.

What's the color #3b82f6?

#3b82f6 is Blue-500 from Tailwind CSS. It's a vibrant blue widely used for buttons and links. RGB: 59,130,246. HSL: 217°, 91%, 60%.

🎨 Konverter Warna

Konversi antara HEX, RGB, HSL dengan pratinjau langsung

Warna

📖 Panduan Penggunaan

Konversi warna antara format HEX, RGB, dan HSL dengan pratinjau langsung. Pilih warna apa pun menggunakan pemilih warna browser atau ketik kode HEX — dapatkan nilai yang dikonversi secara instan.

HEX is the most common format in CSS and HTML. RGB is used in CSS and image editors. HSL (Hue, Saturation, Lightness) is more intuitive for humans — adjust color, intensity, and brightness separately.

Untuk pengembang: Konversi warna desain dari Figma/Photoshop (HEX) ke CSS (RGB atau HSL). Untuk desainer UI: Coba berbagai warna dan salin format yang tepat. Untuk siapa pun yang bekerja dengan warna.

Contoh: Biru #3B82F6 → RGB: 59,130,246 → HSL: 217°, 91%, 60%. Merah #FF0000 → RGB: 255,0,0 → HSL: 0°, 100%, 50%. Bekerja sepenuhnya di browser Anda — tidak ada data yang diunggah.

❓ Frequently Asked Questions

Answers to the most common questions

🔗 Bagikan alat ini

Bagikan alat ini ke teman — gratis, tanpa daftar

🎨 Konverter Warna

📖 Panduan Penggunaan

❓ Frequently Asked Questions

🔗 Related Tools

🔗 Bagikan alat ini