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.

Konversi di antara ketiganya lossless di dalam sRGB: #4F46E5, rgb(79, 70, 229), dan nilai hsl() yang setara bolak-balik dengan persis, sehingga mengganti notasi adalah pilihan presentasi, bukan perubahan warna.

• 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 berkisar dari 0 hingga 1 dalam notasi fungsional dan dari 00 hingga FF dalam hex; 0.5 dan 80 adalah nilai setengah-transparan yang sama.
• Uji di permukaanOverlay translusen berlipat ganda terhadap apa pun di bawahnya, sehingga token semi-transparan perlu diuji pada setiap permukaan yang bisa didudukinya.
• 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.

Generator Nuansa Warna membangun ramp itu secara mekanis: beri satu warna hex dan ia mencampur ke arah hitam dan ke arah putih, mengembalikan tiga hingga dua puluh langkah berjarak sama sebagai nilai hex—sehingga status hover dan nada border berasal dari warna sumber yang sama, bukan tebakan yang dipetik tangan.

• 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.

Hasilnya diekspor sebagai properti kustom CSS dan sebagai JSON, sehingga palet langsung masuk ke stylesheet atau berkas token. Karena engine-nya deterministik, seed dan skema yang sama selalu mereproduksi lima warna yang sama—bagikan seed-nya, bukan tangkapan layar.

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.

Apa pun notasi yang Anda bakukan, mencampur dua warna adalah operasi per kanal: Pencampur Warna memadukan dua warna pada bobot pilihan dan melaporkan hasilnya sebagai RGBA dan hex, sehingga Anda dapat menghitung titik tengah antara dua warna merek alih-alih mengira-ngira.

Alat yang sama berfungsi ganda sebagai jembatan notasi: masukkan warna dalam satu bentuk dan baca hasilnya dalam bentuk lain, menjaga aritmetika tetap jujur ketika lembar spesifikasi menyebut hex tetapi stylesheet ditulis dalam rgb().

• 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 jarang berawal dari teori; ia berawal dari tangkapan layar, logo, atau foto. Membaca nilai piksel persis dari sumber mengalahkan menerka swatch di depan roda warna.

Pemilih Warna Gambar membuka PNG, JPEG, atau WebP di dalam tab dan melaporkan nilai RGBA persis dari piksel yang Anda klik—berguna untuk memulihkan warna merek dari aset lawas atau memeriksa apa yang sebenarnya ada di tepi anti-aliased.

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.