13 Jul 2011

Share:Tabel Warna Hex Untuk desain website/Blog


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.



Tabel warna Html
Warna gol.Putih ContohKode
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.greyContohKode
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.hitamContohKode
black
#000000
ivory_black
#292421
lamp_black
#2E473B
Warna gol.merahContohKode
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.coklatContohKode
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.OrangeContohKode
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.kuningContohKode
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.HijauContohKode
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 mudaContohKode
aquamarine
#7FFFD4
aquamarine_medium
#66CDAA
cyan
#00FFFF
cyan_white
#E0FFFF
turquoise
#40E0D0
turquoise_dark
#00CED1
turquoise_medium
#48D1CC
turquoise_pale
#AFEEEE
Warna 4 gol.biruContohKode
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.unguContohKode
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.

Warna aman-web
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.
Warna-warna benar-benar aman web
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.

Nah sekarang udah tahukan kode warnanya ??trus penerapannya bagaimana?Yuk kita belajar nerapinnya :
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 
Sobat bisa menerapkan kode ini dalam lingkup defenisi entitas Syle baik itu untuk :
  • 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

17 comments:

  1. menarik sob..lumayan buat edit sesuatu,nyontek kesini warna-warnanya...hehe..jgn lupa jga komen balik di blogku ya

    ReplyDelete
  2. @adrian Oke sobat,Segera tkp,siapin aja teh hangatnya hehehe

    ReplyDelete
  3. wah nice info gan ...
    ini dia yang ane cari , so ane lagi nge bangun thmemplate buat blog baru neh, trus paduan warnanya ane bingung wkwkwkwk

    ReplyDelete
  4. @bhotol™ wah keren ntar saya liat deh hasilnya hehehe

    ReplyDelete
  5. wah komplit disini gak bingung cari kode warna thnks

    ReplyDelete
  6. @bopfive5 hehehe iya mas silahkan dibookmark bila bermanfaat :D

    ReplyDelete
  7. wahhh ini dia yang pernah saiia bahas dulu.. tapi kebetulan pake Photoshop.. hehee.. lengkap banget mas sourcenya :) mantap!!

    ReplyDelete
  8. menarik nih sob,, ane numpang baca2 ya,,

    ReplyDelete
  9. Thanks uda Share tabel warna nya mas Randy, Nice info..

    ReplyDelete
  10. @Belajar Photoshop hehehe iya mas sebetulnya ini tutorial dasar :D berhubung saya males jadi baru sekarang kepublish

    ReplyDelete
  11. @Mas uwahsilahkan master Uwah hehehe

    ReplyDelete
  12. kunjungan perdana, mohon ijin baca2...

    ReplyDelete
  13. weee mantab ini,,ga usah ribet2 lagi cari kode warna ,,ada disni skrang ,,seeppp mksh nfo nya :)

    ReplyDelete
  14. @pandhawa Oke
    @greenkloperer hehe oke mas sama2

    ReplyDelete
  15. sedot dulu, moga2 bermanfaat

    ReplyDelete