Read Time: 3 minute(s)

Mengenal Perbedaan RGB dan CMYK dalam Website

Gradient-Circles
Circles
Isi Artikel
Bagikan artikel:
Mengenal Perbedaan RGB dan CMYK dalam Website
Isi Artikel
Bagikan artikel:

Warna menjadi hal krusial dalam sebuah desain web, semua warna sudah terlihat di layar komputer atau pada hasil cetak yang berasal dari model tertentu. Dua model yang paling sering digunakan, yaitu RGB dan CMYK.

Di artikel ini akan membahas secara mendalam perbedaan antara RGB dan CMYK serta kegunaannya untuk dapat menciptakan tampilan website jadi lebih berwarna.

Pengertian RGB

RGB adalah rangkaian sebuah singkatan dari Red-Green-Blue, warna ini sering digunakan untuk beberapa device, seperti scanner maupun output device pada monitor. Selain itu, dapat memberikan sebuah warna pada background sampai dengan font website.

Apabila dikombinasikan, akan tercipta warna baru, seperti kuning, cyan, magenta, sampai warna putih. RGB juga bersifat additive, artinya pencampuran tiga warna primer akan menghasilkan warna putih, sedangkan pencampuran dua warna primer menghasilkan warna sekunder.

Pengertian CMYK

CMYK merupakan singkatan dari Cyan, Magenta, Yellow, dan Key (Black), warna tersebut akan dikombinasikan menjadi warna baru. Sebenarnya dengan mengombinasikan warna tersebut dapat menghasilkan hitam pekat. 

Beda halnya dengan RGB, pada kombinasi warna ini memiliki sifat subtractive, dalam arti semakin banyak dicampur maka semakin gelap hasilnya. RGB sering digunakan dalam industri percetakan, baik secara gambar dan tulisan karena menghasilkan warna konsisten.

Perbedaan RGB dan CMYK

Berikut ini adalah perbedaan RGB dan CMYK. 

KriteriaRGBCMYK
Susunan WarnaRed, Green, Blue (Merah, Hijau, Biru)Cyan, Magenta, Kuning, dan Hitam
Pencampuran WarnaAkan terbentuk warna putihMenghasilkan warna gelap (hitam)
PenggunaanWarna background website, warna font, konten sosial media, video, dan iklan digitalIklan pada media cetak, poster, brosur, spanduk, dan desain kaos
Model WarnaAdditive (Semakin banyak cahaya, semakin terang)Subtractive (Semakin banyak tinta, semakin gelap)
Representasi WarnaBerkisar antara 0 hingga 255Berkisar 0% hingga 100%
FungsiUntuk layar digital (Website, TV)Untuk percetakan (Brosur, Poster) 
Jangkauan WarnaLebih LuasLebih Sempit dibandingkan RGB
KesesuaianTidak ideal untuk dicetakTidak ideal untuk layar digital

Baca juga: Tugas dan Tanggung Jawab UI/UX Designer dan Toolsnya

Pentingnya Warna di Website

Warna bukan hanya sekadar elemen dekoratif, tetapi juga memengaruhi emosi, persepsi, dan keputusan pengunjung. Selain itu, pemilihan warna yang tepat dapat meningkatkan user experience, memperkuat pesan visual, dan menarik perhatian pengunjung website.

Penggunaan warna dengan kontras tinggi bisa meningkatkan keterbacaan, tetapi jika terlalu ramai bisa mengganggu pengunjung. Oleh karena itu, kemampuan dalam mengombinasikan warna menjadi hal penting karena dapat memengaruhi seberapa lama pengunjung bertahan di web. 

Baca juga: Sedang Ingin Revamp? Ini Dampak, Tahapan, Biaya, dan Tandanya

Cara Menerapkan Warna di Website

RGB dapat diterapkan pada sebuah website dengan menerapkan warna menggunakan format rgb (…,…,…) di mana setiap paramenter memiliki rentang nilai antara 0 hingga 255.

Contoh menerapkan warna di website | Sumber: dicoding
Contoh menerapkan warna di website | Sumber: dicoding

RGB bisa diaplikasikan ke dalam tiga hal, seperti font, background, dan bingkai konten. Inilah penjelasan detailnya. 

  • Color digunakan untuk dapat mengubah warna font.
  • Background-color dapat digunakan untuk mengubah warna pada background.
  • Border-color digunakan untuk mengubah warna bingkai dari konten. 

Selain itu, dapat mengisi angka-angka dalam kurung menjadi kode warna. Selanjutnya, dapat mencari kode tersebut di Google dengan keyword “Color Picker” dan akan muncul tampilan seperti ini. 

kode color picker yang ada di google

Selanjutnya, copy kode warna di kotak RGB kemudian masukkan ke dalam baris kode dan bisa menggunakan kode HEX dan HSL yang bisa diterapkan ke dalam website.

Artikel Terkait