Setelah dijelaskan pada artikel sebelumnya tentang memperindah halaman web dengan gambar, sekarang kita akan membicarakan tentang penggunaan warna dalam memperindah halaman web. Disini nanti akan dijelaskan tentang jenis-jenis warna dan bagaimana cara menggunakannya dalam tag HTML.
Kita mengenal banyak macam warna.
Taukah kamu jika semua warna yang ada itu sebenarnya merupakan kombinasi dari warna dasar? Ya …. Ada 3 warna dasar yang bisa dikombinasikan sehingga mengasilkan warna yang kita inginkan.
Ketiga warna itu adalah :MERAH,HIJAU dan BIRU.
HTML COLOR
Warna dalam HTML didefinisikan dalam bilangan hexadesimal yang merupakan
kombinasi dari warna MERAH(RED),HIJAU(GREEN) dan BIRU(BLUE) atau biasa disingkat RGB.
Nilai warna terendah adalah 0(hex #00) yang akan menghasilkan warna hitam
dan nilai warna tertinggi adalah 255(hex #FF) yang akan menghasilkan warna putih.
Berikut adalah contoh beberapa kombinasi warna dasar :
Color | Color HEX | Color RGB |
---|---|---|
#000000 | rgb(0,0,0) | |
#FF0000 | rgb(255,0,0) | |
#00FF00 | rgb(0,255,0) | |
#0000FF | rgb(0,0,255) | |
#FFFF00 | rgb(255,255,0) | |
#00FFFF | rgb(0,255,255) | |
#FF00FF | rgb(255,0,255) | |
#C0C0C0 | rgb(192,192,192) | |
#FFFFFF | rgb(255,255,255) |
HTML Color Names
Untuk mempermudah dalam penulisan warna diberikan nama-nama untuk
kombinasi warna yang sudah didukung oleh beberapa browser. Jadi kita
cukup menuliskan nama warna pada kode HTML. Berikut daftar nama-nama warna beserta kode hexadesimalnya.
Color Name | Color HEX | Color |
---|---|---|
AliceBlue | #F0F8FF | |
AntiqueWhite | #FAEBD7 | |
Aqua | #00FFFF | |
Aquamarine | #7FFFD4 | |
Azure | #F0FFFF | |
Beige | #F5F5DC | |
Bisque | #FFE4C4 | |
Black | #000000 | |
BlanchedAlmond | #FFEBCD | |
Blue | #0000FF | |
BlueViolet | #8A2BE2 | |
Brown | #A52A2A | |
BurlyWood | #DEB887 | |
CadetBlue | #5F9EA0 | |
Chartreuse | #7FFF00 | |
Chocolate | #D2691E | |
Coral | #FF7F50 | |
CornflowerBlue | #6495ED | |
Cornsilk | #FFF8DC | |
Crimson | #DC143C | |
Cyan | #00FFFF | |
DarkBlue | #00008B | |
DarkCyan | #008B8B | |
DarkGoldenRod | #B8860B | |
DarkGray | #A9A9A9 | |
DarkGrey | #A9A9A9 | |
DarkGreen | #006400 | |
DarkKhaki | #BDB76B | |
DarkMagenta | #8B008B | |
DarkOliveGreen | #556B2F | |
Darkorange | #FF8C00 | |
DarkOrchid | #9932CC | |
DarkRed | #8B0000 | |
DarkSalmon | #E9967A | |
DarkSeaGreen | #8FBC8F | |
DarkSlateBlue | #483D8B | |
DarkSlateGray | #2F4F4F | |
DarkSlateGrey | #2F4F4F | |
DarkTurquoise | #00CED1 | |
DarkViolet | #9400D3 | |
DeepPink | #FF1493 | |
DeepSkyBlue | #00BFFF | |
DimGray | #696969 | |
DimGrey | #696969 | |
DodgerBlue | #1E90FF | |
FireBrick | #B22222 | |
FloralWhite | #FFFAF0 | |
ForestGreen | #228B22 | |
Fuchsia | #FF00FF | |
Gainsboro | #DCDCDC | |
GhostWhite | #F8F8FF | |
Gold | #FFD700 | |
GoldenRod | #DAA520 | |
Gray | #808080 | |
Grey | #808080 | |
Green | #008000 | |
GreenYellow | #ADFF2F | |
HoneyDew | #F0FFF0 | |
HotPink | #FF69B4 | |
IndianRed | #CD5C5C | |
Indigo | #4B0082 | |
Ivory | #FFFFF0 | |
Khaki | #F0E68C | |
Lavender | #E6E6FA | |
LavenderBlush | #FFF0F5 | |
LawnGreen | #7CFC00 | |
LemonChiffon | #FFFACD | |
LightBlue | #ADD8E6 | |
LightCoral | #F08080 | |
LightCyan | #E0FFFF | |
LightGoldenRodYellow | #FAFAD2 | |
LightGray | #D3D3D3 | |
LightGrey | #D3D3D3 | |
LightGreen | #90EE90 | |
LightPink | #FFB6C1 | |
LightSalmon | #FFA07A | |
LightSeaGreen | #20B2AA | |
LightSkyBlue | #87CEFA | |
LightSlateGray | #778899 | |
LightSlateGrey | #778899 | |
LightSteelBlue | #B0C4DE | |
LightYellow | #FFFFE0 | |
Lime | #00FF00 | |
LimeGreen | #32CD32 | |
Linen | #FAF0E6 | |
Magenta | #FF00FF | |
Maroon | #800000 | |
MediumAquaMarine | #66CDAA | |
MediumBlue | #0000CD | |
MediumOrchid | #BA55D3 | |
MediumPurple | #9370D8 | |
MediumSeaGreen | #3CB371 | |
MediumSlateBlue | #7B68EE | |
MediumSpringGreen | #00FA9A | |
MediumTurquoise | #48D1CC | |
MediumVioletRed | #C71585 | |
MidnightBlue | #191970 | |
MintCream | #F5FFFA | |
MistyRose | #FFE4E1 | |
Moccasin | #FFE4B5 | |
NavajoWhite | #FFDEAD | |
Navy | #000080 | |
OldLace | #FDF5E6 | |
Olive | #808000 | |
OliveDrab | #6B8E23 | |
Orange | #FFA500 | |
OrangeRed | #FF4500 | |
Orchid | #DA70D6 | |
PaleGoldenRod | #EEE8AA | |
PaleGreen | #98FB98 | |
PaleTurquoise | #AFEEEE | |
PaleVioletRed | #D87093 | |
PapayaWhip | #FFEFD5 | |
PeachPuff | #FFDAB9 | |
Peru | #CD853F | |
Pink | #FFC0CB | |
Plum | #DDA0DD | |
PowderBlue | #B0E0E6 | |
Purple | #800080 | |
Red | #FF0000 | |
RosyBrown | #BC8F8F | |
RoyalBlue | #4169E1 | |
SaddleBrown | #8B4513 | |
Salmon | #FA8072 | |
SandyBrown | #F4A460 | |
SeaGreen | #2E8B57 | |
SeaShell | #FFF5EE | |
Sienna | #A0522D | |
Silver | #C0C0C0 | |
SkyBlue | #87CEEB | |
SlateBlue | #6A5ACD | |
SlateGray | #708090 | |
SlateGrey | #708090 | |
Snow | #FFFAFA | |
SpringGreen | #00FF7F | |
SteelBlue | #4682B4 | |
Tan | #D2B48C | |
Teal | #008080 | |
Thistle | #D8BFD8 | |
Tomato | #FF6347 | |
Turquoise | #40E0D0 | |
Violet | #EE82EE | |
Wheat | #F5DEB3 | |
White | #FFFFFF | |
WhiteSmoke | #F5F5F5 | |
Yellow | #FFFF00 | |
YellowGreen | #9ACD32 |
Penggunaan Warna dalam HTML
Nama-nama atau kode-kode hexadesimal diatas bisa digunakan untuk menseting
warna halaman web anda yang disertakan dalam tag-tag HTML yang mempunyai elemen color atau bgcolor.
Contoh :
<HTML> <HEAD> <TITLE> Seting Warna Halaman Web </TITLE> </HEAD> <BODY bgcolor=”LightSteelBlue”> <TABLE border=”1″ width=”100%”> <TR> <TD bgcolor=”CornflowerBlue” width=”50%”> <font color=”GreenYellow” size=”2″ >Seting warna dengan nama color</font> </TD> <TD bgcolor=”#8A2BE2″ width=”50%”> <font color=”#ADFF2F” size=”2″>Seting warna dengan kode Hexadesimal</font> </TD> </TR> </TABLE> </BODY> </HTML> |
Hasilnya adalah sebagai berikut:
Ok, Selamat mencoba, kalau belum jelas silahkan kasih comment. š
Sampai sekarang kita telah belajar tag dasar yang dibutuhkan dalam pembuatan
halaman web. Untuk selanjutnya kita akan membahas tag HTML yang dibutuhkan
untuk inputan dari user semacam text box, combo box, button dll.
kalau ada pertanyaan atau tanggapan kasih komentar, ok !!! š
Baca Artikel selanjutnya mengenai Dasar HTML di sini
Maret 8, 2008 pukul 3:14 pm
terima kasih banyak atas ilmu2 yang telah disampaikan di web ini, dan tentunya semua pelajaran yang anda bagi disini sangat berguna, bermanfaat dan membantu. sekali lagi diucapkan terima kasih..
Mei 7, 2008 pukul 8:11 am
Salam kenal dari Barudak Vespa Antik Jakarta….Thanks buat info – info nya….
September 23, 2008 pukul 7:09 am
IIIIIIIIIIIII………………….NGOPI http://www.w3schools.com/HTML/html_colors.asp
itu nama warnanya ada yang cacat!!
Juli 9, 2009 pukul 11:11 pm
Saya mau bertanya bagaimana cara memasukkan tag dari Technorati atau atau dari web master untuk verifikasi blog kita, mohon penjelasannya, kalau bisa sekalian gambarnya,
thks a lot
Agustus 27, 2009 pukul 4:10 am
ha ha ha ha ha
Agustus 27, 2009 pukul 4:12 am
hi hi hi
Agustus 27, 2009 pukul 4:13 am
bagimana cara memasukkan contoh ke notpad?
Februari 20, 2010 pukul 1:45 am
mksh ea taz ilmu,,bermafaat bgtz
Februari 20, 2010 pukul 1:45 am
di tunggu yang bru’x ea
Juli 20, 2010 pukul 4:54 am
Keren…sangat membantu…