kode warna html

Daftar Kode Warna HTML & CSS Lengkap Full Color & Cara Penggunaannya

Kode warna HTML menyediakan nilai kode warna HEX, dan RGB. Kode warna HEX mewakili tiga nilai terpisah yang mendefinisikan tingkat warna komponen. Ini ditentukan dengan notasi heksadesimal (hex) untuk campuran nilai warna merah (red), hijau (green), biru (blue). Nilai terendah yang dapat diberikan adalah 0 (hex 00) dan nilai tertinggi adalah 255 (hex FF).

Nilai heksadesimal ditulis sebagai angka enam digit, dimulai dengan tanda #. Huruf yang digunakan dalam digit heksadesimal dapat berupa huruf besar atau kecil. Misalnya, untuk menentukan warna putih Anda dapat menulis #FFFFFF atau #ffffff.

Pada artikel kali ini, Nevaweb mengilustrasikan daftar komprehensif untuk semua warna populer dengan nilai yang berbeda. Langsung saja simak daftarnya dibawah ini!

Daftar Kode Warna HTML dan CSS

Tabel dibawah ini memberikan representasi tabular dari nama warna dengan kode HEX dan RGB yang memungkinkan anda untuk menjelajahi dan mengidentifikasi nuansa warna yang berbeda dengan mudah.

Merah 

Visualisasi Warna Nama Warna Kode HEX Kode RGB
Indian Red #CD5C5C rgb(205, 92, 92)
Light Coral #F08080 rgb(240, 128, 128)
Salmon #FA8072 rgb(250, 128, 114)
Crimson #DC143C rgb (220, 20, 60)
Red #FF0000 rgb (255, 0, 0)
Fire Brick #B22222 rgb (178, 34, 34)
Dark Red #8B0000 rgb(139, 0,0)

Pink

Visualisasi Warna Nama Warna Kode HEX Kode RGB
unnamed Pink #FFC0CB rgb(255, 192, 203)
unnamed (1) Light Pink #FFB6C1 rgb(255, 182, 193)
Hot Pink #FF69B4 rgb(255, 105, 180)
unnamed (3) Deep Pink #FF1493 rgb(255, 20, 147)
unnamed (4) Medium Violet Red #C71585 rgb(199, 21, 133)
unnamed (5) Pale Violet Red #DB7093 rgb(219, 112,147)
Baca Juga :   Staging: Arti, Fungsi, Contoh, dan Cara Menggunakannya

Orange 

Visualisasi Warna Nama Warna Kode HEX Kode RGB
unnamed (6) Coral #FF7F50 rgb(55, 127, 80)
unnamed (7) Tomato #FF6347 rgb(255, 99, 71)
unnamed (7) Orange Red #FF4500 rgb(255, 69, 0)
unnamed (9) Dark Orange #FF8C00 rgb(255, 140, 0)
unnamed (10) Orange #FFA500 rgb(255, 165, 0)

Kuning

Visualisasi Warna Nama Warna Kode HEX Kode RGB
unnamed (11) Gold #FFD700 rgb(255, 215, 0)
unnamed (12) Yellow #FFFF00 rgb(255, 255, 0)
unnamed (13) Light Yellow #FFFFE0 rgb(255, 255, 224)
unnamed (14) Pale Goldenrod #EEE8AA rgb(238, 232, 170)
unnamed (15) Khaki #F0E68C rgb(240, 230, 140)

Hijau 

Visualisasi Warna Nama Warna Kode HEX Kode RGB
unnamed (16) Green #008000 rgb(0, 128, 0)
unnamed (17) Dark Green #006400 rgb(0, 100, 0)
unnamed (18) Sea Green #2E8B57 rgb(46, 139, 87)
unnamed (19) Lime Green #32CD32 rgb(50, 205, 50)

Biru 

Visualisasi Warna Nama Warna Kode HEX Kode RGB
unnamed (20) Aqua #00FFFF rgb(0, 255, 255)
unnamed (21) Steel Blue #4682B4 rgb(70, 130, 180)
unnamed (22) Blue #0000FF rgb(0, 0, 255)
unnamed (23) Navy #000080 rgb(0, 0, 128)

Tips Memilih Warna untuk Design Website

Kenali color wheel

Dasar-dasar teori warna dimulai dengan memahami tiga kelompok yang termasuk roda warna: primer, sekunder, dan tersier. Warna primer, merah, biru, dan kuning, adalah warna dasar roda warna, dan semua warna yang tersisa berasal dari ketiganya. Selanjutnya, datang warna sekunder. Warna sekunder adalah apa yang Anda dapatkan ketika Anda mencampur salah satu dari tiga warna primer bersama-sama, atau dikenal sebagai oranye, hijau, dan ungu. Akhirnya, ada warna tersier, juga disebut sebagai “warna tengah”. Inilah yang Anda dapatkan ketika Anda menggabungkan warna primer dan warna sekunder. Contohnya adalah merah-oranye, kuning-hijau, atau biru-ungu.

 

Memahami hubungan antara warna tidak berhenti di sini. Tapi sekarang kita menyadari bagaimana warna terbentuk, kita dapat menentukan bagaimana mereka “berinteraksi” satu sama lain, atau dengan kata lain, bagaimana mereka bekerja bersama, dan bagaimana kita membangun kombinasi warna kita sendiri.

Pertimbangkan psikologi warna

Dunia psikologi warna dibangun di atas gagasan bahwa warna-warna tertentu memicu perasaan dan emosi tertentu, yang memicu tindakan tertentu. Psikologi warna menunjukkan bahwa memilih skema warna situs web Anda berdasarkan pengalaman emosional yang ingin Anda sampaikan kepada pengguna Anda tidak hanya akan mempengaruhi kepribadian merek Anda, tetapi juga akan memicu reaksi pengunjung tertentu berdasarkan lingkungan emosional yang Anda buat.

Baca Juga :   Apa itu IP Address? Pengertian, Jenis, Fungsi & Cara Kerja

Pahami kombinasi warna

Sama seperti setiap warna memiliki kepribadian dan signifikansi saja, hal yang sama berlaku untuk hubungan antara setiap warna. Ketika Anda memilih kombinasi warna, Anda sering menyampaikan pesan atau konsep tertentu kepada pengunjung situs web Anda, tergantung pada bagaimana “kepribadian” warna tersebut bergabung.

unnamed (24)

Jika, misalnya, jika Anda memilih skema warna komplementer yang mencakup merah dan biru, merah, yang mewakili urgensi dan kekuatan, dan biru, yang mewakili kedamaian dan kesetiaan, hasil akhir Anda adalah suasana campuran kesetiaan dan stabilitas yang kuat dan akan datang. Atau, jika Anda memilih dua atau lebih warna yang menghasilkan keseimbangan harmonis daripada kontras, Anda menciptakan getaran yang berbeda.

Cara Mengetahui Kode Warna HTML

Canva

Canva adalah alat desain grafis online yang memiliki banyak fitur. Salah satunya adalah roda warna, yang memungkinkan Anda mencoba berbagai kombinasi warna dalam kode HTML. Selain wheel of colors, Canva juga menjelaskan teori warna, jadi Anda bisa belajar sambil bereksperimen. Selain itu, merek terkemuka dalam desain grafis ini memiliki roda warna gratis yang dapat Anda gunakan untuk menggabungkan warna dalam CSS.

Adobe Color CC

Adobe Color CC ini memiliki banyak opsi pengaturan dan lebih kompleks daripada Canva. Oleh karena itu, situs web ini sangat cocok bagi mereka yang ingin mencoba menggabungkan kode warna HTML yang lebih rumit.

Paletton

Paletton adalah tempat berikutnya untuk menggabungkan kode warna lengkap. Di antara Canva dan Adobe Color CC, fitur Paletton ini sederhana tetapi memiliki banyak fitur.  Selain itu, ada petunjuk rinci tentang cara menggunakan Paletton tepat di bawah roda warna, jadi Anda dapat langsung membacanya jika Anda bingung.

Cara menggunakan Kode Warna HTML CSS Lengkap

Cara menggunakan kode warna HTML pada karakter

<!DOCTYPE html>

Baca Juga :   Apa Itu Website? Pengertian, Fungsi dan Jenisnya!

<html>

<body>

  <p><font size=”3″ color=”#008000  >Nevaweb</font></p>

  <p><font size=”2″ color=”#FF1493>Daftar Kode Warna CSS HTML</font></p>

<p><font face=”arial” color=”#0000ff”>Dengan Contoh Penggunaannya</font></p>

</body>

</html>

 

Script diatas akan menghasilkan tampilan seperti pada gambar dibawah ini:

Cara menggunakan kode warna HTML pada background

<!DOCTYPE html>

<html>

<head>

<style>

  #p1 {background-color:#ff0000;}

  #p2 {background-color:#00ff00;}

  #p3 {background-color:#0000ff;}

  #p4 {background-color:#ffff00;}

  #p5 {background-color:#ff00ff;}

</style>

</head>

<body>

  <p>Contoh Beberapa Kode Warna Lengkap:</p>

  <p id=”p1″>Red</p>

  <p id=”p2″>Green</p>

  <p id=”p3″>Blue</p>

  <p id=”p4″>Yellow</p>

  <p id=”p5″>Cerise</p>

</body>

</html>

Script diatas akan menghasilkan tampilan seperti gambar dibawah ini:

unnamed (25)

Cara menggunakan kode warna HTML pada border

<!DOCTYPE html>

<html>

<head>

<style>

h2 {

   border-style: solid;

   border-color: #008000;

}

div {

   border-style: solid;

   border-color: #B22222;

}

</style>

</head>

<body>

  <h2>Daftar Kode Warna HTML CSS</h2>

  <div>Nilai dari border-color dapat diatur menggunakan angka kode hexadecimal.</div>

  <p><strong>Catatan:</strong> border-color tidak dapat bekerja jika digunakan sendiri. Gunakan properti border-style terlebih dahulu untuk mengatur border kode HTML warna.</p>

</body>

</html>

Script diatas akan menghasilkan tampilan seperti pada gambar dibawah ini:

unnamed (26)

Ingin Buat Website Bisnis Lebih Mudah Anti Ribet?

Jika anda warga Sidoarjo yang menginginkan untuk memiliki website bisnis tanpa ribet, anda dapat menggunakan jasa pembuatan website portal berita dari Nevaweb! Yuk, kunjungi website Nevaweb dan konsultasikan website impianmu mulai dari landing page hingga content yang anda inginkan sekarang juga!

×