Published on

Expert's Corner

Mengenal 2 kode warna HTML & CSS dan panduan penggunaannya

Anisa Sekarningrum

1._Daftar_kode_warna_HTML___CSS_dan_panduan_penggunaannya.jpg

Berbeda dengan keseharian, di mana kita mengenal warna dengan menyebut namanya, pada pemrograman untuk menyebutkan warna kita harus menggunakan kode. Mari kita belajar dan mencari tahu lebih dalam mengenai kode-kode warna tersebut. 

Mengenal kode warna HTML & CSS

Mengenal kode warna HTML & CSS
Melihat kode-kode warna dalam pemrograman - EKRUT

Tidak seperti mata manusia, komputer hanya bisa membaca warna dalam format kode. Dalam pemrograman komputer, ada beberapa tipe kode warna yang umumnya digunakan, yaitu dalam bentuk hexadecimal, RGB, RGBA, HSL dan HSLA. Hexadesimal adalah kombinasi huruf dan angka yang diawali oleh tanda ‘#’. Contohnya seperti #4169E1 untuk warna Royal Blue. 

Sedangkan untuk kode warna HTML adalah hexadecimal triplets yang mewakili warna merah, hijau dan biru atau lebih umum disingkat RGB. Berbeda dengan hexadecimal atau disingkat Hex, RGB terdiri dari 3 bagian angka yang dipisahkan dengan tanda koma, contohnya kode rgb (65, 105, 225) untuk warna Royal Blue. Pilihan warna-warna ini biasanya ditampilkan pada color palette, yang biasanya tersedia di berbagai aplikasi seperti Microsoft Word, Paint, ataupun Canva.  

Htmlcolorcodes.com menjelaskan, kode warna Hex adalah yang paling populer, dengan tiga angka bit hexadecimal (artinya terdiri dari 6 digit), dengan masing-masing bit atau sepasang karakter di kode Hex, yang merepresentasikan intensitas dari merah, hijau dan biru di warna tersebut secara berurutan. Kode bit Hex bervariasi mulai dari 00, yang merupakan intensitas terendah dalam warna, hingga FF yang merepresentasikan intensitas tertinggi. Contohnya warna putih yang terbentuk dari campuran ketiga warna primer pada intensitas tertinggi, yang menghasilkan kode warna Hex #FFFFFF.   

Sebaliknya, tidak ada tampilan warna pada layar untuk warna hitam, sehingga kode warna Hexnya adalah yang terendah yaitu #000000. Ketiga kode warna primer yaitu merah, hijau, dan biru adalah campuran dari intensitas warna tertinggi dan terendah, yaitu #FF0000 untuk merah, #00FF00 untuk hijau, dan #0000FF untuk biru. Dengan browser modern yang mendukung spektrum penuh warna 24-bit, ada 16.777.216 kemungkinan warna berbeda. Semakin unik warna yang dihasilkan, semakin sulit juga kombinasi kode warnanya.

Jangan khawatir, kamu tidak perlu menghafalkan kode warna ini karena ada alat bantu bernama color picker yang bisa membantu kamu memilih warna untuk mengetahui kode warnanya. Kamu juga bisa menggunakan generator kode warna yang disediakan oleh w3schools.com, coolors.co, htmlcolorcodes.com.   

Baca juga: 10 Skill yang dibutuhkan oleh Full Stack Developer 

Daftar kode warna HTML & CSS

Daftar kode warna HTML & CSS
Menggunakan kode warna pada pemrograman  - EKRUT

Berikut adalah tabel kode warna HTML & CSS untuk mempermudah proses pemrograman kamu. 

No Nama Warna. HEX, RGB
1 Alice Blue
#F0F8FF
rgb(240, 248, 254)
2 Antique White
#FAEBD7
rgb(251, 235, 217)
3 Aqua
#00FFFF
rgb(0, 255, 254)
4 Aquamarine
#7FFFD4
rgb(115, 255, 216)
5 Azure
#F0FFFF
rgb(239, 255, 255)
6 Beige
#F5F5DC
rgb(245, 245, 223)
7 Bisque
#FFE4C4
rgb(255, 227, 200)
8 Black
#000000
rgb(0, 0, 0)
9 Blanched Almond
#FFEBCD
rgb(255, 234, 208)
10 Blue
#0000FF
rgb(0, 0, 255)
11 Blue Violet
#8A2BE2
rgb(138, 43, 226)
12 Brown
#A52A2A
rgb(165, 42, 42)
13 Burly Wood
#DEB887
rgb(222, 184, 135)
14 Cadet Blue
#5F9EA0
rgb(95, 158, 160)
15 Chartreuse
#7FFF00
rgb(127, 255, 1)
16 Chocolate
#D2691E
rgb(210, 105, 30)
17 Coral
#FF7F50
rgb(251, 127, 80)
18 Cornflower Blue
#6495ED
rgb(100, 149, 237)
19 Cornsilk
#FFF8DC
rgb(225, 248, 220)
20 Crimson
#DC143C
rgb(220, 20, 60)
21 Cyan
#00FFFF
rgb(62, 254, 255)
22 Dark Blue
#00008B
rgb(0, 0, 139)
23 Dark Cyan
#008B8B
rgb(29, 139, 139)
24 Dark Golden Rod
#B8860B
rgb(184, 134, 11)
25 Dark Gray
#A9A9A9
rgb(169, 169, 169)
26 Dark Green
#006400
rgb(19, 100, 0)
27 Dark Khaki
#BDB76B
rgb(189, 183, 107)
28 Dark Magenta
#8B008B
rgb(139, 0, 140)
29 Dark Olive Green
#556B2F
rgb(85, 107, 47)
30 Dark Orange
#FF8C00
rgb(251, 140, 1)
31 Dark Orchid
#9932CC
rgb(153, 50, 204)
32 Dark Red
#8B0000
rgb(139, 5, 0)
33 Dark Salmon
#E9967A
rgb(233, 150, 122)
34 Dark Sea Green
#8FBC8F
rgb(143, 188, 144)
35 Dark Slate Blue
#483D8B
rgb(72, 61, 139)
36

Dark Slate Gray
#2F4F4F
rgb(47, 79, 79)

37 Dark Turquoise
#00CED1
rgb(48, 206, 209)
38 Dark Violet
#9400D3
rgb(148, 0, 211)
39 Deep Pink
#FF1493
rgb(249, 19, 147)
40 Deep Sky Blue
#00BFFF
rgb(43, 191, 254)
41 Dim Gray
#696969
rgb(105, 105, 105)
42 Dodger Blue
#1E90FF
rgb(30, 144, 255)
43 Fire Brick
#B22222
rgb(178, 34, 33)
44 Floral White
#FFFAF0
rgb(255, 250, 240)
45 Forest Green
#228B22
rgb(34, 139, 35)
46 Fuchsia
#FF00FF
rgb(249, 0, 255)
47 Gainsboro
#DCDCDC
rgb(220, 220, 220)
48 Ghost White
#F8F8FF
rgb(248, 248, 255)
49 Gold
#FFD700
rgb(253, 215, 3)
50 Golden Rod
#DAA520
rgb(218, 165, 32)
51 Gray
#808080
rgb(128, 128, 128)
52 Green
#008000
rgb(27, 128, 1)
53 Green Yellow
#ADFF2F
rgb(173, 255, 48)
54 Honey Dew
#F0FFF0
rgb(240, 255, 240)
55 Hot Pink
#FF69B4
rgb(240, 255, 240)
56 Indian Red
#CD5C5C
rgb(205, 92, 92)
57 Indigo
#4B0082
rgb(75, 0, 130)
58 Ivory
#FFFFF0
rgb(255, 255, 239)
59 Khaki
#F0E68C
rgb(240, 230, 140)
60 Lavender
#E6E6FA
rgb(230, 230, 250)
61 Lavender Blush
#FFF0F5
rgb(254, 240, 245)
62 Lawn Green
#7CFC00
rgb(124, 252, 2)
63 Lemon Chiffon
#FFFACD
rgb(255, 250, 205)
64 Light Blue
#ADD8E6
rgb(173, 216, 230)
65 Light Coral
#F08080
rgb(240, 128, 128)
66 Light Cyan
#E0FFFF
rgb(224, 255, 255)
67 Light Golden Rod Yellow
#FAFAD2
rgb(250, 250, 210)
68 Light Gray
#D3D3D3
rgb(211, 211, 211)
69 Light Green
#90EE90
rgb(144, 238, 144)
70 Light Pink
#FFB6C1
rgb(252, 182, 193)
71 Light Salmon
#FFA07A
rgb(251, 160, 122)
72 Light Sea Green
#20B2AA
rgb(40, 178, 170)
73 Light Sky Blue
#87CEFA
rgb(135, 206, 250)
74 Light Slate Gray
#778899
rgb(119, 136, 153)
75 Light Steel Blue
#B0C4DE
rgb(176, 196, 222)
76 Light Yellow
#FFFFE0
rgb(255, 255, 224)
77 Lime
#00FF00
rgb(63, 255, 0)
78 Lime Green
#32CD32
rgb(50, 205, 50)
79 Linen
#FAF0E6
rgb(250, 240, 230)
80 Magenta
#FF00FF
rgb(249, 0, 255)
81 Maroon
#800000
rgb(128, 4, 0)
82 Medium Aqua Marine
#66CDAA
rgb(102, 205, 170)
83 Medium Blue
#0000CD
rgb(0, 0, 205)
84 Medium Orchid
#BA55D3
rgb(186, 85, 211)
85 Medium Purple
#9370DB
rgb(147, 112, 219)
86 Medium Sea Green
#3CB371
rgb(60, 179, 113)
87 Medium Slate Blue
#7B68EE
rgb(123, 103, 238)
88 Medium Spring Green
#00FA9A
rgb(62, 250, 153)
89 Medium Turquoise
#48D1CC
rgb(72, 209, 204)
90 Medium Violet Red
#C71585
rgb(199, 21, 133)
91 Midnight Blue
#191970
rgb(25, 25, 112)
92 Mint Cream
#F5FFFA
rgb(245, 255, 250)
93 Misty Rose
#FFE4E1
rgb(254, 228, 225)
94 Moccasin
#FFE4B5
rgb(254, 228, 181)
95 Navajo White
#FFDEAD
rgb(254, 222, 173)
 
96 Navy
#000080
rgb(0, 0, 128)
97 Old Lace
#FDF5E6
rgb(253, 245, 230)
98 Olive
#808000
rgb(128, 128, 1)
100 Olive Drab
#6B8E23
rgb(107, 142, 35)
101 Orange
#FFA500
rgb(252, 165, 3)
102 Orange Red
#FF4500
rgb(250, 69, 1)
103 Orchid
#DA70D6
rgb(218, 112, 214)
104 Pale Golden Rod
#EEE8AA
rgb(238, 232, 170)
105 Pale Green
#98FB98
rgb(152, 251, 153)
106 Pale Turquoise
#AFEEEE
rgb(175, 238, 239)
107 Pale Violet Red
#DB7093
rgb(219, 112, 147)
108 Papaya Whip
#FFEFD5
rgb(254, 239, 213)
109 Peach Puff
#FFDAB9
rgb(253, 218, 185)
110 Peru
#CD853F
rgb(205, 133, 63)
111 Pink
#FFC0CB
rgb(252, 192, 203)
112 Plum
#DDA0DD
rgb(221, 160, 221)
113 Powder Blue
#B0E0E6
rgb(176, 224, 230)
114 Purple
#800080
rgb(128, 0, 128)
115 Rebecca Purple
#663399
rgb(102, 51, 153)
116 Red
#FF0000
rgb(255, 0, 0)
117 Rosy Brown
#BC8F8F
rgb(188, 143, 142)
118 Royal Blue
#4169E1
rgb(65, 105, 225)
119 Saddle Brown
#8B4513
rgb(139, 69, 19)
120 Salmon
#FA8072
rgb(250, 128, 114)
121 Sandy Brown
#F4A460
rgb(244, 164, 95)
122 Sea Green
#2E8B57
rgb(46, 139, 87)
123 Sea Shell
#FFF5EE
rgb(255, 245, 238)
124 Sienna
#A0522D
rgb(160, 82, 45)
125 Silver
#C0C0C0
rgb(192, 192, 192)
126 Sky Blue
#87CEEB
rgb(135, 206, 235)
127 Slate Blue
#6A5ACD
rgb(106, 90, 205)
128 Slate Gray
#708090
rgb(112, 128, 145)
129 Snow
#FFFAFA
rgb(255, 250, 250)
130 Spring Green
#00FF7F
rgb(63, 255, 128)
131 Steel Blue
#4682B4
rgb(70, 130, 180)
132 Tan
#D2B48C
rgb(210, 180, 140)
133 Teal
#008080
rgb(26, 128, 127)
134 Thistle
#D8BFD8
rgb(216, 191, 216)
135 Tomato
#FF6347
rgb(250, 99, 71)
136 Turquoise
#40E0D0
rgb(64, 224, 208)
137 Violet
#EE82EE
rgb(238, 130, 238)
138 Wheat
#F5DEB3
rgb(245, 222, 179)
139 White
#FFFFFF
rgb(255, 255, 255)
140 White Smoke
#F5F5F5
rgb(245, 245, 245)
141 Yellow
#FFFF00
rgb(255, 255, 0)
142 Yellow Green
#9ACD32
rgb(154, 205, 49)

Baca juga: Perbedaan back-end, front-end, dan full-stack developer 

Panduan menggunakan kode warna HTML & CSS

Panduan menggunakan kode warna HTML & CSS
Menggunakan kode warna HTML dan CSS untuk latar belakang - EKRUT

Kode warna HTML & CSS ini dapat diterapkan ke dalam website. Biasanya kode warna ini digunakan hampir di seluruh bagian, seperti karakter, background, dan border. Berikut adalah cara menggunakan kode warna yang dibagikan oleh niagahoster.co.id. 

Penggunaan kode warna HTML & CSS di karakter

<!DOCTYPE html>
<html>
<body>
  <p><font size=”3″ color=”#ff0000″>Daftar Kode Warna Pada HTML & CSS</font></p>
  <p><font size=”2″ color=”#00ff00″>Daftar Kode Warna Pada HTML & CSS</font></p>
  <p><font face=”verdana” color=”#0000ff”>Daftar Kode Warna Pada HTML & CSS</font></p>
  <p><strong>Catatan:</strong> Elemen font hanya mendukung pada HTML 5. Gunakan CSS sebagai ganti</p>
</body>
</html>

Skrip di atas akan menghasilkan tampilan seperti di bawah ini:

Daftar Kode Warna Pada HTML & CSS
Daftar Kode Warna Pada HTML & CSS
Daftar Kode Warna Pada HTML & CSS

Catatan: Elemen font hanya mendukung pada HTML 5. Gunakan CSS sebagai ganti

Penggunaan kode warna HTML & CSS 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>

Kode di atas menghasilkan tampilan seperti ini:

HEX colors:

Red                                                                    
Green                                                                    
Blue                                                                    
Yellow                                                                    
Cerise                                                                 

Baca juga: 9 Tips mudah belajar coding untuk pemula yang wajib dicoba 

Untuk kamu para desainer atau programer yang sedang mencari kerja, yuk gabung menjadi talent di EKRUT! Semua proses dan bantuan professional di talent marketplace EKRUT gratis. Kamu – sebagai talent atau employer – bisa langsung direkrut dan merekrut kandidat yang sesuai. Jadi tunggu apa lagi? Yuk, daftar sekarang juga di sini.

Itu tadi adalah penjelasan dan tabel kode warna HTML dan CSS. Silakan gunakan tabel kode warna di atas atau gunakan generator warna untuk membantu kamu bekerja. 

Untuk kamu yang ingin memahami bagaimana membuat visualisasi data yang lebih menarik dan efektif seperti menggunakan warna yang menarik, yuk tonton video Ekrut berikut!

Sumber: 

  • niagahoster.co.id 
  • htmlcolorcodes.com

Tags

Share

Apakah Kamu Sedang Mencari Pekerjaan?

    Already have an account? Login

    Artikel Terkait

    H1_UIUX_Designer.jpg

    Careers

    UI/UX Designer: Pengertian, Tanggung Jawab, dan Skill yang Harus Dimilikinya

    Algonz D.B. Raharja

    04 August 2022
    7 min read
    H1_user_experience_adalah.jpg

    Technology

    User Experience: Pengertian, Tujuan, dan 7 Aspek yang Penting dalam Membangunnya

    Alvina Vivian

    01 July 2022
    6 min read
    Product_Management_Pilihan_karier__Skill-set__dan_Proyeksi_Karier_di_Tahun_2022.jpg

    Expert's Corner

    Product Management: Pilihan Karier, Skill-set, dan Proyeksi Karier di Tahun 2022

    Ningtyas Dewanasari Kinasih

    17 June 2022
    5 min read

    Video