DAFTAR KODE WARNA HTML DAN CSS (LENGKAP 140+ VISUAL DAN CARA)

Warna dalam HTML dan CSS dapat didefinisikan menggunakan beberapa metode berbeda, mulai dari: nama-nama warna yang telah ditentukan, ke kode heksadesimal, ke fungsi RGB dan HSL. Di bawah ini, saya akan menjelaskan beberapa metodenya dan bagaimana cara menggunakannya.

Di artikel ini, kita akan membahas detail :

• Cara-cara memberi warna pada elemen HTML
• Table warna “NAMA” HTML dan CSS
• Table warna “HEX” HTML dan CSS
• Table warna “RGB” HTML dan CSS
• Table warna “HSL” HTML dan CSS
• Daftar kode warna HTML dan CSS (Nama, RGB + Hex Code)

Apa itu kode warna HTML dan CSS?

Kode warna HTML dan CSS adalah cara untuk mendefinisikan warna dalam HTML dan CSS pada sebuah website. Ada banyak sekali warna web yang bisa dipakai dalam HTML dan CSS. Warna-warna tersebut bisa didefinisikan menggunakan beberapa metode berbeda, mulai dari: nama-nama warna yang telah ditentukan, ke kode heksadesimal, ke fungsi RGB dan HSL.

Jenis-jenis kode warna HTML dan CSS

Berikut beberapa cara untuk menggunakan kode warna HTML dan CSS pada sebuah website:

• Nama warna: menggunakan nama warna yang sudah ditentukan
• Kode heksadesimal: menggunakan kode heksadesimal yang terdiri dari 6 digit
• Kode heksadesimal singkat: menggunakan kode heksadesimal yang terdiri dari 3 digit
• Fungsi RGB: menggunakan fungsi RGB yang terdiri dari 3 angka
• Fungsi RGBA: menggunakan fungsi RGBA yang terdiri dari 4 angka
• Fungsi HSL: menggunakan fungsi HSL yang terdiri dari 3 angka
• Fungsi HSLA: menggunakan fungsi HSLA yang terdiri dari 4 angka

Berikut cara penggunaan kode warna dan contoh code nya.

1. Nama Warna

Nama warna adalah metode termudah untuk mendefinisikan warna dalam HTML dan CSS untuk menghias website. Ada banyak nama warna yang telah ditentukan dan dapat digunakan. Anda cukup menulis nama warna tersebut sebagai nilai dari properti warna atau latar belakang.

body {
  background-color: LightGreen;
  color: DarkRed;
}

2. Kode Heksadesimal

Kode heksadesimal memungkinkan Anda mendefinisikan warna dengan lebih presisi. Kode ini dimulai dengan tanda pagar (#), diikuti oleh enam digit yang mewakili warna merah, hijau, dan biru (RGB).

body {
  background-color: #32CD32;
  color: #8B0000;
}

3. Kode Heksadesimal Singkat

Jika setiap pasangan digit dalam kode heksadesimal adalah sama, Anda dapat menyederhanakannya menjadi tiga digit saja.

body {
  background-color: #3C3; // sama dengan #33CC33
  color: #800; // sama dengan #880000
}

4. Fungsi RGB

Fungsi rgb() dalam CSS memungkinkan Anda mendefinisikan warna dengan menyebutkan intensitas dari warna merah, hijau, dan biru, dalam rentang 0-255.

body {
  background-color: rgb(50,205,50);
  color: rgb(139,0,0);
}

5. Fungsi RGBA

Dengan menambahkan parameter keempat pada fungsi rgb(), Anda dapat menentukan tingkat transparansi warna. Parameter ini berada dalam rentang 0-1.

body {
  background-color: rgba(50,205,50,0.5);
  color: rgba(139,0,0,0.5);
}

6. Fungsi HSL

Fungsi hsl() memungkinkan Anda mendefinisikan warna berdasarkan hue (0-360 derajat di roda warna), saturation (0%-100%), dan lightness (0%-100%).

body {
  background-color: hsl(120,60%,50%);
  color: hsl(0,100%,27%);
}

7. Fungsi HSLA

Mirip dengan rgba(), fungsi hsla() memungkinkan Anda menambahkan transparansi pada warna yang ditentukan dengan hsl().

body {
  background-color: hsla(120,60%,50%,0.5);
  color: hsla(0,100%,27%,0.5);
}

Tabel lengkap 140+ daftar kode warna HTML dan CSS

Berikut table lengkap nama warna HTML dan CSS, contoh, beserta kode RGB dan kode warna Hexadecimal nya.

Tutorial mengubah warna elemen HTML pada CSS

Berikut beberapa contoh bagaimana cara penggunaan kode warna pada pengembangan website (Front End):

• warna background
• warna text (tulisan)
• warna border (garis tepi)

Bagaimana cara mengubah warna background pada CSS

Warna background atau latar belakang pada CSS bisa diubah dengan menggunakan properti background-color dan nilai warna yang diinginkan.

body {
  background-color: #32CD32;
}

Berikut video tutorial bagaimana cara mengubah warna background pada CSS

Bagaimana cara mengubah warna text (tulisan) pada CSS

Warna text atau tulisan pada CSS bisa diubah dengan menggunakan properti color dan nilai warna yang diinginkan.

body {
  color: #8B0000;
}

Bagaimana cara mengubah warna border pada CSS

Warna border atau garis tepi pada CSS bisa diubah dengan menggunakan properti border-color dan nilai warna yang diinginkan.

div {
  border-color: #8B0000;
}

Untuk tutorial CSS lengkap, silahkan baca referensi CSS Bahasa Indonesia

Tabel Overview metode kode warna dan contoh nilainya

Berikut adalah tabel markdown yang merangkum berbagai metode untuk mendefinisikan warna dalam HTML dan CSS:

Bagiamana cara konversi dari warna RGB ke Hexadecimal?

Untuk mengkonversi warna RGB ke Hexadecimal atau sebaliknya, silahkan coba di sini. Kamu bisa mengganti warna:

• HEX
• RGB
• HSL

Silahkan klik tombol warna di bawah ini:

Atau kamu tinggal ketik di google

rgb to hex

atau

hex to rgb

Akan muncul visual warna color picker yang bisa kamu pilih dan akan muncul kode warna RGB dan Hexadecimal nya.

Metode warna apa yang harus digunakan ?

Tidak ada aturan yang mengharuskan Anda menggunakan metode warna tertentu. Namun, ada beberapa keuntungan dan kerugian untuk masing-masing metode.

Terutama pada saat ini sudah banyak tool online dan juga ekstensi pada text editor seperti VSCode yang memudahkan kita untuk memilih warna yang kita inginkan. Tinggal klik-klin tanpa perlu dihafalkan

Nama Warna

Keuntungan menggunakan nama warna adalah bahwa Anda tidak perlu mengingat kode warna. Anda cukup mengetik nama warna yang ingin Anda gunakan. Kerugiannya adalah Anda tidak dapat mendefinisikan warna dengan presisi yang sama seperti menggunakan kode heksadesimal atau fungsi RGB.

Kode Heksadesimal

Keuntungan menggunakan kode heksadesimal adalah Anda dapat mendefinisikan warna dengan presisi yang lebih tinggi daripada menggunakan nama warna. Kerugiannya adalah Anda harus mengingat kode warna untuk warna yang ingin Anda gunakan.

Fungsi RGB

Keuntungan menggunakan fungsi RGB adalah Anda dapat mendefinisikan warna dengan presisi yang lebih tinggi daripada menggunakan nama warna. Kerugiannya adalah Anda harus mengingat kode warna untuk warna yang ingin Anda gunakan.

Fungsi HSL

Keuntungan menggunakan fungsi HSL adalah Anda dapat mendefinisikan warna dengan presisi yang lebih tinggi daripada menggunakan nama warna. Kerugiannya adalah Anda harus mengingat kode warna untuk warna yang ingin Anda gunakan.

Tips menggunakan warna pada sebuah website

Berikut adalah beberapa tips yang dapat membantu Kamu dalam menggunakan warna HTML dan CSS:

1. Menggunakan CSS Variables (Pro tips)

Dengan menggunakan CSS Variables, Kamu dapat mendefinisikan suatu warna sekali dan kemudian menggunakannya di seluruh website Kamu. Ini memudahkan proses perubahan warna secara keseluruhan jika diperlukan. Misalnya:

:root {
  --primary-color: #1e90ff;
}

body {
  background-color: var(--primary-color);
}

2. Memanfaatkan Tools Warna Online

Ada banyak tools online seperti Adobe Color, ColorSpace, dan Coolors yang dapat membantu Kamu membuat palet warna yang serasi dan menyenangkan secara visual.

3. Menggunakan Color Schemes

Ada beberapa skema warna yang sudah terbukti efektif dalam desain web, seperti monokromatik, analogus, komplementer, split-complementer, triad, tetrad, dan sebagainya. Kamu bisa mencoba skema-skema ini untuk menciptakan harmoni warna dalam desain Kamu.

4. Pahami Makna Warna

Setiap warna memiliki makna dan emosi yang berbeda. Sebagai contoh, merah seringkali dikaitkan dengan gairah dan bahaya, sementara biru sering dihubungkan dengan kepercayaan dan kedamaian. Menggunakan warna yang tepat dapat membantu Kamu mengkomunikasikan pesan yang tepat kepada pengguna Kamu.

Gabungkan berbagai warna, Kombinasi warna-warna ini bisa membantu kamu punya palet warna yang serasi dan menyenangkan secara visual.

5. Menggunakan Warna dengan Bijaksana

Menggunakan terlalu banyak warna dalam satu desain dapat menjadi bumerang dan malah membuat desain Kamu tampak berantakan dan tidak profesional. Sebagai aturan umum, cobalah untuk menggunakan 3-5 warna utama dalam desain Kamu. Satu untuk latar belakang, satu untuk konten, dan sisanya untuk penekanan dan aksen.

Yang sering ditanyakan seputar kode warna HTML dan CSS (FAQ)

#ffffff warna apa?

#ffffff adalah kode warna heksadesimal untuk warna putih.

#000000 warna apa?

#000000 adalah kode warna heksadesimal untuk warna hitam.

Berapa kode RGB warna biru?

Kode RGB warna birut adalah 255 250 205

Berapa kode RGB warna hijau?

Kode RGB warna hijau adalah 0 255 0

Berapa kode RGB warna merah?

Kode RGB warna merah adalah 255 0 0

Apa itu color picker?

Color picker adalah alat yang memungkinkan Kamu memilih warna dari roda warna atau memasukkan kode warna untuk mendapatkan nilai warna yang tepat.

Di mana tempat belajar HTML?

Kamu bisa membaca informasi seputar HTML dan kurikulum belajarnya di: belajar HTML di sini

Di mana tempat belajar CSS?

Kamu bisa membaca informasi seputar CSS dan kurikulum belajarnya di: belajar CSS di sini

Apa itu palet warna?

Palet warna atau color palette adalah kumpulan warna yang digunakan dalam desain. Palet warna yang baik terdiri dari warna-warna yang serasi dan menyenangkan secara visual.