Cara menggunakan kode warna html

Color atau warna pada HTML dapat didefinisikan dengan nama warna yang telah ditentukan sebelumnya, atau dengan nilai RGB, HEX, HSL, RGBA, atau HSLA

Table of Contents Show

Warna latar belakang
Warna Perbatasan
Nilai Warna
Tahu kode warna HTML & CSS
Daftarkan kode warna HTML & CSS
Panduan untuk menggunakan kode warna HTML & CSS
1. Penggunaan kode warna HTML & CSS dalam karakter
2. Penggunaan kode warna HTML & CSS di latar belakang
8 Website dengan kombinasi kode warna terbaik
1. Warna Adobe
3. htmlcolorcodes
4. ColorExplorer
5. SpyColor
6. galaksi. tinta
7. Pendingin
#000000 warna apa?
#FF0000 warna apa?
Apa itu kode warna HTML?
RGB 255 250 205 warna apa ini?

Bagian Artikel

Nama Warna

Dalam HTML, warna dapat ditentukan menggunakan nama warna

Contoh

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>

</body>
</html>

Warna latar belakang

Dalam HTML kita bisa mengatur warna backgorund (warna latar belakang) untuk elemen HTML

Contoh

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>

</body>
</html>

Warna teks

Pada HTML kita dapat mengatur warna teks sesuai dengan keinginan kita

Contoh

<!DOCTYPE html>
<html>
<body>

<h3 style="color:Tomato;">Hello World</h3>

<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>
</html>

Warna Perbatasan

Kami juga dapat menentukan warna perbatasan dalam HTML

Contoh

<!DOCTYPE html>
<html>
<body>

<h1 style="border: 2px solid Tomato;">Hello World</h1>

<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>

<h1 style="border: 2px solid Violet;">Hello World</h1>

</body>
</html>

Nilai Warna

Dalam HTML, warna juga dapat ditentukan menggunakan nilai RGB, nilai HEX, nilai HSL, nilai RGBA, dan nilai HSLA

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

Menentukan warna pada website sangatlah penting karena menentukan citra yang akan diterima oleh pengunjung website. Bukan tidak mungkin sebuah website akan mudah diingat karena kombinasi, warna yang khas, dan desain yang bagus atau bahkan kehilangan penikmatnya karena pemilihan tampilan dan kombinasi warna yang kurang tepat.

Berbeda dengan kehidupan sehari-hari dimana kita mengenal suatu warna dengan menyebutkan namanya, dalam pemrograman untuk mengatakan suatu warna kita harus menggunakan kode. Nah, artikel ini akan mengulas 142 daftar kode warna HTML & CSS beserta panduan penggunaannya. Untuk itu, baca ulasan lengkapnya di bawah ini

Baca juga. HTML. Pengertian, Sejarah, Fungsi, Komponen, Kelebihan dan Kekurangan

Tahu kode warna HTML & CSS

Dalam pemrograman komputer, ada beberapa jenis kode warna yang umum digunakan (sumber. piksel)

Berbeda dengan mata manusia, komputer hanya bisa membaca warna dalam format kode. Dalam pemrograman komputer terdapat beberapa jenis kode warna yang umum digunakan yaitu berupa hexadecimal, RGB, RGBA, HSL, dan HSLA. Heksadesimal adalah kombinasi huruf dan angka yang diawali dengan tanda '#'. Contohnya seperti #4169E1 untuk warna royal blue.

Adapun kode warna HTML adalah triplet heksadesimal yang mewakili warna merah, hijau, dan biru atau lebih sering disingkat RGB. Berbeda dengan hexadecimal atau disingkat Hex, RGB terdiri dari 3 angka yang dipisahkan dengan koma, contohnya kode RGB (65, 105, 225) untuk warna royal blue. Pilihan warna tersebut biasanya ditampilkan pada color palette yang biasanya tersedia di berbagai aplikasi seperti Microsoft Word, Paint, atau Canva

htmlcolorcodes. com menjelaskan, kode warna Hex paling populer dengan tiga angka bit heksadesimal (yang berarti terdiri dari 6 digit), dengan setiap bit atau pasangan karakter dalam kode Hex mewakili intensitas warna merah, hijau, dan biru pada warna tersebut. berurutan

Kode bit hex bervariasi dari 00, yang merupakan intensitas warna terendah, hingga FF yang mewakili intensitas tertinggi. Misalnya warna putih yang terbentuk dari campuran tiga warna primer dengan intensitas paling tinggi, yang menghasilkan kode warna Hex #FFFFFF

Sebaliknya, tidak ada tampilan warna pada layar untuk warna hitam, sehingga kode warna Hex adalah yang paling rendah yaitu #000000. Tiga kode warna primer yaitu merah, hijau, dan biru merupakan 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 yang berbeda. Semakin unik warna yang dihasilkan, semakin sulit kombinasi kode warnanya. Jangan khawatir, Anda tidak perlu menghafal kode warna ini karena ada alat bernama color picker yang bisa membantu Anda memilih warna untuk mengetahui kode warna.

Baca juga. CSS adalah. Arti, cara kerja, fungsi, dan 3 jenis

Daftarkan kode warna HTML & CSS

Kode warna pada pemrograman (sumber. piksel)

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

Tidak. Nama Warna Hex & RGB1. Alice Biru
#F0F8FF
RGB (240, 248, 254)2. Putih Antik
#FAEBD7
RGB (251, 235, 217)3. Aqua
#00FFFF
RGB (0, 255, 254)4. Aquamarine
#7FFFD4
RGB (115, 255, 216)5. Biru langit
#F0FFFF
RGB (239, 255, 255)6. Krem
#F5F5DC
RGB (245, 245, 223)7. Bisque
#FFE4C4
RGB (255, 227, 200)8. Hitam
#000000
RGB (0, 0, 0)9. Almond Rebus
#FFEBCD
RGB (255, 234, 208)10. Biru
#0000FF
RGB (0, 0, 255)11. Ungu Biru
#8A2BE2
RGB (138, 43, 226)12. Cokelat
#A52A2A
RGB (165, 42, 42)13. Kayu Burley
#DEB887
RGB (222, 184, 135)14. Kadet Biru
#5F9EA0
RGB (95, 158, 160)15. Minuman keras manis
#7FFF00
RGB (127, 255, 1)16. Cokelat
#D2691E
RGB (210, 105, 30)17. Karang
#FF7F50
RGB (251, 127, 80)18. Bunga jagung Biru
#6495ED
RGB (100, 149, 237)19. Rambut jagung
#FFF8DC
RGB (225, 248, 220)20. Merah tua
# DC143C
RGB (220, 20, 60)21. Cyan
#00FFFF
RGB (62, 254, 255)22. Biru tua
#00008B
RGB (0, 0, 139)23. Cyan Gelap
#008B8B
RGB (29, 139, 139)24. Batang Emas Gelap
#B8860B
RGB (184, 134, 11)25. Abu-abu gelap
#A9A9A9
RGB (169, 169, 169)26. Hijau tua
#006400
RGB (19, 100, 0)27. Khaki Gelap
#BDB76B
RGB (189, 183, 107)28. Magenta Gelap
#8B008B
RGB (139, 0, 140)29. Hijau Zaitun Gelap
#556B2F
RGB (85, 107, 47)30. Oren tua
#FF8C00
RGB (251, 140, 1)31. Anggrek Gelap
#9932CC
RGB (153, 50, 204)32. Merah gelap
#8B0000
RGB (139, 5, 0)33. Salmon Gelap
#E9967A
RGB (233, 150, 122)34. Hijau Laut Gelap
#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. Abu-abu
#808080
RGB (128, 128, 128)52. Hijau
#008000
RGB (27, 128, 1)53. Hijau kuning
#ADFF2F
RGB (173, 255, 48)54. Embun Madu
#F0FFF0
RGB (240, 255, 240)55. Merah Muda Terang
#FF69B4
RGB (240, 255, 240)56. Merah India
#CD5C5C
RGB (205, 92, 92)57. Nila
#4B0082
RGB (75, 0, 130)58. Gading
#FFFF0
RGB (255, 255, 239)59. Dril
#F0E68C
RGB (240, 230, 140)60. Lavendel
#E6E6FA
RGB (230, 230, 250)61. Blush Lavender
#FFF0F5
RGB (254, 240, 245)62. Rumput Hijau
#7CFC00
RGB (124, 252, 2)63. sifon lemon
#FFFACD
RGB (255, 250, 205)64. Biru muda
#ADD8E6
RGB (173, 216, 230)65. Karang Ringan
#F08080
RGB (240, 128, 128)66. Sian Muda
#E0FFFF
RGB (224, 255, 255)67. Kuning Batang Emas Muda
#FAFAD2
RGB (250, 250, 210)68. Abu-abu muda
#D3D3D3
RGB (211, 211, 211)69. Hijau muda
#90EE90
RGB (144, 238, 144)70. Merah Muda Muda
#FFB6C1
RGB (252, 182, 193)71. Salmon Ringan
#FFA07A
RGB (251, 160, 122)72. Hijau Laut Muda
#20B2AA
RGB (40, 178, 170)73. Biru Langit Muda
#87 CEFA
RGB (135, 206, 250)74. Abu-abu Batu Tulis Ringan
#778899
RGB (119, 136, 153)75. Biru Baja Ringan
#B0C4DE
RGB (176, 196, 222)76. Kuning muda
#FFFFE0
RGB (255, 255, 224)77. jeruk nipis
#00FF00
RGB (63, 255, 0)78. Hijau limau
#32CD32
RGB (50, 205, 50)79. Linen
#FAF0E6
RGB (250, 240, 230)80. Magenta
#FF00FF
RGB (249, 0, 255)81. Merah tua
#800000
RGB (128, 4, 0)82. Aqua Marine Sedang
#66CDAA
RGB (102, 205, 170)83. Biru Sedang
#0000CD
RGB (0, 0, 205)84. Anggrek Sedang
#BA55D3
RGB (186, 85, 211)85. Ungu Sedang
#9370DB
RGB (147, 112, 219)86. Hijau Laut Sedang
#3CB371
RGB (60, 179, 113)87. Biru Sabak Sedang
#7B68EE
RGB (123, 103, 238)88. Hijau Musim Semi Sedang
#00FA9A
RGB (62, 250, 153)89. Pirus Sedang
#48D1CC
RGB (72, 209, 204)90. Merah Ungu Sedang
#C71585
RGB (199, 21, 133)91. Biru Tengah Malam
#191970
RGB (25, 25, 112)92. Krim Mint
#F5FFFA
RGB (245, 255, 250)93. Mawar Berkabut
#FFE4E1
RGB (254, 228, 225)94. Mokasin
#FFE4B5
RGB (254, 228, 181)95. Navajo Putih
#FFDEAD
RGB (254, 222, 173)96. Angkatan laut
#000080
RGB (0, 0, 128)97. Renda Tua
#FDF5E6
RGB (253, 245, 230)98. Zaitun
#808000
RGB (128, 128, 1)100. Zaitun menjemukan
#6B8E23
RGB (107, 142, 35)101. Oranye
#FFA500
RGB (252, 165, 3)102. Oranye Merah
#FF4500
RGB (250, 69, 1)103. Anggrek
# DA70D6
RGB (218, 112, 214)104. Batang Emas Pucat
#EEE8AA
RGB (238, 232, 170)105. Hijau pucat
#98FB98
RGB (152, 251, 153)106. Turquoise pucat
#AFEEEE
RGB (175, 238, 239)107. Merah Violet Pucat
# DB7093
RGB (219, 112, 147)108. Cambuk Pepaya
#FFEFD5
RGB (254, 239, 213)109. Puff Persik
#FFDAB9
RGB (253, 218, 185)110. Peru
# CD853F
RGB (205, 133, 63)111. Merah Jambu
#FFC0CB
RGB (252, 192, 203)112. Plum
#DDA0DD
RGB (221, 160, 221)113. Bubuk biru
#B0E0E6
RGB (176, 224, 230)114. Ungu
#800080
RGB (128, 0, 128)115. Rebecca Ungu
#663399
RGB (102, 51, 153)116. Merah
#FF0000
RGB (255, 0, 0)117. Coklat Kemerahan
#BC8F8F
RGB (188, 143, 142)118. Biru Kerajaan
#4169E1
RGB (65, 105, 225)119. Pelana Brown
#8B4513
RGB (139, 69, 19)120. Ikan salmon
#FA8072
RGB (250, 128, 114)121. Coklat Berpasir
#F4A460
RGB (244, 164, 95)122. Laut hijau
#2E8B57
RGB (46, 139, 87)123. Kerang laut
#FFF5EE
RGB (255, 245, 238)124. Sienna
#A0522D
RGB (160, 82, 45)125. Perak
#C0C0C0
RGB (192, 192, 192)126. Langit biru
#87 CEEB
RGB (135, 206, 235)127. Biru Batu tulis
#6A5ACD
RGB (106, 90, 205)128. Batu tulis Abu-abu
#708090
RGB (112, 128, 145)129. Salju
#FFFAFA
RGB (255, 250, 250)130. Hijau Musim Semi
#00FF7F
RGB (63, 255, 128)131. Baja Biru
#4682B4
RGB (70, 130, 180)132. Tan
#D2B48C
RGB (210, 180, 140)133. hijau muda
#008080
RGB (26, 128, 127)134. Thistle
#D8BFD8
RGB (216, 191, 216)135. Tomat
#FF6347
RGB (250, 99, 71)136. Pirus
#40E0D0
RGB (64, 224, 208)137. Ungu
#EE82EE
RGB (238, 130, 238)138. Gandum
#F5DEB3
RGB (245, 222, 179)139. Putih
#FFFFFF
RGB (255, 255, 255)140. Asap putih
#F5F5F5
RGB (245, 245, 245)141. Kuning
#FFFF00
RGB (255, 255, 0)142. Kuning hijau
#9ACD32
RGB (154, 205, 49)

Baca juga. Perbedaan antara pengembang back-end, front-end, dan full-stack

Panduan untuk menggunakan kode warna HTML & CSS

Kode warna umum digunakan di hampir semua bagian seperti karakter, latar belakang, dan batas situs web (sumber. piksel)

Kode warna HTML & CSS ini dapat diterapkan ke situs web. Biasanya kode warna ini digunakan hampir di semua bagian, seperti karakter, background, dan border. Berikut adalah cara menggunakan kode warna yang dibagikan oleh

1. Penggunaan kode warna HTML & CSS dalam karakter

<. DOCTYPE html>

Daftar Kode Warna di HTML & CSS

Script diatas akan menghasilkan tampilan seperti dibawah ini

Daftar Kode Warna dalam HTML & CSS

2. Penggunaan kode warna HTML & CSS di latar belakang

<. DOCTYPE html>

#p1 {warna latar belakang. #ff0000;}
#p2 {warna latar belakang. #00ff00;}
#p3 {warna latar belakang. #0000ff;}
#p4 {warna latar belakang. #ffff00;}
#p5 {warna latar belakang. #ff00ff;}

warna hex.

Merah

Hijau

Biru

Kuning

Cerise

Kode di atas menghasilkan tampilan seperti ini

Warna hex

Merah
Hijau
Biru
Kuning
ceri

Baca juga. 5 Tips Menjadi Front End Developer dan Skill yang Dibutuhkan

8 Website dengan kombinasi kode warna terbaik

Ada beberapa website dengan kombinasi kode warna yang bisa Anda jelajahi (source. piksel)

1. Warna Adobe

Adobe Color adalah situs yang dikembangkan oleh Adobe System, Inc. yang berguna untuk membantu pengguna dalam mengeksplorasi warna untuk kepentingan desain grafis, maupun slide presentasi. Dengan tersedianya Adobe Color, pengguna dapat melakukan eksperimen warna seperti pencampuran warna, gradasi warna, dan eksperimen warna lainnya

Selain bereksperimen dengan warna menggunakan roda palet yang tersedia di web, pengguna juga dapat membuat palet warna sendiri dengan menggunakan foto atau gambar yang dimiliki pengguna. Adobe Color juga menyediakan kombinasi palet warna dari gambar dan foto yang dapat diunduh secara gratis

2. Kanvas

Fitur roda warna digunakan untuk memilih kombinasi warna yang cocok untuk digunakan secara bersamaan di kanvas Canva. Dengan fitur ini, Anda akan menemukan beberapa fitur pelengkap yaitu memilih warna, memilih kombinasi warna, dan menggunakan kombinasi warna tersebut

Fitur pick a color digunakan untuk menampilkan warna yang telah dipilih pada lingkaran warna. Fitur pilih kombinasi warna digunakan untuk mengatur kombinasi warna yang diinginkan. Ada 5 susunan kombinasi warna yang tersedia, antara lain komplementer, monokromatik, analog, triadik, dan tetradik. Warna yang tertera di bawah kolom merupakan hasil kombinasi warna yang bisa digunakan secara bersamaan

Sedangkan untuk penggunaan fitur kombinasi warna ini terdapat dua pilihan yaitu membuat grafis dan mengekspor palet. Buat grafik untuk menerapkan kombinasi warna pada desain yang akan dibuat. Ekspor palet untuk menyimpan kombinasi warna yang Anda peroleh ke dalam format PDF atau CSS

3. htmlcolorcodes

Htmlcolorcodes memberikan informasi yang sangat lengkap mulai dari kode warna HTML, kode warna Hex, nilai RGB dan HSL, dll. Htmlcolorcodes juga dilengkapi dengan color picker, color chart, color name, color library, dan tutorial HTML & CSS untuk anda yang sedang belajar kode warna

4. ColorExplorer

Di ColorExplorer Anda tidak hanya dapat bereksperimen dengan warna, tetapi juga pada gambar, halaman situs web, tata letak, dll. Situs ColorExplorer juga memberikan informasi yang cukup lengkap mengenai kombinasi warna yang Anda inginkan. Tidak hanya itu, Anda bahkan dapat mengimpor foto/gambar dan mengetahui skema warna dari foto tersebut

5. SpyColor

SpyColor adalah situs web kombinasi warna yang memungkinkan Anda menemukan informasi tentang nama warna, kode Hex, nomor RGB, nomor CMYK, dan informasi lainnya. Situs ini cocok untuk desainer yang mencari informasi warna yang lengkap

6. galaksi. tinta

galaksi. tinta adalah situs web kombinasi warna yang sederhana dan sangat mudah digunakan. Yang harus Anda lakukan adalah memindahkan slide yang disediakan atau memindahkan panah untuk mendapatkan kombinasi warna. galaksi. tinta membantu anda dalam membuat kombinasi warna dari warna yang anda inginkan. Bahkan, Anda bisa memilih kombinasi warna serupa yang bisa Anda pilih di situs

7. Pendingin

Coolors cukup berbeda dengan situs kombinasi warna sebelumnya. Sebab, kamu harus terlebih dahulu memilih warna yang ditampilkan secara acak berdasarkan koleksi Coolors. Namun, Anda tidak perlu khawatir. Setelah memilih warna, Anda dapat mengubah warna dan bereksperimen sesuka Anda. Jadi, Anda tetap bebas mengubah warna pada palet yang tersedia. Situs ini cocok untuk anda yang ingin memiliki palet warna untuk desain anda dengan cepat

8. Paleton

Situs kombinasi warna lainnya adalah Paletton. Situs ini menyediakan pilihan kombinasi warna yang cukup lengkap dan banyak. Selain itu, ada panduan lengkap cara menggunakan Paletton tepat di bawah roda warna. Jadi, jika Anda bingung, Anda bisa langsung membaca panduannya agar bisa memilih warna secara acak sesuai dengan kesukaan Anda

Baca juga. 8 skill ini wajib dimiliki oleh seorang Frontend Developer

Itulah daftar rekomendasi kode warna HTML & CSS beserta panduan penggunaannya. Semoga informasi di atas bisa bermanfaat untuk kamu, ya. Selain artikel dari EKRUT Media, kamu juga bisa mendapatkan berbagai informasi dan tips menarik seputar karir melalui YouTube EKRUT Official. Tidak hanya itu, jika Anda tertarik untuk mendapatkan berbagai peluang untuk mengembangkan karir, daftarkan diri Anda di EKRUT sekarang juga. Hanya di EKRUT, Anda bisa mendapatkan berbagai peluang kerja yang bisa disesuaikan dengan minat Anda

#000000 warna apa?

Jadi, kode HEX untuk warna hitam adalah #000000. Jadi, secara sederhana, HEX adalah kombinasi enam digit angka warna RGB yang memiliki banyak kombinasi hingga 16. 777. 216 warna berbeda.

#FF0000 warna apa?

Daftar warna

Apa itu kode warna HTML?

Apa yang dimaksud dengan kode warna HTML ? . Kode warna HTML (Hypertext Markup Language) ditandai dengan enam karakter setelah tagar (#), misalnya #000000. Warna HTML disusun menggunakan kode HEX yang merupakan ide heksadesimal RGB.