Ahmad Rifai
kode warna html css

Kode Warna CSS / HTML (nama, hex, rgb) Lengkap + Cara Menggunakannya

Setiap warna masing-masing memiliki kode yang biasanya dapat ditulis dengan namanya, hex, dan rgb (decimal).

Bagi kita pemilik blog maupun website pada kondisi tertentu mungkin akan memerlukannya.

Apalagi bagi mereka yang bergelut dalam dunia desain template blog, akan memerlukan ini.

Kode warna dapat digunakan untuk memberi latar pada sebuah area tertentu maupun keseluruhan halaman.

Bukan hanya itu, untuk mewarnai sebuah teks kita juga memerlukannya.

Daftar Kode Warna CSS / HTML

Sebelum saya jelaskan bagaimana cara menggunakannya.

Saya akan memperkenalkan sebagian kode warna yang juga dapat ditulis dengan nama warna dalam html.

Serta sebuah alat sederhana yang dapat digunakan untuk menemukan kode warna yang diinginkan.

Berikut list sebagian kode warna yang bisa digunakan pada blog maupun website, dalam bentuk nama, hex, dan rgb.

WarnaNama Warna HTMLHexR G B
black#000000rgb(0,0,0)
navy#000080rgb(0,0,128)
green#008000rgb(0,128,0)
teal#008080rgb(0,128,128)
maroon#800000rgb(128,0,0)
purple#800080rgb(128,0,128)
olive#808000rgb(128,128,0)
silver#C0C0C0rgb(192,192,192)
gray#808080rgb(128,128,128)
blue#0000FFrgb(0,0,255)
lime#00FF00rgb(0,255,0)
aqua / cyan#00FFFFrgb(0,255,255)
red#FF0000rgb(255,0,0)
fuchsia / magenta#FF00FFrgb(255,0,255)
yellow#FFFF00rgb(255,255,0)
white#FFFFFFrgb(255,255,255)

Warna-warna merah

IndianRed#CD5C5Crgb(205,92,92)
LightCoral#F08080rgb(240,128,128)
Salmon#FA8072rgb(250,128,114)
DarkSalmon#E9967Argb(233,150,122)
LightSalmon#FFA07Argb(255,160,122)
Crimson#DC143Crgb(220,20,60)
FireBrick#B22222rgb(178,34,34)
DarkRed#8B0000rgb(139,0,0)

Warna-warna pink

Pink#FFC0CBrgb(255,192,203)
LightPink#FFB6C1rgb(255,182,193)
HotPink#FF69B4rgb(255,105,180)
DeepPink#FF1493rgb(255,20,147)
MediumVioletRed#C71585rgb(199,21,133)
PaleVioletRed#DB7093rgb(219,122,147)

Warna-warna jingga

LightSalmon#FFA07Argb(255,260,122)
Coral#FF7F50rgb(255,127,80)
Tomato#FF6347rgb(255,99,71)
OrangeRed#FF4500rgb(255,69,0)
DarkOrange#FF8C00rgb(255,140,0)
Orange#FFA500rgb(255,165,0)

Warna-warna kuning

Gold#FFD700rgb(255,215,0)
LightYellow#FFFFE0rgb(255,255,224)
LemonChiffon#FFFACDrgb(255,250,205)
LightGoldenrodYellow#FAFAD2rgb(250,250,210)
PapayaWhip#FFEFD5rgb(255,239,213)
Moccasin#FFE4B5rgb(255,228,181)
PeachPuff#FFDAB9rgb(255,218,185)
PaleGoldenrod#EEE8AArgb(238,232,170)
Khaki#F0E68Crgb(240,230,140)
DarkKhaki#BDB76Brgb(189,183,107)

Warna-warna ungu

Lavender#E6E6FArgb(230,230,250)
Thistle#D8BFD8rgb(216,191,216)
Plum#DDA0DDrgb(221,160,221)
Violet#EE82EErgb(238,130,238)
Orchid#DA70D6rgb(218,112,214)
MediumOrchid#BA55D3rgb(186,85,211)
MediumPurple#9370DBrgb(147,112,219)
BlueViolet#8A2BE2rgb(138,43,226)
DarkViolet#9400D3rgb(148,0,211)
DarkOrchid#9932CCrgb(153,50,204)
DarkMagenta#8B008Brgb(139,0,139)
Indigo#4B0082rgb(75,0,130)
SlateBlue#6A5ACDrgb(106,90,205)
DarkSlateBlue#483D8Brgb(72,61,139)

Warna-warna hijau

GreenYellow#ADFF2Frgb(173,255,47)
Chartreuse#7FFF00rgb(127,255,0)
LawnGreen#7CFC00rgb(124,252,0)
LimeGreen#32CD32rgb(50,205,50)
PaleGreen#98FB98rgb(152,251,152)
LightGreen#90EE90rgb(144,238,144)
MediumSpringGreen#00FA9Argb(0,250,154)
SpringGreen#00FF7Frgb(0,255,127)
MediumSeaGreen#3CB371rgb(60,179,113)
SeaGreen#2E8B57rgb(46,139,87)
ForestGreen#228B22rgb(34,139,34)
DarkGreen#006400rgb(0,100,0)
YellowGreen#9ACD32rgb(154,205,50)
OliveDrab#6B8E23rgb(107,142,35)
DarkOliveGreen#556B2Frgb(85,107,47)
MediumAquamarine#66CDAArgb(102,205,170)
DarkSeaGreen#8FBC8Frgb(143,188,143)
LightSeaGreen#20B2AArgb(32,178,170)
DarkCyan#008B8Brgb(0,139,139)

Warna-warna biru

LightCyan#E0FFFFrgb(224,255,255)
PaleTurquoise#AFEEEErgb(175,238,238)
Aquamarine#7FFFD4rgb(127,255,212)
Turquoise#40E0D0rgb(64,224,208)
MediumTurquoise#48D1CCrgb(72,209,204)
DarkTurquoise#00CED1rgb(0,206,209)
CadetBlue#5F9EA0rgb(95,158,160)
SteelBlue#4682B4rgb(70,130,180)
LightSteelBlue#B0C4DErgb(176,196,222)
PowderBlue#B0E0E6rgb(176,224,230)
LightBlue#ADD8E6rgb(173,216,230)
SkyBlue#87CEEBrgb(135,206,235)
LightSkyBlue#87CEFArgb(135,206,250)
DeepSkyBlue#00BFFFrgb(0,191,255)
DodgerBlue#1E90FFrgb(30,144,255)
CornflowerBlue#6495EDrgb(100,149,237)
MediumSlateBlue#7B68EErgb(123,104,238)
RoyalBlue#4169E1rgb(65,105,255)
MediumBlue#0000CDrgb(0,0,205)
DarkBlue#00008Brgb(0,0,139)
MidnightBlue#191970rgb(25,25,112)

Warna-warna coklat

Cornsilk#FFF8DCrgb(255,248,220)
BlanchedAlmond#FFEBCDrgb(255,235,205)
Bisque#FFE4C4rgb(255,228,196)
NavajoWhite#FFDEADrgb(255,222,173)
Wheat#F5DEB3rgb(245,222,179)
BurlyWood#DEB887rgb(222,184,135)
Tan#D2B48Crgb(210,180,140)
RosyBrown#BC8F8Frgb(188,143,143)
SandyBrown#F4A460rgb(244,164,96)
Goldenrod#DAA520rgb(218,165,32)
DarkGoldenrod#B8860Brgb(184,134,11)
Peru#CD853Frgb(205,133,63)
Chocolate#D2691Ergb(210,105,30)
SaddleBrown#8B4513rgb(139,69,19)
Sienna#A0522Drgb(160,82,45)
Brown#A52A2Argb(165,42,42)

Warna-warna putih

Snow#FFFAFArgb(255,250,250)
Honeydew#F0FFF0rgb(240,255,240)
MintCream#F5FFFArgb(245,255,250)
Azure#F0FFFFrgb(240,255,255)
AliceBlue#F0F8FFrgb(240,248,255)
GhostWhite#F8F8FFrgb(248,248,255)
WhiteSmoke#F5F5F5rgb(245,245,245)
Seashell#FFF5EErgb(255,245,238)
Beige#F5F5DCrgb(245,245,220)
OldLace#FDF5E6rgb(253,245,230)
FloralWhite#FFFAF0rgb(255,250,240)
Ivory#FFFFF0rgb(255,255,240)
AntiqueWhite#FAEBD7rgb(250,235,215)
Linen#FAF0E6rgb(250,240,230)
LavenderBlush#FFF0F5rgb(255,240,245)
MistyRose#FFE4E1rgb(255,228,225)

Warna-warna abu-abu

Gainsboro#DCDCDCrgb(220,220,220)
LightGrey#D3D3D3rgb(211,211,211)
DarkGray#A9A9A9rgb(169,169,169)
DimGray#696969rgb(105,105,105)
LightSlateGray#778899rgb(119,136,153)
SlateGray#708090rgb(112,128,144)
DarkSlateGray#2F4F4Frgb(47,79,79)

Kode Warna Generator

Apabila warna yang anda inginkan tidak ada pada tabel kode warna di atas, silakan gunakan alat ini untuk menemukannya.

Alat ini dapat digunakan untuk mencari kode warna dalam bentuk hex dan rgb. Dan cara menggunakannya sangat mudah.

Tinggal klik pada warna yang anda mau, maka otomatis kode hex akan keluar.

Untuk kode rgb silakan lihat pada kolom Red, Green, dan Blue. Kemudian gabungkan menjadi satu dan jangan lupa pisahkan masing-masing angka dengan tanda koma (,).

Misal :

  • Red = 177
  • Green = 79
  • Blue = 79

Maka akan ditulis seperti ini rgb(177,79,79).

kode warna rgb

Mengenal Kode Warna RGBA

Ada satu lagi yang sering digunakan, yaitu rgba.

Pada dasarnya rgba adalah bagian dari rgb.

Cuma ada sedikit penambahan angka yang bisa digunakan untuk membuat warna tersebut jadi transparan.

Kode rgba ini biasanya digunakan pada area yang area utamanya menggunakan gambar sebagai latar.

Untuk lebih jelasnya silakan perhatikan gambar berikut.

kode warna rgba

Area yang menggunakan kode rgba terlihat transparan, sedangkan yang menggunakan rgb tidak.

Perbedaan kode rgb dan rgba hanya pada angka ke empat, yaitu angka 0.7 (pada rgba(0,0,0,0.7)) dan 0.5 pada (rgba(0,0,0,0.5)).

Semakin kecil nilai yang kita tulis di sana, maka semakin transparan juga warna tersebut.

Jadi dasar kode rgba adalah rgb yang kemudian disisipkan nilai 0.9 sampai 0.1 (atau 1 jika tidak ingin membuatnya transparan).

Misalnya kita ingin membuat warna merah menjadi transparan.

Kode asal rgb(255,0,0).

Maka kita cukup menambahkan huruf a setelah b, menjadi rgba.

Kemudian tentukan nilai yang akan menjadikannya transparan setelah kode asal (harus dipisahkan dengan koma).

Maka menjadi rgba(255,0,0,0.8) atau rgba(255,0,0,0.3), dst.

Cara Menggunakan Kode warna Di Blog / Website

Ada 2 cara yang bisa kita pakai untuk menggunakan kode warna, yaitu :

  1. Menggunakan kode warna langsung pada kode HTML (Inline CSS)
  2. Menggunakan kode warna pada CSS Internal atau Eksternal.

Saya akan mencontohkan cara penggunaan kode warna tersebut.

1 : Langsung pada kode HTML / Inline CSS

Membuat tulisan berwarna, contoh :
Menggunakan Nama Warna

<b style="color:red">Merah</b>
<b style="color:green">Hijau</b>
<b style="color:blue">Biru</b>

Atau Menggunakan Hex

<b style="color:#FF0000">Merah</b>
<b style="color:green">Hijau</b>
<b style="color:#0000FF">Biru</b>

Atau Menggunakan RGB

<b style="color:rgb(255,0,0)">Merah</b>
<b style="color:rgb(0,128,0)">Hijau</b>
<b style="color:rgb(0,0,255)">Biru</b>

Hasil

Merah
Hijau
Biru

Membuat area div dengan warna latar DarkSlateGray, contoh :
Menggunakan Nama Warna

<div style="width:100%; height:auto; background:DarkSlateGray; color:#fff; margin: 0.5em 0; padding: 1em">
Area Div Dengan kode warna latar DarkSlateGray dan kode warna tulisan #fff
</div>

Atau Menggunakan Hex

<div style="width:100%; height:auto; background:#2F4F4F; color:#fff; margin: 0.5em 0; padding: 1em">
Area Div Dengan kode warna latar DarkSlateGray dan kode warna tulisan #fff
</div>

Atau Menggunakan RGB

<div style="width:100%; height:auto; background:rgb(47,79,79); color:#fff; margin: 0.5em 0; padding: 1em">
Area Div Dengan kode warna latar DarkSlateGray dan kode warna tulisan #fff
</div>

Hasil

Area Div Dengan kode warna latar DarkSlateGray dan kode warna tulisan #fff

2 : Menggunakan kode warna pada CSS

Ada 2 cara yang bisa kita pilih untuk menggunakan kode warna pada css, yaitu pada :

  • CSS eksternal.
  • CSS internal.

A. Menggunakannya pada css eksternal.

Kita menggunakan kode warna dengan menulisnya pada sebuah file css eksternal yang diberi nama dengan akhiran .css.

Pada umumnya file tersebut berisi seluruh kode css. Diantara isi file css itu terdapat kode css yang menentukan warna latar seluruh tampilan blog (body).

Misalnya seperti ini :
Menggunakan Nama Warna

body {
  font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
  background:DodgerBlue;
  margin: 0;
  padding: 0;
  color: white;
}

Atau Menggunakan Hex

body {
  font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
  background:#1E90FF;
  margin: 0;
  padding: 0;
  color: #fffffff;
}

Atau Menggunakan RGB

body {
  font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
  background:rgb(30,144,255);
  margin: 0;
  padding: 0;
  color: rgb(255,255,255);
}

Nah pada kode tersebut ada kode warna pada bagian :

  • background (latar) yaitu warna DodgerBlue atau #1E90FF atau rgb(30,144,255).
  • color (warna tulisan) dengan kode warna putih (white atau #fffff atau rgb(255,255,255)).

Warna tersebut dapat kita ganti dengan kode warna yang kita mau.

B. Menggunakannya pada css internal.

Dengan cara ini kita tidak perlu membuat sebuah file css eksternal.

Karena kode css tersebut langsung kita letakkan pada dokumen head / body dengan di awali dengan kode <style type=”text/css”> dan ditutup dengan kode </style>, contoh :

Menggunakan Hex

<style type="text/css">
body {
  font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
  background:#4A50F4;
  margin: 0;
  padding: 0;
  color: #ffffff;
}
</style>

Atau Menggunakan RGB

<style type="text/css">
body {
  font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
  background:rgb(74,80,244);
  margin: 0;
  padding: 0;
  color:rgb(255,255,255);
}
</style>

Cara Mengetahui Kode Warna Yang Digunakan Sebuah Blog

Setelah mengetahui kumpulan kode warna dan cara menggunakannya. Mungkin anda juga ingin tahu cara melihat kode warna pada sebuah blog / website.

Misalnya kita suka warna-warna yang digunakan pada blog tertentu dan ingin menggunakan yang sama.

Apa yang harus dilakukan agar mendapatkan kode warna tersebut?….

Untuk mengintip kode warna yang digunakan pada sebuah website adalah perkara yang sangat mudah.

Kita tidak perlu repot-repot melihat kode-kode yang ada pada website tersebut.

Mau tahu bagaimana caranya?…. 🙂

Oke lah kalau begitu, akan saya beri tahu trik sederhananya.

Pertama silakan kunjungi website yang ingin di contek kode warnanya menggunakan browser Mozilla Firefox.

Klik menu mozilla (letaknya di samping kanan atas), kemudian klik Pengembang, setelah itu klik Pipet Warna.

mencari kode warna

Sekarang silakan arahkan kursor ke warna yang anda mau, maka kodenya akan terlihat. Dan untuk menyalinnya silakan klik saja warna tersebut, kode pun akan tersalin secara otomatis.

pilih warna

Nah itulah kumpulan kode warna serta cara menggunakannya.

Semoga bermanfaat.


Langganan Artikel Terbaru

Dapatkan update terbaru blog ini lewat email anda

@