Penukar Warna HEX ke RGB

Apakah Kod Warna HEX?

Kod warna HEX adalah rentetan alfanumerik enam aksara yang digunakan dalam reka bentuk web dan grafik digital untuk mewakili warna tertentu.#RRGGBB, di mana setiap pasangan dua aksara mengkodkan intensiti salah satu daripada tiga warna utama aditif - merah (RR), hijau (GG), dan biru (BB) - menggunakan notasi heksadesimal (asas 16).00(intensiti sifar) kepadaFF(intensiti maksimum, bersamaan dengan 255 dalam perpuluhan).

Kod HEX berasal dari keperluan untuk menentukan warna dalam HTML dan CSS tanpa bergantung pada kata kunci warna yang dinamakan. Sementara CSS kini menyokong pelbagai format warna termasukrgb(), hsl(), danoklch(), HEX kekal sebagai notasi yang paling banyak digunakan dalam pembangunan front-end, penyerahan reka bentuk, dan garis panduan penjenamaan. Hampir setiap pemilih warna dalam alat seperti Figma, Sketch, Adobe Photoshop, dan Canva memaparkan nilai HEX secara lalai.

Jumlah warna unik yang boleh diwakili dengan kod HEX enam digit ialah 16,777,216 (256 x 256 x 256). Ini sering disebut sebagai "True Color" atau "warna 24 bit", yang sepadan dengan kedalaman warna kebanyakan paparan moden. Setiap saluran mendapat 8 bit (satu bait), dan tiga saluran bersama-sama menghasilkan 24 bit data warna.

Kod HEX tidak sensitif terhadap huruf besar, jadi#ff8000dan#FF8000Sesetengah panduan gaya lebih suka huruf besar untuk kebolehbacaan, manakala minifier CSS sering mengeluarkan huruf kecil untuk menyimpan bait - walaupun dalam praktiknya perbezaannya dapat diabaikan.

Bagaimana untuk menukar HEX kepada RGB Langkah demi Langkah

Menukarkan kod warna HEX kepada setara RGB adalah mudah. Proses ini melibatkan membahagikan rentetan enam aksara menjadi tiga pasangan dan menukar setiap pasangan dari heksadesimal (asas 16) ke perpuluhan (asas 10). Berikut adalah kaedah langkah demi langkah:

1. Hapus simbol hash.Jika kod HEX bermula dengan#Sebagai contoh,#1A2B3Cmenjadi1A2B3C.
2. Bahagikan kepada tiga pasangan.Bahagikan rentetan yang tinggal kepada tiga kumpulan dua aksara:1A, 2B, 3C.
3. Ubah setiap pasangan kepada perpuluhan.Gunakan sistem nilai tempat hexadecimal di mana digit pertama didarabkan dengan 16 dan digit kedua ditambah:
   • Merah:1A-> (1 x 16) + 10 =26
   • Hijau:2B-> (2 x 16) + 11 =43
   • Biru:3C-> (3 x 16) + 12 =60
4. Tulis nilai RGB.Gabungkan tiga nilai perpuluhan:rgb(26, 43, 60).

Digit heksadesimal dan setara perpuluhan mereka adalah: 0=0, 1=1, 2=2, 3=3, 4=4, 5=5, 6=6, 7=7, 8=8, 9=9, A=10, B=11, C=12, D=13, E=14, F=15. Menghafal A melalui F adalah satu-satunya bahagian yang berbeza dari aritmetik perpuluhan standard.

Untuk penukaran program, kebanyakan bahasa menawarkan fungsi terbina dalam.parseInt("1A", 16)pulangan26Dalam Python,int("1A", 16)CSS sendiri mengendalikan kedua-dua format secara asli, jadi penukaran terutamanya berguna apabila anda perlu memanipulasi saluran warna individu dalam kod - contohnya, menyesuaikan kecerahan, mencipta gradien secara programatik, atau mencampurkan dua warna.

Kod HEX 3 digit berbanding 6 digit

CSS menyokong format pendek 3 digit HEX (#RGB) sebagai kemudahan apabila setiap tiga pasangan terdiri daripada digit yang sama. Dalam singkatan ini, setiap digit tunggal diperluaskan dengan menggandakan.

• #F80meluas kepada#FF8800-> rgb ((255, 136, 0)
• #FFFmeluas kepada#FFFFFF-> rgb ((255, 255, 255)
• #000meluas kepada#000000-> rgb ((0, 0, 0)
• #09Cmeluas kepada#0099CC-> rgb ((0, 153, 204)
• #A3Fmeluas kepada#AA33FF-> rgb{170, 51, 255)

Notasi 3-digit mengurangkan bilangan warna yang tersedia dari 16.7 juta kepada hanya 4,096 (16 x 16 x 16), jadi ia tidak boleh mewakili setiap warna.

CSS juga menyokong 4 digit (#RGBA) dan 8 digit (#RRGGBBAA) Kod HEX yang merangkumi saluran alpha (transparansi). Nilai alpha mengikuti logik heksadesimal yang sama:FFbenar-benar buram dan00adalah telus sepenuhnya.#FF880080mewakili warnargb(255, 136, 0)penukar kami memberi tumpuan kepada format 3 dan 6 digit standard; jika anda memasukkan kod dengan saluran alpha, ia akan memproses hanya bahagian RGB.

HEX ke RGB Jadual Rujukan

Di bawah ini adalah jadual rujukan warna HEX biasa dan setara RGB mereka. Jadual ini merangkumi warna yang paling sering digunakan dalam reka bentuk web, warna bernama CSS, dan pilihan palet jenama popular.

CSS mentakrifkan 147 warna yang dinamakan secara keseluruhan, masing-masing dengan nilai HEX yang sesuai. Walaupun warna yang dinamakan mudah untuk prototaip, projek profesional biasanya bergantung pada nilai HEX atau RGB untuk ketepatan dan konsistensi merentasi penyemak imbas dan alat reka bentuk.

Warna Jenama Popular - Nilai HEX dan RGB

Pemaju dan pereka sering memerlukan nilai HEX dan RGB yang tepat dari warna jenama popular untuk mockup, integrasi, dan panduan gaya.

Garis panduan jenama sering menentukan warna dalam pelbagai format (HEX, RGB, CMYK, Pantone). Apabila melaksanakan warna jenama dalam CSS, sentiasa mengesahkan nilai terhadap halaman sumber jenama rasmi untuk memastikan ketepatan. Warna boleh bergeser sedikit antara skrin, jadi konsistensi dalam kod adalah penting.

Model Warna Dibandingkan: HEX, RGB, HSL, dan CMYK

Memahami bila untuk menggunakan setiap model warna membantu anda bekerja dengan lebih cekap di pelbagai alat dan media:

HEX dan RGB adalah matematik yang sama-- mereka mewakili ruang warna yang sama menggunakan notasi yang berbeza. Merubah antara mereka adalah terjemahan asas-16 ke asas-10 yang mudah tanpa kehilangan ketepatan atau perbezaan gamut. HSL, sebaliknya, adalah transformasi RGB ke dalam sistem koordinat silinder yang memudahkan penalaran tentang warna, kejenuhan, dan ringan secara bebas. CMYK adalah model warna pengurangan yang digunakan dalam percetakan dan tidak dapat mewakili semua warna RGB (dan sebaliknya), jadi penukaran antara RGB dan CMYK adalah perkiraan.

Dalam CSS moden (Level 4),color()fungsi dan ruang warna baru sepertioklch()dandisplay-p3Walau bagaimanapun, HEX dan RGB tetap menjadi asas untuk keserasian web dan disokong oleh setiap penyemak imbas yang digunakan hari ini.

Menggunakan HEX dan RGB dalam CSS dan JavaScript

Kedua-dua nilai HEX dan RGB adalah sah dalam CSS dan menghasilkan hasil yang sama. Berikut adalah contoh praktikal bagaimana setiap format digunakan:

Deklarasi CSS:

/* HEX notation */
body { background-color: #1A2B3C; }

/* RGB notation */
body { background-color: rgb(26, 43, 60); }

/* RGB with alpha (transparency) */
.overlay { background-color: rgba(26, 43, 60, 0.5); }

/* Modern CSS — space-separated syntax */
.card { color: rgb(26 43 60 / 80%); }

Fungsi penukaran JavaScript:

// HEX to RGB
function hexToRgb(hex) {
  const h = hex.replace('#', '');
  return {
    r: parseInt(h.substring(0, 2), 16),
    g: parseInt(h.substring(2, 4), 16),
    b: parseInt(h.substring(4, 6), 16)
  };
}

// RGB to HEX
function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(v => v.toString(16).padStart(2, '0'))
    .join('').toUpperCase();
}

Apabila bekerja dengan HTML Canvas API, warna sering mesti ditetapkan sebagai rentetan."#FF8000"dan"rgb(255, 128, 0)"bekerja untukfillStyledanstrokeStyleWalau bagaimanapun,getImageData()kaedah mengembalikan data piksel sebagai susunan 0 - 255 nombor bulat (RGBA), menjadikan RGB format semula jadi untuk manipulasi tahap piksel.

Dalam sifat tersuai CSS (variabel), nilai HEX biasanya disimpan untuk kesederhanaan:

:root {
  --primary: #4A90E2;
  --primary-rgb: 74, 144, 226; /* for use with rgba() */
}
.element {
  background: rgba(var(--primary-rgb), 0.3);
}

Corak menyimpan nilai saluran RGB mentah sebagai pembolehubah CSS adalah teknik popular yang membolehkan anda menerapkan ketidakselarasan secara dinamik tanpa menukar antara format pada masa berjalan.

Aksesibiliti dan Kontras Warna

Menukar HEX kepada RGB sering kali merupakan langkah pertama dalam mengira nisbah kontras warna untuk pematuhan aksesibiliti. Garis Panduan Aksesibiliti Kandungan Web (WCAG) memerlukan nisbah kontras minimum4.5:1untuk teks biasa dan3: 1untuk teks besar (18px + tebal atau 24px + biasa).

Rumus nisbah kontras memerlukanluminans relatifsetiap warna, yang dikira dari nilai RGB linear. Langkah-langkahnya adalah:

1. Ubah HEX kepada RGB (0 - 255 setiap saluran).
2. Normalkan setiap saluran kepada 0 - 1 dengan membahagikan dengan 255.
3. Gunakan formula linearisasi sRGB: jika nilai <= 0.04045, bahagi dengan 12.92; jika tidak, kira ((nilai + 0.055) / 1.055) ^ 2.4.
4. Hitung luminans: L = 0.2126 x R + 0.7152 x G + 0.0722 x B.
5. Hitung nisbah kontras antara dua warna: (L1 + 0.05) / (L2 + 0.05), di mana L1 adalah warna yang lebih terang.

Seperti yang anda lihat, nilai RGB adalah input penting untuk setiap pengiraan kontras aksesibiliti. Alat seperti WebAIM Contrast Checker, Chrome DevTools color picker, dan pemindai aksesibiliti kapak semua melakukan penukaran ini secara dalaman.

Bagi pereka, peraturan ringkas: teks gelap pada latar belakang terang (atau sebaliknya) dengan perbezaan luminan sekurang-kurangnya 125 dan perbezaan warna sekurang-kurangnya 500 (menggunakan jumlah perbezaan mutlak merentasi saluran R, G, B) biasanya akan lulus piawaian WCAG AA.