Konverter Warna (HEX/RGB/HSL)
Konversikan warna antara format HEX, RGB, dan HSL. Pilih warna secara visual atau masukkan nilai secara manual.
#535bebrgb(83, 91, 235)hsl(237, 79%, 62%)Cara menggunakan alat ini
- 1
Click the color swatch to open your operating system's color picker and choose a color visually.
- 2
Or type a 6-digit HEX value (such as #535beb, with or without the leading #) into the text field.
- 3
Read the matching rgb(R, G, B) and hsl(H, S%, L%) strings in the result cards below.
- 4
Copy whichever format you need straight into your CSS or design file.
Apa itu Konverter Warna (HEX/RGB/HSL)?
HEX, RGB, dan HSL adalah tiga cara untuk menyatakan warna yang sama. HEX (#RRGGBB) adalah yang paling umum dalam CSS dan alat desain. RGB (rgb(R,G,B)) memisahkan kanal secara numerik. HSL (hsl(H,S%,L%)) lebih intuitif bagi manusia: hue (rona) adalah warnanya, saturasi adalah intensitasnya, dan lightness (kecerahan) adalah tingkat terangnya. Gunakan HSL saat merancang palet; konversikan ke HEX untuk implementasi.
Kasus penggunaan umum
Translating a brand HEX code from a style guide into the rgb() values a legacy stylesheet or email template requires.
Grabbing the HSL form of a color so you can nudge its lightness or saturation while keeping the same hue for a palette.
Checking the exact RGB channels of a color picked from a screenshot or mockup before writing it into CSS.
Confirming what a designer's HEX swatch becomes in RGB for a canvas, SVG, or charting library that wants numeric channels.
Teaching or learning how hexadecimal color notation maps to decimal RGB and to the HSL model.
Quickly sampling a color visually with the picker and reading all three CSS-ready notations at once.
Pertanyaan yang sering diajukan
Kapan saya harus menggunakan HSL alih-alih HEX?▼
Bagaimana dengan OKLCH dan ruang warna modern?▼
Alat terkait
Generator Box Shadow CSS
Buat nilai box-shadow CSS secara visual. Pratinjau secara real-time dan salin CSS yang dihasilkan.
Generator Gradien CSS
Buat gradien CSS linear dan radial. Pilih warna secara visual dan salin CSS yang dihasilkan.
Generator Kurva Easing Cubic Bezier
Buat kurva easing cubic-bezier untuk CSS. Termasuk preset standar.
Generator Palet Warna
Hasilkan palet warna yang harmonis dari warna dasar mana pun. Mendukung skema komplementer, analog, triadik, dan monokromatik.
Generator Border Radius CSS
Buat nilai border-radius CSS yang kompleks secara visual. Kontrol independen untuk setiap sudut.
Generator CSS Clamp()
Hasilkan nilai CSS yang fluid dan responsif dengan clamp(). Skalakan dengan mulus antara ukuran minimum dan maksimum di sepanjang rentang viewport.