HEX 3 digit adalah notasi yang mengulang tiga angka.

#369 dan #336699 mewakili warna yang sama. Setiap digit diulang dua kali; jangan menambahkan nol menjadi #306090. Hasil RGB adalah rgb(51, 102, 153). Aturan CSS resmi ditautkan di bawah.

W3C CSS Warna 4: Notasi warna HEX

Moyoutil menghapus spasi di kedua ujung dan satu # di awal, lalu memproses HEX tiga atau enam digit. Huruf besar dan kecil dianggap sama; keluaran HEX memakai huruf besar. Pemilih warna dan input HEX memperbarui pratinjau serta hasil.

Empat input direproduksi dengan fungsi alat nyata

Kami menjalankan fungsi color proyek pada 5 Oktober 2026. HSL menampilkan nilai yang dibulatkan alat menjadi bilangan bulat. RGB berisi nilai kanal bilangan bulat dari input HEX.

Masukan HEX dan keluaran konversi aktual
InputHasil HEXRGBHSL
#369#336699rgb(51, 102, 153)hsl(210, 50%, 40%)
#808080#808080rgb(128, 128, 128)hsl(0, 0%, 50%)
#123456#123456rgb(18, 52, 86)hsl(210, 65%, 20%)
#fff#FFFFFFrgb(255, 255, 255)hsl(0, 0%, 100%)

Tabel ini bukanlah hasil pengukuran warna secara mata pada layar, melainkan keluaran dari masukan kode yang dikonversi. Menyatukan nilai HEX dan RGB tradisional membuatnya lebih mudah dibedakan dari presisi tampilan HSL.

Sudut warna 0 dalam abu-abu tidak berarti merah

Alat menampilkan sudut warna HSL 0 untuk input abu-abu. Namun, ketika saturasinya 0%, sudut warna tidak mengubah warna yang ditampilkan. Oleh karena itu, sebaiknya jangan menilai warnanya merah hanya dengan melihat angka pertama hsl (0, 0%, 50%). Baca sudut rona, saturasi, dan kecerahan secara bersamaan.

W3C CSS Color 4: Tidak ada efek sudut warna pada saturasi 0 Itu menjadi

HSL Bulat tidak mengembalikan RGB asli

Alat menampilkan #123456 sebagai hsl(210, 65%, 20%). Mengonversi HSL yang dibulatkan ini menjadi sRGB lalu membulatkan setiap saluran menjadi bilangan bulat dalam rentang 0 hingga 255 akan menghasilkan rgb(18, 51, 84), atau #123354. RGB aslinya adalah rgb(18, 52, 86), jadi kedua salurannya berbeda. Ini tidak berarti bahwa semua warna akan membuat perbedaan.

Perbandingan RGB asli 18, 52, 86 dengan RGB 18, 51, 84 yang dihitung kembali dari HSL bulat
Ini adalah diagram perbandingan yang saya buat sendiri. Saya telah menunjukkan hasil penghitungan kode, bukan pengukuran warna layar atau tangkapan layar alat sebenarnya. Periksa nomor untuk perbedaan saluran kecil.

W3C CSS Warna 4: Konversi HSL ke sRGB

Untuk tugas yang memerlukan kode asli yang tepat, gunakan HEX atau RGB yang dihasilkan dan simpan juga yang asli. Gunakan HSL sebagai titik awal untuk penyesuaian, namun jangan perlakukan representasi bilangan bulat alat sebagai konversi bolak-balik yang lossless. Alat ini tidak memiliki kemampuan untuk memasukkan HSL dan mengembalikannya ke HEX.

Bedakan antara HEX 4 digit dan 8 digit serta rentang dukungan

CSS juga memiliki HEX 4 digit dan 8 digit dengan saluran alfa. Namun, konverter Moyoutil saat ini tidak menerima hal ini. #12345678 dan #abcd merupakan kesalahan dan tidak diproses sebagai hasil RGB. Jika Anda menghilangkan posisi alfa, informasi transparansi akan hilang, jadi jangan menganggapnya sebagai informasi warna yang sama.

W3C CSS Warna 4: HEX dengan saluran alfa

  1. Arsipkan kode warna asli dan tempat penggunaannya pertama kali.
  2. Masukkan 3 atau 6 digit HEX ke dalam alat konversi warna dan lihat HEX dan RGB yang dihasilkan.
  3. Klik Salin Hasil untuk menyalin tiga baris: HEX, RGB, dan HSL. Pilih dan gunakan satu baris notasi sesuai kebutuhan.
  4. Pertimbangkan membulatkan perbedaan saat menggunakan kembali HSL bilangan bulat. Keterbacaan kombinasi latar belakang dan huruf sebenarnya juga diperiksa secara terpisah.

Alat ini adalah pengonversi kode warna dan tidak menyediakan pemeriksaan kepatuhan kontras warna, konversi profil ICC, atau konversi CMYK untuk pencetakan.

Pertanyaan yang Sering Diajukan

Bisakah HEX 6 digit selalu dikurangi menjadi 3 digit?

Tidak. Singkatan hanya dapat dilakukan secara akurat jika dua digit pada setiap saluran sama. Misalnya, #336699 bisa disingkat menjadi #369, tapi #123456 tidak bisa disingkat seperti itu.

Jika nomor HSL sama, apakah warnanya akan tampak sama di semua layar?

Perbandingan dalam artikel ini terbatas pada kode dan hasil perhitungan. Konversi kode warna saja tidak menjamin kecocokan visual antara layar atau materi cetakan yang berbeda.