🎨

FAQ Konverter Warna (HEX, RGB, HSL)

Bagaimana cara mengonversi HEX ke RGB?

Untuk mengonversi kode warna hex ke RGB, pisahkan string hex enam digit #RRGGBB menjadi tiga pasangan, lalu konversikan setiap pasangan dari heksadesimal (basis-16) ke desimal (basis-10).

Contoh: #FF5733

  • FF = 255 (Merah)
  • 57 = 87 (Hijau)
  • 33 = 51 (Biru)
  • Hasil: rgb(255, 87, 51)

Untuk hex singkat (#F53), perluas setiap digit menjadi pasangan terlebih dahulu: #F53 menjadi #FF5533. Digitnya digandakan: F menjadi FF, 5 menjadi 55, 3 menjadi 33.

Hex delapan digit (#RRGGBBAA) bekerja dengan cara yang sama tetapi dengan pasangan tambahan untuk saluran alpha. #FF573380 menambahkan 80 (128, atau ~50% opasitas) untuk saluran alpha.

Untuk konversi instan, gunakan konverter warna. Alat ini menangani semua format, termasuk hex pendek dan panjang, dengan dan tanpa alpha.

Apa perbedaan antara RGB dan RGBA?

RGB mendefinisikan warna menggunakan saluran merah, hijau, dan biru. RGBA adalah RGB dengan saluran Alpha tambahan yang mengontrol opasitas. Nilai alpha berkisar dari 0.0 (sepenuhnya transparan) hingga 1.0 (sepenuhnya buram).

rgb(255, 0, 0)         /* Merah sepenuhnya buram */
rgba(255, 0, 0, 0.5)  /* Merah dengan opasitas 50% */

Dalam CSS modern (CSS Color Level 4), alias rgba() tidak lagi diperlukan. Fungsi rgb() sekarang menerima saluran alpha opsional:

rgb(255 0 0 / 0.5)  /* Sintaks modern, merah dengan opasitas 50% */

Semua browser modern mendukung sintaks ini. Fungsi rgba() lawas bekerja di mana saja dan tidak akan dihapus, tetapi menggunakan rgb() dengan sintaks garis miring adalah pendekatan yang direkomendasikan untuk kode baru.

Bagaimana cara mengonversi RGB ke HSL?

Mengonversi RGB ke HSL melibatkan tiga langkah:

  1. Normalisasi nilai RGB ke rentang 0-1 (bagi dengan 255)
  2. Temukan min dan max dari tiga nilai yang dinormalisasi — rata-rata dari min dan max adalah lightness (L)
  3. Hitung hue dan saturation berdasarkan saluran mana yang menjadi max dan selisih antara max dan min

Rumusnya bervariasi tergantung pada saluran warna mana yang mendominasi:

  • Jika merah adalah maksimum: hue = (hijau - biru) / (max - min)
  • Jika hijau adalah maksimum: hue = 2 + (biru - merah) / (max - min)
  • Jika biru adalah maksimum: hue = 4 + (merah - hijau) / (max - min)
  • Saturation bergantung pada lightness: jika L > 0.5, saturation = (max - min) / (2 - max - min), jika tidak saturation = (max - min) / (max + min)

Perhitungannya tidak sepele dan mudah salah, jadi menggunakan alat konverter warna disarankan untuk hasil instan.

Mengapa warna saya terlihat berbeda di layar yang berbeda?

Tampilan warna bervariasi antar layar karena beberapa alasan:

Kalibrasi layar — Sebagian besar layar konsumen tidak dikalibrasi warna. Pengaturan pabrik sangat bervariasi dalam kecerahan, kontras, dan suhu warna.

Perbedaan gamut warna — Layar yang berbeda mendukung rentang warna yang berbeda. sRGB adalah standar web, tetapi banyak ponsel dan laptop modern mendukung DCI-P3 (25% lebih lebar). Warna di luar gamut sRGB terlihat benar pada layar gamut lebar tetapi terpotong atau bergeser pada layar standar.

Teknologi tampilan — Layar OLED menghasilkan hitam yang lebih dalam dan warna yang lebih jenuh daripada layar LCD. Panel IPS memiliki akurasi warna yang lebih baik daripada panel TN.

Sudut pandang — Warna bergeser saat dilihat dari sudut tertentu, terutama pada layar kelas bawah.

Kecerahan dan cahaya sekitar — Layar pada kecerahan 50% di ruangan gelap terlihat berbeda dari layar yang sama pada kecerahan 100% di bawah sinar matahari langsung.

Untuk meminimalkan perbedaan: Bekerjalah dalam ruang warna sRGB, kalibrasi monitor Anda dengan kalibrator perangkat keras, dan uji desain Anda di beberapa perangkat sebelum dirilis.

Untuk apa model warna HSL cocok digunakan?

HSL (Hue, Saturation, Lightness) ideal untuk manipulasi warna secara pemrograman. Keunggulan utamanya adalah satu saluran membawa informasi "warna" (hue), sementara dua lainnya mengontrol tampilan secara independen dari nilai hue.

Apa yang dimudahkan oleh HSL:

  • Palet warna — Pertahankan hue yang sama, variasikan lightness dan saturation untuk membuat skala warna penuh
  • Status hover dan aktif — Ubah lightness dengan persentase tetap: hsl(220, 80%, 50%) -> hsl(220, 80%, 60%)
  • Mode gelap — Kurangi lightness di semua warna: kurangi 30% dari lightness setiap warna
  • Tema — Tukar nilai hue untuk menghasilkan skema warna yang sepenuhnya baru dari struktur saturation/lightness yang sama
  • Status dinonaktifkan — Kurangi saturation untuk meredupkan elemen: hsl(220, 80%, 50%) -> hsl(220, 30%, 70%)

Untuk apa HSL tidak cocok:

HSL tidak seragam secara perseptual. Dua warna dengan nilai lightness yang sama (misalnya, hsl(60, 100%, 50%) — kuning cerah dan hsl(240, 100%, 50%) — biru murni) memiliki kecerahan yang dirasakan sangat berbeda. Untuk manipulasi warna yang seragam secara perseptual, gunakan OKLCH sebagai gantinya.

Apa arti tanda # dalam warna hex?

Awalan # (tanda pagar) memberitahu parser CSS bahwa karakter berikutnya mewakili nilai warna heksadesimal. Ini adalah notasi standar dalam CSS dan HTML untuk kode warna hex.

Format lengkapnya adalah #RRGGBB atau #RRGGBBAA:

| Komponen | Arti | Contoh (#FF5733) | |-----------|------|---------------------| | # | Awalan hex | Indikator wajib | | RR | Saluran merah | FF (255) | | GG | Saluran hijau | 57 (87) | | BB | Saluran biru | 33 (51) |

Dalam HTML, # juga digunakan untuk tautan jangkar (<a href="#section">), tetapi dalam konteks CSS atau atribut style, ini selalu menunjukkan warna hex. HTML juga mendukung "named colors" lawas (140 nama yang telah ditentukan seperti red, blue, rebeccapurple) yang tidak memerlukan #.

Apa itu gamut warna dan mengapa penting?

Gamut warna adalah rentang warna yang dapat ditampilkan oleh perangkat atau direpresentasikan oleh ruang warna. Anggap saja sebagai "kosakata" warna yang tersedia untuk layar atau format file.

Gamut warna umum, dari yang terkecil hingga terlebar:

| Ruang Warna | Ukuran Relatif | Tempat Digunakan | |-------------|---------------|-------------------| | sRGB | Baseline | Standar web, sebagian besar monitor, semua browser | | Adobe RGB | ~50% lebih lebar | Fotografi profesional, cetak | | DCI-P3 | ~25% lebih lebar | Ponsel modern, Mac, banyak laptop | | Rec. 2020 | ~75% lebih lebar | Televisi HDR, layar kelas atas |

Mengapa penting: Warna di luar gamut layar tidak dapat ditampilkan secara akurat. Perangkat akan memotong warna ke nilai dalam gamut terdekat, atau memperkirakannya. Inilah mengapa merah tua yang cerah di file desain mungkin tampak kusam atau keruh di layar laptop standar.

Untuk desain web: Selalu desain dalam sRGB atau periksa apakah warna Anda aman untuk sRGB. OKLCH dan ruang warna display-p3 memungkinkan Anda menargetkan gamut yang lebih lebar, tetapi Anda harus menyediakan fallback sRGB untuk layar standar.

Apa perbedaan antara hex dan hex dengan alpha?

Hex standar (#FF5733) menggunakan enam digit dan tidak memiliki saluran alpha — warnanya selalu sepenuhnya buram. Hex dengan alpha (#FF573380) menggunakan delapan digit, menambahkan dua digit hex lagi di akhir untuk saluran alpha (opasitas).

Nilai alpha dalam hex:

| Pasangan Hex | Desimal | Opasitas | |--------------|---------|----------| | 00 | 0 | Sepenuhnya transparan | | 80 | 128 | ~50% opasitas | | FF | 255 | Sepenuhnya buram |

Contoh:

#FF5733     — Merah-oranye solid, tanpa transparansi
#FF5733FF   — Warna yang sama, sepenuhnya buram (FF redundan)
#FF573380   — Warna yang sama, 50% transparan
#FF573300   — Warna yang sama, sepenuhnya tidak terlihat

Ada juga hex singkat empat digit dengan alpha: #F538 diperluas menjadi #FF553388 (opasitas 50%).

Dukungan browser: Hex delapan digit didukung di semua browser modern. Untuk dukungan browser lawas (Internet Explorer), gunakan rgba() sebagai gantinya.

Bagaimana cara memilih warna yang aksesibel untuk situs web saya?

Ikuti proses langkah demi langkah ini untuk membangun sistem warna yang aksesibel:

1. Mulai dengan warna merek utama. Pilih hue yang mewakili merek Anda, lalu gunakan HSL atau OKLCH untuk membuat skala penuh dari sangat terang (latar belakang) hingga sangat gelap (teks).

2. Atur teks Anda ke mendekati hitam. Teks isi pada latar belakang putih sebaiknya #1A1A1A hingga #333333. Jangan pernah menggunakan hitam murni (#000000) pada putih murni — ini menyebabkan ketegangan mata bagi sebagian pembaca. Abu-abu gelap pada putih memberikan keterbacaan yang lebih baik.

3. Periksa setiap pasangan foreground-background. Setiap kombinasi teks dan latar belakang harus memenuhi standar WCAG:

  • Teks normal: minimal 4.5:1 (WCAG AA)
  • Teks besar: minimal 3:1 (WCAG AA)
  • Usahakan 7:1 pada teks isi (WCAG AAA)

4. Jangan pernah menggunakan warna sebagai satu-satunya pembeda. Tautan harus memiliki garis bawah (bukan hanya warna yang berbeda). Status error harus menyertakan ikon atau teks. Grafik harus menggunakan pola atau label.

5. Uji dengan simulator buta warna. Deuteranopia (merah-hijau) adalah jenis yang paling umum. Pastikan desain Anda berfungsi tanpa persepsi warna.

6. Verifikasi dalam skala abu-abu. Jika desain Anda kehilangan makna saat dikonversi ke skala abu-abu, Anda terlalu mengandalkan warna untuk menyampaikan informasi.

Gunakan konverter warna kami untuk langsung memeriksa rasio kontras antara dua warna apa pun.

FAQ Konverter Warna (HEX, RGB, HSL) - CoolTool