Kode Warna HTML dan CSS


Kode Warna HTML dan CSS – Pada bahasa pemprogaman dilakukan dengan menggunakan kode, begitu juga dengan warna bagi sebagian orang munkin sudah tidak asing lagi dengan code warna yang biasa digunakan seperti #F0F8FF dan #000000.

Dibagi menjadi beberapa type pada setiap warna di bahasa progam komputer yaitu hexadecimal, RGB, RGBA, HSL, dan HSLA.

Hexadesimal merupakan kombinasi dari beberapa huruf dan angka dan dimulai dengan #, sedangkan RGB merukapan tiga bagian angka yang dipisahkan oleh tanda koma.

Daftar Kode Warna HTML Lengkap

Warna merukapan hal yang unik di dalam dunia visual, dengan warna bisa menggambarkan mood atau kepribadian seseorang dan juga pemilihan warna tergantung dari selera karena setiap orang pasti punya selera yang berbeda.

Dibawah ini adalah Daftar Kode Warna HTML dan CSS yang dapat membuat tampilan website Anda semakin menarik perhatian pengunjung.

Nama WarnaKode HeximalRGB
 
Alice Blue#F0F8FFRGB (240, 248, 254)
 
Antique White#FAEBD7RGB (251, 235, 217)
 
Aqua#00FFFFRGB (0, 255, 254)
 
Aquamarine#7FFFD4RGB (115, 255, 216)
 
Azure#F0FFFFRGB (239, 255, 255)
 
Beige#F5F5DCRGB (245, 245, 223)
 
Bisque#FFE4C4RGB (255, 227, 200)
 
Black#000000RGB (0, 0, 0)
 
Blanched Almond#FFEBCDRGB (255, 234, 208)
 
Blue#0000FFRGB (0, 0, 255)
 
Blue Violet#8A2BE2RGB (138, 43, 226)
 
Brown#A52A2ARGB(165, 42, 42)
 
Burly Wood#DEB887RGB (222, 184, 135)
 
Cadet Blue#5F9EA0RGB (95, 158, 160)
 
Chartreuse#7FFF00RGB (127, 255, 1)
 
Chocolate#D2691ERGB (210, 105, 30)
 
Coral#FF7F50RGB (251, 127, 80)
 
Cornflower Blue#6495EDRGB (100, 149, 237)
 
Cornsilk#FFF8DCRGB (225, 248, 220)
 
Crimson#DC143CRGB (220, 20, 60)
 
Cyan#00FFFFRGB (62, 254, 255)
 
Dark Blue#00008BRGB (0, 0, 139)
 
Dark Cyan#008B8BRGB (29, 139, 139)
 
Dark Golden Rod#B8860BRGB (184, 134, 11)
 
Dark Gray#A9A9A9RGB (169, 169, 169)
 
Dark Green#006400RGB (19, 100, 0)
 
Dark Khaki#BDB76BRGB (189, 183, 107)
 
Dark Magenta#8B008BRGB (139, 0, 140)
 
Dark Olive Green#556B2FRGB (85, 107, 47)
 
Dark Orange#FF8C00RGB (251, 140, 1)
 
Dark Orchid#9932CCRGB (153, 50, 204)
 
Dark Red#8B0000RGB (139, 5, 0)
 
Dark Salmon#E9967ARGB (233, 150, 122)
 
Dark Sea Green#8FBC8FRGB (143, 188, 144)
 
Dark Slate Blue#483D8BRGB (72, 61, 139)
 
Dark Slate Gray#2F4F4FRGB (47, 79, 79)
 
Dark Turquoise#00CED1RGB (48, 206, 209)
 
Dark Violet#9400D3RGB (148, 0, 211)
 
Deep Pink#FF1493RGB (249, 19, 147)
 
Deep Sky Blue#00BFFFRGB (43, 191, 254)
 
Dim Gray#696969RGB (105, 105, 105)
 
Dodger Blue#1E90FFRGB (30, 144, 255)
 
Fire Brick#B22222RGB (178, 34, 33)
 
Floral White#FFFAF0RGB (255, 250, 240)
 
Forest Green#228B22RGB (34, 139, 35)
 
Fuchsia#FF00FFRGB (249, 0, 255)
 
Gainsboro#DCDCDCRGB (220, 220, 220)
 
Ghost White#F8F8FFRGB (248, 248, 255)
 
Gold#FFD700RGB (253, 215, 3)
 
Golden Rod#DAA520RGB (218, 165, 32)
 
Gray#808080RGB (128, 128, 128)
 
Green#008000RGB (27, 128, 1)
 
Green Yellow#ADFF2FRGB (173, 255, 48)
 
Honey Dew#F0FFF0RGB (240, 255, 240)
 
Hot Pink#FF69B4RGB (240, 255, 240)
 
Indian Red#CD5C5CRGB (205, 92, 92)
 
Indigo#4B0082RGB (75, 0, 130)
 
Ivory#FFFFF0RGB (255, 255, 239)
 
Khaki#F0E68CRGB (240, 230, 140)
 
Lavender#E6E6FARGB (230, 230, 250)
 
Lavender Blush#FFF0F5RGB (254, 240, 245)
 
Lawn Green#7CFC00RGB (124, 252, 2)
 
Lemon Chiffon#FFFACDRGB (255, 250, 205)
 
Light Blue#ADD8E6RGB (173, 216, 230)
 
Light Coral#F08080RGB (240, 128, 128)
 
Light Cyan#E0FFFFRGB (224, 255, 255)
 
Light Goldenrod Yellow#FAFAD2RGB (250, 250, 210)
 
Light Gray#D3D3D3RGB (211, 211, 211)
 
Light Green#90EE90RGB (144, 238, 144)
 
Light Pink#FFB6C1RGB (252, 182, 193)
 
Light Salmon#FFA07ARGB (251, 160, 122)
 
Light Sea Green#20B2AARGB (40, 178, 170)
 
Light Sky Blue#87CEFARGB (135, 206, 250)
 
Light Slate Gray#778899RGB (119, 136, 153)
 
Light Steel Blue#B0C4DERGB (176, 196, 222)
 
Light Yellow#FFFFE0RGB (255, 255, 224)
 
Lime#00FF00RGB (63, 255, 0)
 
Lime Green#32CD32RGB (50, 205, 50)
 
Linen#FAF0E6RGB (250, 240, 230)
 
Magenta#FF00FFRGB (249, 0, 255)
 
Maroon#800000RGB (128, 4, 0)
 
Medium Aqua Marine#66CDAARGB (102, 205, 170)
 
Medium Blue#0000CDRGB (0, 0, 205)
 
Medium Orchid#BA55D3RGB (186, 85, 211)
 
Medium Purple#9370DBRGB (147, 112, 219)
 
Medium Sea Green#3CB371RGB (60, 179, 113)
 
Medium Slate Blue#7B68EERGB (123, 103, 238)
 
Medium Spring Green#00FA9ARGB (62, 250, 153)
 
Medium Turquoise#48D1CCRGB (72, 209, 204)
 
Medium Violet Red#C71585RGB (199, 21, 133)
 
Midnight Blue#191970RGB (25, 25, 112)
 
Mint Cream#F5FFFARGB (245, 255, 250)
 
Misty Rose#FFE4E1RGB (254, 228, 225)
 
Moccasin#FFE4B5RGB (254, 228, 181)
 
Navajo White#FFDEADRGB (254, 222, 173)
 
Navy#000080RGB (0, 0, 128)
 
Old Lace#FDF5E6RGB (253, 245, 230)
 
Olive#808000RGB (128, 128, 1)
 
Olive Drab#6B8E23RGB (107, 142, 35)
 
Orange#FFA500RGB (252, 165, 3)
 
Orange Red#FF4500RGB (250, 69, 1)
 
Orchid#DA70D6RGB (218, 112, 214)
 
Pale Golden Rod#EEE8AARGB (238, 232, 170)
 
Pale Green#98FB98RGB (152, 251, 153)
 
Pale Turquoise#AFEEEERGB (175, 238, 239)
 
Pale Violet Red#DB7093RGB (219, 112, 147)
 
Papaya Whip#FFEFD5RGB (254, 239, 213)
 
Peach Puff#FFDAB9RGB (253, 218, 185)
 
Peru#CD853FRGB (205, 133, 63)
 
Pink#FFC0CBRGB (252, 192, 203)
 
Plum#DDA0DDRGB (221, 160, 221)
 
Powder Blue#B0E0E6RGB (176, 224, 230)
 
Purple#800080RGB (128, 0, 128)
 
Rebecca Purple#663399RGB (102, 51, 153)
 
Red#FF0000RGB (255, 0, 0)
 
Rosy Brown#BC8F8FRGB (188, 143, 142)
 
Royal Blue#4169E1RGB (65, 105, 225)
 
Saddle Brown#8B4513RGB (139, 69, 19)
 
Salmon#FA8072RGB (250, 128, 114)
 
Sandy Brown#F4A460RGB (244, 164, 95)
 
Sea Green#2E8B57RGB (46, 139, 87)
 
Sea Shell#FFF5EERGB (255, 245, 238)
 
Sienna#A0522DRGB (160, 82, 45)
 
Silver#C0C0C0RGB (192, 192, 192)
 
Sky Blue#87CEEBRGB (135, 206, 235)
 
Slate Blue#6A5ACDRGB (106, 90, 205)
 
Slate Gray#708090RGB (112, 128, 145)
 
Snow#FFFAFARGB (255, 250, 250)
 
Spring Green#00FF7FRGB (63, 255, 128)
 
Steel Blue#4682B4RGB (70, 130, 180)
 
Tan#D2B48CRGB (210, 180, 140)
 
Teal#008080RGB (26, 128, 127)
 
Thistle#D8BFD8RGB (216, 191, 216)
 
Tomato#FF6347RGB (250, 99, 71)
 
Turquoise#40E0D0RGB (64, 224, 208)
 
Violet#EE82EERGB (238, 130, 238)
 
Wheat#F5DEB3RGB (245, 222, 179)
 
White#FFFFFFRGB (255, 255, 255)
 
White Smoke#F5F5F5RGB (245, 245, 245)
 
Yellow#FFFF00RGB (255, 255, 0)
 
Yellow Green#9ACD32RGB (154, 205, 49)
Baca Juga :   32+ Website Penyedia Gambar Gratis

Dan ini adalah warna dari hexadecimal, Anda dapat melihat perbedannya.

Color HTML / CSS
Color Name
Hex Code
#RRGGBB
Decimal Code
(R,G,B)
lightsalmon#FFA07Argb(255,160,122)
salmon#FA8072rgb(250,128,114)
darksalmon#E9967Argb(233,150,122)
lightcoral#F08080rgb(240,128,128)
indianred#CD5C5Crgb(205,92,92)
crimson#DC143Crgb(220,20,60)
firebrick#B22222rgb(178,34,34)
red#FF0000rgb(255,0,0)
darkred#8B0000rgb(139,0,0)

Cara Menggunakan Kode Warna

Memilih dan menggunakan warna kesukaan Anda tentunya akan membuat website atau blog semakin menarik dan tentunya nyaman untuk di pandang.

1. Cara Menggunakan Kode Warna HTML di Font

Anda dapat merubah warna pada setiap font di seluruh halaman website dengan cara mendefinisikannya di tag <body>. Namun jika hanya merubah warna hanya beberapa kata atau kalimat bisa menggunakan kode seperti ini yang menggunakan hexadecimal dan RGB

<font color = “#ff0000”> hexadecimal </font>
<font color = “green”> RGB </font>

Maka tampilannya akan seperti ini :

Tulisan
RGB

2. Cara Menggunakan Kode Warna HTML di 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>HEX colors:</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>

Maka tampilannya akan seperti ini :

Red

Green

Blue

Yellow

Ungu

Generator Warna

Selain menggunakan kode warna HTML diatas Anda juga bisa tentunya menggunakan generator warna yang disediakan oleh website ini :

Penutup

Pantinya pemilihan warna agar semakin menariknya website Anda tentunya untuk menarik mata pengunjung dan memanjakannya. Sebelumnya tentu Anda sudah tau bagaimana cara membuat website kan?

Pemilihan warna yang sesuai dengan kepribadian pemiliknya yang bisa menggambarkan berbagai macam hal. Daftar kode warna pada HTML dan CSS semoga bisa membantu mencari referensi warna yang Anda inginkan.

Baca Juga :   7+ Tips Cara Diterima Google Adsense [Pengalaman Pertama]

Mulai Diskusi

Tanyakan secara jelas ya jangan pakai emoticon, nanti masuk spam.