HomeMediaTechnology142 Daftar Kode Warna HTML & CSS dan Panduan Penggunaannya

Technology

142 Daftar Kode Warna HTML & CSS dan Panduan Penggunaannya

Published on: 02 September 2022

•

Min read: 7 min read

Experienced as Scriptwriter, Camera Operator, Production Assistant, Script and Visual Continuity, and Clapper. Interested in film and creative industry.

Warna merupakan hal penting dan unik dalam dunia desain visual. Warna tidak memiliki bentuk, ukuran maupun simbol untuk menyampaikan pesan secara langsung, sehingga kamu perlu untuk mengetahui warna apa saja yang cocok digunakan di dalam website.

Menentukan warna pada website sangat penting karena menentukan citra yang akan diterima oleh pengunjung website. Bukan tidak mungkin sebuah situs website akan mudah diingat karena kombinasi, ciri khas warna, dan desain yang apik atau bahkan kehilangan audiens karena pilihan tampilan dan kombinasi warna yang kurang tepat.

Berbeda dengan keseharian di mana kita mengenal warna dengan menyebut namanya, pada pemrograman untuk menyebutkan warna kita harus menggunakan kode. Nah, artikel ini akan mengulas 142 daftar kode warna HTML & CSS dan panduan penggunaannya. Untuk itu, simak ulasan lengkapnya berikut ini!

Mengenal kode warna HTML & CSS

Dalam pemrograman komputer, ada beberapa tipe kode warna yang umumnya digunakan (sumber: pexels)

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 Hex-nya 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. Makin unik warna yang dihasilkan, makin 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.

Daftar kode warna HTML & CSS

Kode warna pada pemrograman (sumber: pexels)

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)

Panduan menggunakan kode warna HTML & CSS

Kode warna biasa digunakan hampir di seluruh bagian seperti karakter, background, dan border dari sebuah website (sumber: pexels)

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.

1. Penggunaan kode warna HTML & CSS di karakter

<!DOCTYPE html>
<html>
<body>
Daftar Kode Warna Pada HTML & CSS
Daftar Kode Warna Pada HTML & CSS
Daftar Kode Warna Pada HTML & CSS
</body>
</html>

Skrip di atas akan menghasilkan tampilan seperti di bawah ini:

Daftar Kode Warna Pada HTML & CSS

2. 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>
hex colors:
Red
Green
Blue
Yellow
Cerise
</body>
</html>

Kode di atas menghasilkan tampilan seperti ini:

Hex colors:

Red
Green
Blue
Yellow
Cerise

**8 Website dengan kombinasi kode warna terbaik**

Ada beberapa website dengan kombinasi kode warna yang bisa kamu eksplor (sumber: pexels)

1. Adobe Color

Adobe Color merupakan situs yang dikembangkan oleh Adobe System, Inc. yang berguna untuk membantu pengguna dalam melakukan eksplorasi warna untuk kepentingan desain grafis, maupun slide presentasi. Dengan adanya Adobe Color ini, pengguna dapat melakukan percobaan warna seperti melakukan perpaduan warna, gradasi warna, maupun percobaan warna lainnya.

Selain melakukan percobaan warna menggunakan pallet wheel yang tersedia di web, pengguna juga dapat membuat color palette sendiri dengan menggunakan foto atau gambar yang dimiliki pengguna. Adobe Color juga menyediakan perpaduan color palette hasil dari gambar dan foto yang dapat diunduh secara gratis.

2. Canva

Fitur color wheel digunakan untuk memilih kombinasi warna yang cocok untuk digunakan secara bersamaan di dalam kanvas Canva. Dengan fitur ini, kamu akan menemukan beberapa fitur pelengkap, yaitu pick a color, choose a color combination, dan use this color combination.

Fitur pick a color, digunakan untuk menunjukan warna yang telah dipilih dalam lingkaran warna. Fitur choose a color combination, digunakan untuk mengatur kombinasi warna apa yang diinginkan. Terdapat 5 pengaturan kombinasi warna yang tersedia, antara lain complementary, monochromatic, analogous, triadic, dan tetradic. Warna yang tertera di bawah kolom adalah hasil kombinasi warna yang dapat digunakan secara bersamaan.

Sedangkan fitur use this color combination, terdapat dua pilihan, yaitu create a graphic dan export palette. Create a graphic untuk menerapkan kombinasi warna ke dalam desain yang akan dibuat. Export palette untuk menyimpan kombinasi warna yang telah kamu dapatkan ke dalam format PDF atau CSS.

3. Htmlcolorcodes

Htmlcolorcodes memberikan informasi yang sangat lengkap mulai dari HTML color codes, Hex color codes, RGB and HSL values, dan lain-lain. Htmlcolorcodes juga memiliki fitur color picker, color chart, color names, color library, dan HTML & CSS tutorials bagi kamu yang sedang belajar kode warna.

4. ColorExplorer

Dalam ColorExplorer kamu tak hanya bisa melakukan eksperimen dengan warna saja, tetapi juga pada gambar, halaman website, layout, dan lain-lain. Situs ColorExplorer juga memberikan informasi yang cukup lengkap terhadap kombinasi warna yang kamu inginkan. Tak hanya itu, kamu bahkan bisa import suatu foto/gambar dan mengetahui skema warna dari foto tersebut.

5. SpyColor

SpyColor adalah website kombinasi warna yang memungkinanmu mencari informasi nama warna, Hex code, angka RGB, angka CMYK, dan informasi-informasi lainnya. Situs ini cocok untuk desainer yang sedang mencari mengenai informasi warna secara lengkap.

6. Galactic.ink

Galactic.ink adalah website kombinasi warna yang sederhana dan sangat mudah digunakan. Kamu tinggal menggeser slide yang disediakan atau memindah-mindahkan panah untuk mendapatkan kombinasi warna. Galactic.ink membantumu dalam membuat kombinasi warna dari warna yang kamu inginkan. Bahkan, kamu bisa memilih kombinasi warna sejenis yang dapat kamu pilih di situsnya.

7. Coolors

Coolors cukup berbeda dengan situs kombinasi warna sebelum-sebelumnya. Sebab, kamu harus memilih terlebih dahulu warna yang ditampilkan acak berdasarkan koleksi Coolors. Namun, kamu tak perlu khawatir. Setelah memilih warna tersebut, kamu dapat mengubah warna dan bereksperimen sesuka hati. Sehingga, kamu tetap memiliki kebebasan mengubah warna dalam palette yang tersedia. Situs ini cocok untuk kamu yang ingin memiliki color palette untuk desainmu secara cepat.

8. Paletton

Situs kombinasi warna selanjutnya adalah Paletton. Situs ini menyediakan pilihan kombinasi warna yang cukup lengkap dan banyak. Selain itu, ada panduan lengkap cara menggunakan Paletton tepat di bawah color wheel. Jadi, jika kebingungan, kamu bisa langsung membaca panduan tersebut sehingga kamu bisa memilih warna secara acak sesuai dengan preferensi yang kamu inginkan.

Itulah daftar rekomendasi daftar kode warna HTML & CSS dan panduan penggunaannya. Semoga informasi di atas dapat bermanfaat untukmu, ya! Selain melalui artikel dari EKRUT Media, kamu juga bisa memperoleh berbagai informasi dan tips menarik seputar karier melalui YouTube EKRUT Official. Tak hanya itu, jika kamu tertarik mendapatkan berbagai kesempatan untuk mengembangkan karier, sign up EKRUT sekarang juga. Hanya di EKRUT, kamu dapat memperoleh berbagai peluang kerja yang dapat disesuaikan dengan minatmu.