HEX, RGB, dan HSL: memilih format warna web

Setiap warna dalam notasi ini adalah warna sRGB yang sama dengan pakaian berbeda. HEX adalah RGB yang ditulis dalam basis enam belas: #4F46E5 adalah kanal merah, hijau, dan biru sebagai dua digit heksadesimal masing-masing. rgb(79, 70, 229) menyatakan tiga kanal yang sama dalam desimal, dan hsl() mendeskripsikan piksel yang sama sebagai posisi pada roda warna.

HEX dan rgb() dapat menyatakan kanal sRGB delapan bit yang sama secara tepat. Nilai hsl() juga dapat menggambarkan warna itu, tetapi pembulatan rona, saturasi, atau kecerahan dapat menggeser hasil konversi balik.

• HEXHEX ringkas dan stabil untuk salin-tempel antara alat desain dan kode, dan itulah mengapa palet serta panduan gaya biasanya diterbitkan sebagai hex.
• RGBRGB terbaca sebagai tiga intensitas kanal dari 0 hingga 255 dan cocok dengan cara layar dan format gambar benar-benar menyimpan piksel.
• HSLHSL terbaca sebagai hue, saturasi, dan lightness—lebih dekat dengan cara orang mendeskripsikan warna, dan jauh lebih mudah disesuaikan menurut niat.

Transparansi menempel pada setiap notasi. rgb() dan hsl() menerima argumen keempat—rgba(79, 70, 229, 0.5)—dan HEX memiliki bentuk delapan digit, #4F46E580, dengan pasangan terakhir sebagai alfa dari 00 hingga FF.

• 0–1 atau 00–FFAlfa dalam notasi fungsi berkisar 0 sampai 1; hex delapan digit memakai 00 sampai FF. Byte 80 berarti 128/255, sekitar 0,502—dekat, tetapi tidak tepat sama dengan 0,5.
• Uji di permukaanOverlay tembus pandang dikompositkan dengan latar sesuai nilai alfa; uji pada setiap permukaan tempat overlay itu akan tampil.
• Token yang berkerabatKetika sistem desain merilis versi pekat dan translusen dari hue yang sama, satu hex delapan digit menjaga keduanya terlihat berkerabat.

Mengedit kanal RGB secara langsung adalah aritmetika; mengedit niat lebih mudah di HSL. Tint adalah hue yang sama dengan lightness lebih tinggi, shade adalah hue yang sama dengan lightness lebih rendah, dan varian kalem adalah hue yang sama dengan saturasi diturunkan—tiga gerakan satu tombol alih-alih tiga kanal yang hanyut bersama.

Color Shades Generator membangun rentang secara mekanis: berikan satu warna hex, lalu alat mencampurnya menuju hitam dan putih untuk menghasilkan tiga hingga dua puluh langkah berbobot dalam hex. Langkah itu tidak seragam menurut persepsi mata; periksa tiap kandidat dalam konteks antarmuka yang sebenarnya.

• Tint dan shadeTint dan shade: tahan hue dan saturasi, sapukan lightness dari nyaris-putih ke nyaris-hitam, dan Anda mendapat ramp yang berguna untuk latar, status, dan teks.
• Status saturasiVarian kalem dan cerah datang dari tombol saturasi saja, dan begitulah status hover dan disabled tetap berada dalam keluarga yang sama.
• Rotasi hueRotasi hue menghasilkan warna berkerabat: tetangga analog berada dalam sekitar tiga puluh derajat, komplemen seratus delapan puluh derajat jauhnya.

Harmoni warna adalah geometri pada roda hue: pasangan komplemen duduk berseberangan, set triadic membagi roda menjadi sepertiga, kelompok analog bergerombol. HSL membuat matematikanya terlihat—ubah satu angka dan seluruh skema ikut bergerak.

Generator Harmoni Warna menerapkan persis model itu. Dari satu seed hex enam digit, ia menghasilkan palet lima warna dalam enam skema klasik—analog, komplemen, split complementary, triadic, tetradic, dan monokrom—dan memeriksa kontras setiap swatch terhadap teks hitam dan putih pada target rasio WCAG 3, 4.5, atau 7.

Hasil dapat diekspor sebagai properti kustom CSS maupun JSON. Untuk mereproduksi lima warna, bagikan warna awal dan skemanya; sertakan target kontras jika label lulus/gagal yang sama juga diperlukan.

CSS modern menggabungkan bentuk fungsional lama: kanal berpisah spasi dengan slash opsional untuk alfa—rgb(79 70 229 / 0.5)—menggantikan rgba() yang penuh koma. Spesifikasi level 4 juga menambahkan notasi seperti hwb(), lab(), dan oklch() untuk gamut lebih lebar dan ramp yang merata secara persepsi.

Color Mixer menerima warna hex yang didukung, menyediakan interpolasi yang memperhitungkan alfa atau komposit source-over, lalu melaporkan hasil hex dan RGBA. Pilih operasi dan bobot sebelum membandingkan dua warna merek.

Kolom input menerima teks hex, bukan sembarang ekspresi warna CSS. Ubah nilai rgb() atau hsl() ke bentuk hex yang didukung sebelum menggunakan ruang kerja ini.

• Sintaks baruKanal berpisah spasi dengan slash alfa valid di setiap peramban terkini; bentuk koma tetap didukung sebagai alias warisan.
• Mengapa OKLCHoklch() memperbaiki cacat nyata HSL: langkah lightness yang sama dalam HSL tidak tampak sama terang di seluruh hue, sedangkan OKLCH menjaga lightness persepsi tetap konsisten.
• Adopsi sengajaAdopsi notasi baru di tempat ia memecahkan masalah—ramp yang konsisten, layar gamut lebar—dan pertahankan hex atau rgb() di tempat tooling dan kebiasaan sudah bekerja.

Palet sering bermula dari tangkapan layar, logo, atau foto. Mengambil sampel piksel hasil dekode di peramban memberi nilai yang dapat diulang untuk tampilan itu, lebih berguna daripada menebak warna dengan mata.

Image Color Picker membuka PNG, JPEG, atau WebP di tab dan melaporkan RGBA piksel hasil dekode yang disampel Canvas saat Anda mengekliknya. Ini membantu memeriksa aset lama atau tepi antialias, tetapi nilainya dapat dipengaruhi dekode dan konversi warna.

Semuanya berjalan lokal: gambar didekode di peramban Anda dan tidak pernah diunggah, yang penting ketika artwork-nya adalah desain yang belum dirilis. Bawa nilai yang dipetik ke alat nuansa atau harmoni, dan seluruh rantai dari artwork ke palet tetap berada di perangkat Anda.