Assalamualaikum wr.wb.
halo sharelikers dimanapun berada,kali ini saya mau share tentang Tabel Lengkap warna Html Terutama Kode hex ,bila sebelumnya saya sudah pernah mempost tentang Kode Hex (baca:Widget HEX warna yang penting share) dalam bentuk widget.kali ini saya mencoba mengaplikasikan tabel seperti yang pernah saya pelajari sebelumnya (baca :yuk belajar Buat tabel blog)yang juga ditanyakan mas Ryzkizone
Seperti yang Kita tahu,warna adalah elemen penting dalam pendesainan sebuah website.Bagus jeleknya desain suatu website bergantung dari si pendesain blog/website dalam menentukan dan menggunakan warna -warna tersebut.Warna yang tidak sesuai antara satu bagian dengan yang lain menyebabkan Website tidak indah dipandang mata dan bisa membuat mata cepat lelah atau berair.Warna yang terlalu gelap atau terang tidak lah baik untuk suatu website.
Akan tetapi warna html itupun juga beragam,dari segi golongan warna,standard suatu website bahkan kedinamisan dengan konten dan template kita.Warna html (hexadecimal) juga ada pembagiannya menurut W3C,ada yang bener-bener aman buat website ,ada yang aman saja dan ada juga yang kurang aman.maksud tidak aman disini adalah tidak semua browser dapat menginterpretasikan warna yang kita sajikan dalam suatu website .Dalam rangka membuat halaman HTML yang tidak bergantung dari piranti lunak penjelajah webnya, warna-warna tersebut haruslah dihindari.
Seperti apa sih tabel warnanya?Mari kita Lihat berikut Ini
1.Kode Html warna Hex sesuai Golongan Warna
Berikut Ini disajikan dalam bentuk slide kode hex warna html sesuai golongan besar warnanya.
Warna gol.Putih | Contoh | Kode |
---|---|---|
Antique_white | #FAEBD7 | |
azure | #F0FFFF | |
Bisque | #FFE4C4 | |
blanched_almond | #FFEBCD | |
cornsilk | #FFF8DC | |
eggshell | #FCE6C9 | |
floral_white | #FFFAF0 | |
gainsboro | #DCDCDC | |
ghost_white | #F8F8FF | |
honeydew | #F0FFF0 | |
ivory | #FFFFF0 | |
lavender | #E6E6FA | |
lavender_blush | #FFF0F5 | |
lemon_chiffon | #FFFACD | |
linen | #FAF0E6 | |
mint_cream | #F5FFFA | |
misty_rose | #FFE4E1 | |
moccasin | #FFE4B5 | |
navajo_white | #FFDEAD | |
old_lace | #FDF5E6 | |
papaya_whip | #FFEFD5 | |
peach_puff | #FFDAB9 | |
seashell | #FFF5EE | |
snow | #FFFAFA | |
thistle | #D8BFD8 | |
titanium_white | #FCFFF0 | |
wheat | #F5DEB3 | |
white | #FFFFFF | |
white_smoke | #F5F5F5 | |
zinc_white | #FDF8FF | |
Warnagol.grey | Contoh | Kode |
cold_grey | #808A87 | |
dim_grey | #696969 | |
grey | #C0C0C0 | |
light_grey | #D3D3D3 | |
slate_grey | #708090 | |
slate_grey_dark | #2F4F4F | |
slate_grey_light | #778899 | |
warm_grey | #808069 | |
Warna gol.hitam | Contoh | Kode |
black | #000000 | |
ivory_black | #292421 | |
lamp_black | #2E473B | |
Warna gol.merah | Contoh | Kode |
alizarin_crimson | #E32636 | |
brick | #9C661F | |
cadmium_red_deep | #E3170D | |
coral | #FF7F50 | |
coral_light | #F08080 | |
deep_pink | #FF1493 | |
english_red | #D43D1A | |
firebrick | #B22222 | |
geranium_lake | #E31230 | |
hot_pink | #FF69B4 | |
indian_red | #B0171F | |
light_salmon | #FFA07A | |
madder_lake_deep | #E32E30 | |
maroon | #B03060 | |
pink | #FFC0CB | |
pink_light | #FFB6C1 | |
raspberry | #872657 | |
red | #FF0000 | |
rose_madder | #E33638 | |
salmon | #FA8072 | |
tomato | #FF6347 | |
venetian_red | #D41A1F | |
Warna gol.coklat | Contoh | Kode |
beige | #A39480 | |
brown | #802A2A | |
brown_madder | #DB2929 | |
brown_ochre | #87421F | |
burlywood | #DEB887 | |
burnt_sienna | #8A360F | |
burnt_umber | #8A3324 | |
chocolate | #D2691E | |
deep_ochre | #733D1A | |
flesh | #FF7D40 | |
flesh_ochre | #FF5721 | |
gold_ochre | #C77826 | |
greenish_umber | #FF3D0D | |
khaki | #F0E68C | |
khaki_dark | #BDB76B | |
light_beige | #F5F5DC | |
peru | #CD853F | |
rosy_brown | #BC8F8F | |
raw_sienna | #C76114 | |
raw_umber | #734A12 | |
sepia | #5E2612 | |
sienna | #A0522D | |
saddle_brown | #8B4513 | |
sandy_brown | #F4A460 | |
tan | #D2B48C | |
van_dyke_brown | #5E2605 | |
Warna gol.Orange | Contoh | Kode |
cadmium_orange | #FF6103 | |
cadmium_red_light | #FF030D | |
carrot | #ED9121 | |
dark_orange | #FF8C00 | |
mars_orange | #964514 | |
mars_yellow | #E3701A | |
orange | #FF8000 | |
orange_red | #FF4500 | |
yellow_ochre | #E38217 | |
Warna gol.kuning | Contoh | Kode |
aureoline_yellow | #FFA824 | |
banana | #E3CF57 | |
cadmium_lemon | #FFE303 | |
cadmium_yellow | #FF9912 | |
cadmium_yellow_light | #FFB00F | |
gold | #FFD700 | |
goldenrod | #DAA520 | |
goldenrod_dark | #B8860B | |
goldenrod_light | #FAFAD2 | |
goldenrod_pale | #EEE8AA | |
light_goldenrod | #EEDD82 | |
melon | #E3A869 | |
naples_yellow_deep | #FFA812 | |
yellow | #FFFF00 | |
yellow_light | #FFFFE0 | |
Warna gol.Hijau | Contoh | Kode |
chartreuse | #7FFF00 | |
chrome_oxide_green | #668014 | |
cinnabar_green | #61B329 | |
cobalt_green | #3D9140 | |
emerald_green | #00C957 | |
forest_green | #228B22 | |
green | #00FF00 | |
green_dark | #006400 | |
green_pale | #98FB98 | |
green_yellow | #ADFF2F | |
lawn_green | #7CFC00 | |
lime_green | #32CD32 | |
mint | #BDFCC9 | |
olive | #3B5E2B | |
olive_drab | #6B8E23 | |
olive_green_dark | #556B2F | |
permanent_green | #0AC92B | |
sap_green | #308014 | |
sea_green | #2E8B57 | |
sea_green_dark | #8FBC8F | |
sea_green_medium | #3CB371 | |
sea_green_light | #20B2AA | |
spring_green | #00FF7F | |
spring_green_medium | #00FA9A | |
terre_verte | #385E0F | |
viridian_light | #6EFF70 | |
yellow_green | #9ACD32 | |
Warna gol.biru muda | Contoh | Kode |
aquamarine | #7FFFD4 | |
aquamarine_medium | #66CDAA | |
cyan | #00FFFF | |
cyan_white | #E0FFFF | |
turquoise | #40E0D0 | |
turquoise_dark | #00CED1 | |
turquoise_medium | #48D1CC | |
turquoise_pale | #AFEEEE | |
Warna 4 gol.biru | Contoh | Kode |
alice_blue | #F0F8FF | |
blue | #0000FF | |
blue_light | #ADD8E6 | |
blue_medium | #0000CD | |
cadet | #5F9EA0 | |
cobalt | #3D59AB | |
cornflower | #6495ED | |
cerulean | #05B8CC | |
dodger_blue | #1E90FF | |
indigo | #082E54 | |
manganese_blue | #03A89E | |
midnight_blue | #191970 | |
navy | #000080 | |
peacock | #33A1C9 | |
powder_blue | #B0E0E6 | |
royal_blue | #4169E1 | |
slate_blue | #6A5ACD | |
slate_blue_dark | #483D8B | |
slate_blue_light | #8470FF | |
slate_blue_medium | #7B68EE | |
sky_blue | #87CEEB | |
sky_blue_deep | #00BFFF | |
sky_blue_light | #87CEFA | |
steel_blue | #4682B4 | |
steel_blue_light | #B0C4DE | |
turquoise_blue | #00C78C | |
ultramarine | #120A8F | |
Warna gol.ungu | Contoh | Kode |
blue_violet | #8A2BE2 | |
cobalt_violet_deep | #91219E | |
magenta | #FF00FF | |
orchid | #DA70D6 | |
orchid_dark | #9932CC | |
orchid_medium | #BA55D3 | |
permanent_red_violet | #DB2645 | |
plum | #DDA0DD | |
purple | #A020F0 | |
purple_medium | #9370DB | |
ultramarine_violet | #5C246E | |
violet | #8F5E99 | |
violet_dark | #9400D3 | |
violet_red | #D02090 | |
violet_red_medium | #C71585 | |
violet_red_pale | #DB7093 |
2.Kode Hex tiga digit Aman untuk website
Nah bila diatas itu merupakan tabel warna berdasarkan gol.warna Berikut Ini tabel warna warna-warna "aman-web" yang tersusun atas tiga digit nilai seperti dituliskan dalam tabel sebelumnya.Kita bisa lihat kode ini disetiap template default,baik yang kita download maupun dari Blogger/wordpress,yang telah menyediakan warna aman ini untuk sebuah website.
Nah bila diatas itu merupakan tabel warna berdasarkan gol.warna Berikut Ini tabel warna warna-warna "aman-web" yang tersusun atas tiga digit nilai seperti dituliskan dalam tabel sebelumnya.Kita bisa lihat kode ini disetiap template default,baik yang kita download maupun dari Blogger/wordpress,yang telah menyediakan warna aman ini untuk sebuah website.
000 | 300 | 600 | 900 | C00 | F00 | 003 | 303 | 603 | 903 | C03 | F03 |
006 | 306 | 606 | 906 | C06 | F06 | 009 | 309 | 609 | 909 | C09 | F09 |
00C | 30C | 60C | 90C | C0C | F0C | 00F | 30F | 60F | 90F | C0F | F0F |
030 | 330 | 630 | 930 | C30 | F30 | 033 | 333 | 633 | 933 | C33 | F33 |
036 | 336 | 636 | 936 | C36 | F36 | 039 | 339 | 639 | 939 | C39 | F39 |
03C | 33C | 63C | 93C | C3C | F3C | 03F | 33F | 63F | 93F | C3F | F3F |
060 | 360 | 660 | 960 | C60 | F60 | 063 | 363 | 663 | 963 | C63 | F63 |
066 | 366 | 666 | 966 | C66 | F66 | 069 | 369 | 669 | 969 | C69 | F69 |
06C | 36C | 66C | 96C | C6C | F6C | 06F | 36F | 66F | 96F | C6F | F6F |
090 | 390 | 690 | 990 | C90 | F90 | 093 | 393 | 693 | 993 | C93 | F93 |
096 | 396 | 696 | 996 | C96 | F96 | 099 | 399 | 699 | 999 | C99 | F99 |
09C | 39C | 69C | 99C | C9C | F9C | 09F | 39F | 69F | 99F | C9F | F9F |
0C0 | 3C0 | 6C0 | 9C0 | CC0 | FC0 | 0C3 | 3C3 | 6C3 | 9C3 | CC3 | FC3 |
0C6 | 3C6 | 6C6 | 9C6 | CC6 | FC6 | 0C9 | 3C9 | 6C9 | 9C9 | CC9 | FC9 |
0CC | 3CC | 6CC | 9CC | CCC | FCC | 0CF | 3CF | 6CF | 9CF | CCF | FCF |
0F0 | 3F0 | 6F0 | 9F0 | CF0 | FF0 | 0F3 | 3F3 | 6F3 | 9F3 | CF3 | FF3 |
0F6 | 3F6 | 6F6 | 9F6 | CF6 | FF6 | 0F9 | 3F9 | 6F9 | 9F9 | CF9 | FF9 |
0FC | 3FC | 6FC | 9FC | CFC | FFC | 0FF | 3FF | 6FF | 9FF | CFF | FFF |
tabel Disalin dari Wikipedia:keyword:Webcolors
3.warna Paling Aman Untuk website
Perancang web umumnya disarankan untuk tetap pada penggunaan warna-warna "aman-web" dalam situs web mereka; akan tetapi warna dengan kedalaman 8-bit jauh lebih umum saat palet 216-warna dikembangkan dibandingkan dengan saat ini. David Lehn dan Hadley Stern sejak saat itu menemukan bahwa hanya 22 warna dari 216 warna dalam palet warna aman-web yang dapat dipercaya untuk ditampilkan tanpa ketidak-konsistenan pada pemetaan-ulang pada tampilan computer dengan kedalaman warna 16-bit. Mereka menamakan 22 macam warna ini sebagai palet "benar-benar aman": palet tersebut terdiri sebagian besar atas tingkatan warna hijau dan kuning. Warna-warna yang dimaksud ditabelkan berikut ini.
000 | F00 | 003 | F03 | 00F | F0F | 0F0 | 6F0 | FF0 | 3F3 | 6F3 |
FF3 | 0F6 | 3F6 | CF6 | FF6 | 0FC | 3FC | 0FF | 3FF | 6FF | FFF |
* tabel yangpentingshare salin dari wikipedia:Keyword:de:Webfarben.
Kode warna diatas Didahului oleh kode # sebelumnya Misalnya :
- #E31230=Merah cara nerapinnya
<b style="color: #e31230;">Yang Penting Share</b>
Hasilnya adalah Yang Penting Share
- Nah Selain warna Hex Bisa juga kita menggunakan tag warna dalam bahasa Inggris (Lihat tabel paling atas untuk kode #FF6347 )adalah tomato maka bisa kita gunakan kode sebagai berikut :
<b style="color: tomato;">Yang Penting Share</b>
hasilnya adalah : Yang Penting Share
- Font-color
- bg-color
- CSS(cascading style sheet)
- dan lain sebagainya
Cukup sekian Dulu yang penting Share sharing Tabel lengkap warna Untuk desain website/Blog semoga dapat bermanfaat bagi sobat yang ingin mendesain blog atau websitenya agar tampak lebih indah dan nyaman dipandang mata.Nantikan sharing yang gak penting berikutnya,Yang Penting Share lah !
Sumber referensi Post Ini :
Tampilan terbaik menggunakan Google chrome dan Mozilla +5 layar 1280x854
menarik sob..lumayan buat edit sesuatu,nyontek kesini warna-warnanya...hehe..jgn lupa jga komen balik di blogku ya
ReplyDelete@adrian Oke sobat,Segera tkp,siapin aja teh hangatnya hehehe
ReplyDelete@bhotol™ wah keren ntar saya liat deh hasilnya hehehe
ReplyDeletewah komplit disini gak bingung cari kode warna thnks
ReplyDelete@bopfive5 hehehe iya mas silahkan dibookmark bila bermanfaat :D
ReplyDeletewahhh ini dia yang pernah saiia bahas dulu.. tapi kebetulan pake Photoshop.. hehee.. lengkap banget mas sourcenya :) mantap!!
ReplyDeletemenarik nih sob,, ane numpang baca2 ya,,
ReplyDeleteThanks uda Share tabel warna nya mas Randy, Nice info..
ReplyDelete@Belajar Photoshop hehehe iya mas sebetulnya ini tutorial dasar :D berhubung saya males jadi baru sekarang kepublish
ReplyDelete@Mas uwahsilahkan master Uwah hehehe
ReplyDelete@allShareMasama mas Onyx
ReplyDeletekunjungan perdana, mohon ijin baca2...
ReplyDeleteweee mantab ini,,ga usah ribet2 lagi cari kode warna ,,ada disni skrang ,,seeppp mksh nfo nya :)
ReplyDelete@pandhawa Oke
ReplyDelete@greenkloperer hehe oke mas sama2
sedot dulu, moga2 bermanfaat
ReplyDeleteoke semoga bermanfaat
Delete