17/04/2016

CSS Margin & Padding - Menentukan Jarak Elemen

no-image
Ketika mengatur layout / tata letak halaman web, ada baiknya kita mempertimbangkan ruang kosong pada elemen sebagai jarak antara perbatasan elemen dengan elemen lain atau dengan area di luar elemen(margin) dan jarak antara perbatasan elemen dengan isi elemen itu sendiri (padding).

CSS Margin mengacu pada jarak perbatasan elemen dengan area di luar elemen, sementara CSS padding mengacu pada jarak perbatasan elemen dengan isi dalam elemen itu sendiri. Sebagai gambaran, jika kita menginginkan elmen HTML mengisi seluruh ruang layar atau halaman secara horizontal maka kita harus mempertimbangkan ukuran lebar layar. Sebutlah layar tersebut memiliki ukuran lebar 500 pixel, maka untuk mendapatkan ukuran yang tepat adalah dengan melihat jumlah total antara ukuran elemen, nilai margin, dan nilai padding secara horizontal (sisi kanan dan kiri) sehingga jumlah total menjadi 500 pixel. Perhatikan contoh berikut
p {
   width: 450px;
   margin: 10px;
   padding: 15px;
   }
Pada contoh di atas, saya menggunakan selektor dari tag HTML <p> dengan ukuran lebar 450 pixel dan ditambah dengan 10 pixel untuk margin kanan, 10 pixel untuk margin kiri, 15 pixel untuk padding kanan, dan 15 pixel untuk padding kiri. Jika dijumlah 450 + 10 + 10 + 15 + 15 = 500, nilai 500 ini sesuai dengan contoh ukuran lebar layar yang telah kita sebutkan di awal. Nilai Properti CSS Margin dan Padding
  • length
  • auto (margin)
  • inherit
  1. length
    • Menentukan jarak perbatasan elemen dengan jenis ukuran lenght baik unit absolut maupun unit relative, lihat selengkapnya di tatutan berikut :: CSS Lenght. Nilai panjang negatif berlaku untuk properti CSS margin namun tidak berlaku untuk CSS Padding.
  2. auto (khusus untuk CSS Margin)
    • Menerapkan nilai auto pada CSS Margin akan menempatkan elemen berpusat di titik tengah dari halaman layar secara horizontal.
  3. inherit
    • Nilai inherit mengambil nilai yang ditentukan pada induk elemen.
Sintaks CSS Margin dan Padding Terdapat empat sifat dalam penulisan sintaks CSS Margin dan Padding
  1. margin-top
  2. margin-right
  3. margin-bottom
  4. margin-left
  1. padding-top
  2. padding-right
  3. padding-bottom
  4. padding-left

Sintak CSS Margin dan Padding

margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;

padding-top: 10px;
padding-right: 10px; 
padding-bottom: 10px;  
padding-left: 10px; 
Namun ada cara lain yang lebih efesien dalam penulisan sintaks CSS Margin dan Padding. Setidaknya adan empat model penulisan Nilai CSS Margin dan Padding yang lebih efesien. Terlepas dari apapun istilahnya, untuk membedakan antara satu model dengan model lainya saya menyebutnya dengan model satu nilai, dua nilai, tiga nilai, dan empat nilai. Berikut ini adalah contoh penulisan CSS Margin yang juga berlaku untuk CSS Padding dalam penulisannya.
  1. Model Satu Nilai
    • Contoh : margin: 10px
      Contoh model penulisan satu nilai tersebut didefinisikan sebagai
      margin atas 10px
      margin kanan 10px
      margin bawah 10px
      margin kiri 10px
  2. Model Dua Nilai
    • Contoh : margin: 10px 15px
      Contoh model penulisan dua nilai tersebut didefinisikan sebagai
      margin atas dan bawah 10px
      margin kanan dan kiri 15px
  3. Model Tiga Nilai
    • Contoh : margin: 10px 15px 20px
      Contoh model penulisan tiga nilai tersebut didefinisikan sebagai
      margin atas 10px
      margin kanan dan kiri 15px
      margin bawah 20px
  4. Model Empat Nilai
    • Contoh : margin: 10px 15px 20px 10px
      Contoh model penulisan empat nilai tersebut didefinisikan sebagai
      margin-atas 10px
      margin-kanan 15px
      margin-bawah 20px
      margin-kiri 10px
Contoh Penerapan Sintak CSS Margin dan Padding Saya memilih elemen HTML <p> sebagai target CSS Margin dengan warna latar kuning dan saya membungkusnya dengan elemen <div> dengan warna latar biru untuk mengetahui efek margin yang ditampilkan. Pada elemen <div>, saya juga menyisipkan CSS Display: Overflow untuk alasan tertentu (anda bisa menemukan masalah tersebut pada tautan ini).

CSS Width dan Height - Menentukan Lebar dan Tinggi Elemen HTML

Setelah kita mengetahui istilah box model pada pembahasan lalu dan sebelum kita beralih ke sesi atirubut CSS Box model terkait lebar dan tinggi elemen (width dan height),kita akan berkanalan terlebih dahulu dengan 2 jenis elemen HTML yaitu elemen tingkat blok (block level) dan elemen tingkat inline (inline level) untuk membantu kita memahami lebih jauh bagaimana elemen2 HTML akan ditampilkan pada halaman layar secara horizontal.
CSS Width dan Height
Penting untuk kita ketahui bahwa ada perbedaan sifat yang mendasar tentang 2 jenis elemen tersebut, yaitu:
  1. elemen tingkat blok akan menempati area layar secara penuh, terlepas dari banyak atau sedikitnya isi (konten) elemen yang ada. Jika ada elemen lain yang datang setelahnya maka elemen tersebut akan ditampilan pada baris baru. Contoh elemen jenis ini adalah tag HTML <p>. Sebagai gambaran, di bawah ini saya akan menampilkan dokumen HTML menggunakan tag <p> dengan warna latar belakang untuk mengetahui bagaimana elemen tingkat blok mengisi ruang secara penuh di atas halaman

  2. Sementara elemen tingkat inline hanya mengambil ruang sesuai dengan banyak atau sedikitnya konten elemen. Jika ada elemen lain yang datang setelahnya maka elemen tersebut akan ditampilkan pada area di sebelahnya. Contoh elemen jenis ini adalah tag HTML <span>. Sebagai gambaran, di bawah ini saya akan menampilkan dokumen HTML menggunakan tag <span> dengan warna latar belakang untuk mengetahui bagaimana elemen tingkat inline mengisi ruang di atas halaman sesuai dengan konten elemen
Pelajari selengkapnya tentang :: Inline dan Block Level
Merubah Nilai Dasar Elemen Tingkat Inline dan Block dengan CSS Inilah mungkin yang menjadi alasan mengapa kita harus mengenal terlebih dahulu tentang 2 jenis elemen HTML; Elemen Tingkat Inline dan elemen tingkat Block, dimana ukuran lebar dan tinggi jenis elemen tingkat inline bersifat relatif terhadap isi atau konten elemen itu sendiri, sementara ukuran lebar dan tinggi elemen tingkat block memiliki nilai dasar yang tetap yaitu sesuai dengan lebar layar. Penting untuk diketahui bahwa properti CSS Width dan Height hanya bisa diterapkan untuk jenis elemen tingkat block saja dan tidak bisa diterapkan untuk jenis elemen tingkat inline. Namun, ada solusi lain untuk menentukan ukuran lebar dan tinggi terhadap jenis elemen tingkat inline yaitu merubah sifat dasar jenis elemen tingkat inline menjadi (memiliki sifat seperti) jenis elemen tingkat block dengan properti CSS display, contoh

Sintak CSS

span {
      display: block;
      width: 100px;
      height: 100px;
      background: yellow;
}
Ada tiga nilai dari properti CSS display yaitu: inline, block, dan inline-block. Pelajari selengkapnya tentang Properti :: CSS Display

Menentukan Lebar Elemen dengan CSS Width dan Height

Properti CSS Width berfungsi untuk menentukan lebar area konten dari elemen, sementara properti CSS Height berfungsi untuk menentukan tinggi area elemen (tidak termasuk padding, margin, border dan properti lain). Lihat CSS box model. Nilai Properti CSS Width dan Height
  • auto
  • lenght
  • inherit
  1. auto
    • Ini adalah nilai default untuk ukuran lebar dan tinggi area konten dari elemen. Dengan menerapkan nilai auto, terutama jenis elemen tingkat block, elemen akan otomatis menempati ruang secara horizontal selebar 100% meskipun kita mentapkan nilai margin, padding, dan lain-lain.
  2. lenght
    • Menentukan lebar dan tinggi dengan jenis ukuran lenght baik unit absolut maupun unit relative, lihat selengkapnya di tatutan berikut :: CSS Lenght. Nilai panjang negatif tidak berlaku untuk properti CSS widht.
  3. inherit
    • Nilai inherit mengambil nilai yang ditentukan pada induk elemen.
Sintaks CSS Width dan Height

Contoh Sintak CSS Width dan Height

width: auto;
width: 300px;
width: 50%;
width: inherit;

height: auto;
height: 300px;
height: 50%;
height: inherit;
Contoh Penerapan Sintaks CSS Width dan Height

10/04/2016

CSS Box Model

Penggunaan istilah Box Model (sebagaimana yang sering digunakan di berbagai pembelajaran CSS dan HTML) menunjukkan bahwa setiap elemen HTML didefinisikan sebagai elemen yang membentuk model kotak persegi panjang (terlepas dari bentuk yang disajikan), dan model kotak berlaku untuk semua elemen HTML (dan XHTML). Oleh karena itu, "Box Model" adalah spesifikasi yang mendefinisikan bagaimana sebuah kotak dan atributnya berhubungan satu sama lain. Dalam contoh yang paling sederhana, gambar berikut akan menjelaskan apa yang disebut box model.
box-model
Setiap elemen akan ditampilkan sebagai kotak persegi panjang, dan ada beberapa sifat yang menentukan ukuran kotak itu, seperti: lebar kotak (width); tinggi kotak (height); jarak antara batas kotak dengan isi kotak (padding); jarak antara batas kotak dengan elemen di luar kotak (margin; dan lain sebagainya.

Sampai di sini, penting untuk kita ketahui bahwa contoh kotak elemen pada gambar di atas hanya bersifat ilustratif belaka. Garis tepi yang saya gambarkan hanya berfungsi untuk menandai area kotak elemen beserta atributnya. Dan di bawah ini saya sertakan contoh nyata dari dokumen HTML beserta atribut CSS pembentuk Box Model. Klik tab "preview" untuk melihat demo.

Pada contoh di atas, kita akan fokus pada kotak berwarna kuning sebagai elemen yang menjadi contoh box model. Kotak kuning tersebut saya buat dengan tag HTML <p> dan saya membungkusnya dengan kotak biru yang saya buat dengan tag HTML <div>. Di sini kita melihat bahwa sebuah kotak elemen bersama atributnya (width, height, margin, dan padding) saling berkaitan dalam menentukan ukuran sebuah elemen, dalam kasus ini saya menggunakan jenis satuan ukuran lenght, yaitu pixel / px (pelajari lebih lanjut pada tautan berikut: satuan ukuran lenght). Jika diakumulasikan maka contoh kotak elemen pada gambar di atas (kotak kuning) memiliki ukuran total 200px untuk lebar elemen dan 150px untuk tinggi elemen dengan asumsi sebagai berikut:
  1. Lebar Kotak
    • width(lebar elemen) : 100px
    • padding kanan : 20px
    • padding kiri : 20px
    • margin kanan: 30px
    • margin kiri : 30px
    • Total ukuran lebar : 100px + 20px + 20px + 30px + 30px = 200px
  2. Tinggi Kotak
    • height(tinggi elemen) : 50px
    • padding atas : 20px
    • padding bawah: 20px
    • margin atas: 30px
    • margin bawah: 30px
    • Total ukuran tinggi: 50px + 20px + 20px + 30px + 30px = 150px

Mengenal Lebih Jauh Atribut CSS Box Model

Sebagian kita mungkin masih belum benar-benar memahamai apa dan bagaimana atribut CSS Box Model bekerja. Sebab, untuk menentukan ukuran sebenarnya dari kotak elemen kita perlu memperhitungkan lebar kotak elemen, jarak antara batas kotak elemen dengan isi kotak (konten), dan jarak antara batas kotak elemen dengan area luar kotak elemen.
Sejauh ini banyak sifat-sifat penentu ukuran kotak elemen seringkali menguras perhatian kita. Untuk memperjelas hal tersebut, mari kita mengulas satu persatu sifat-sifat kotak elemen yang juga menjadi atribut CSS Box Model pada tautan di bawah ini.

08/04/2016

3 Model Penulisan CSS

Model penulisan css Model penulisan CSS yang saya maksudkan di sini adalah cara kita menyisipkan kode CSS dalam sebuah dokumen HTML dengan 3 cara yang paling umum digunakan. Yaitu,
  1. Internal CSS
    • Model Penyisipan css di dalam file Html.
  2. Eksternal CSS
    • Model Penyisipan Css di luar file Html.
  3. Inline CSS
    • Model penyisipan Css langsung di dalam tag Html.
Sebelum kita bahas lebih jauh, sebagai gambaran umum, berikut ini saya sertakan contoh struktur dokumen HTML dasar.

HTML

<!DOCTYPE HTML>

<html>
<head>
<title>Judul</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>

<div id="page-wrapper">
    <div id="header-wrapper">
    <header id="header">
        <h1><a href="#" id="logo">Logo</a></h1>
        <nav id="nav"></nav>
    </header>
</div>

    <div id="main"></div>
    <aside id="sidebar"></aside>
    <footer id="footer-wrapper"></footer>
</div>

</body>
</html>

Model Penulisan Internal CSS

Internal CSS adalah model penulisan css dengan menyispikan kode CSS langsung didalam file HTML, penggunaanya harus diapit di dalam tag <style type="text/css"> ... </style> dan berada diantara tag <head> dan </head>. Contoh model penulisan Internal CSS di bawah ini merujuk pada contoh struktur dokumen HTML dasar yang telah saya sertakan di atas.

HTML

<head>
<style type="text/css">
 body {
            background: #EEEEEE;
            color: #000000;
}
#header-wrapper {
            background: #000000;
            color: #FFFFFF;
} 
</style> 
</head>
Contoh selengkapnya

HTML

<!DOCTYPE HTML>

<html>
<head>
<title>Judul</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
 body {
            background: #EEEEEE;
            color: #000000;
}
#header-wrapper {
            background: #000000;
            color: #FFFFFF;
} 
</style> 
</head>
<body>
<div id="page-wrapper">
    <div id="header-wrapper">
    <header id="header">
        <h1><a href="#" id="logo">Logo</a></h1>
        <nav id="nav"></nav>
    </header>
</div>
    <div id="main"></div>
    <aside id="sidebar"></aside>
      <footer id="footer-wrapper"></footer>
</div>
</body>
</html>

Model Penulisan Eksternal CSS

Model penulisan External CSS adalah model penulisan CSS yang terpisah dari file HTML dan hanya berisikan kode kode CSS saja, biasanya dokumen tersebut berextensi “css”. Anda bisa menuliskannya dalam text editor dan menyimpannya di hosting semacam code.google atau yang lainnya. Untuk menerapkan dokumen External CSS dalam dokumen HTML dibutuhkan sebuah tag <link> dan diletakkan diantara tag <head> … </head>.

HTML

<head>
<link rel="stylesheet" href="doc/css/main.css" /> 
</head>
Contoh selengkapnya

HTML

<!DOCTYPE HTML>

<html>
<head>
<title>Judul</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="doc/css/main.css" /> 
</head>
<body>
<div id="page-wrapper">
    <div id="header-wrapper">
    <header id="header">
        <h1><a href="#" id="logo">Logo</a></h1>
        <nav id="nav"></nav>
    </header>
</div>
    <div id="main"></div>
    <aside id="sidebar"></aside>
      <footer id="footer-wrapper"></footer>
</div>
</body>
</html>

Model Penulisan Inline CSS

Inline CSS adalah model penyisipan css langsung didalam tag HTML. Cara penulisannya cukup dengan menambahkan atribut style="....." dalam tag HTML. Inline Css pada dasarnya tidak direkomendasikan penggunaannya, namun terkadang Inline Css dibutuhkan untuk memberi format HTML yang lebih spesifik.

HTML

<body style="background: #EEEEEE; color: #000000">
..... 
</body> 
Contoh Selengkapnya

HTML

<!DOCTYPE HTML>

<html>
<head>
<title>Judul</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body style="background: #EEEEEE; color: #000000">
<div id="page-wrapper">
    <div id="header-wrapper" style="background: #000000; color: #FFFFFF">
    <header id="header">
        <h1><a href="#" id="logo">Logo</a></h1>
        <nav id="nav"></nav>
    </header>
</div>
    <div id="main"></div>
    <aside id="sidebar"></aside>
      <footer id="footer-wrapper"></footer>
</div>
</body>
</html>

07/04/2016

CSS Color: Tabel Kode Warna

Tabel berikut ini memuat daftar kode warna dari : color name, hexadecimal, RGB, dan HSL berikut contoh hasil warna yang ditampilkan.
RedGreenBlueHEXColor NameLumHueSatLig  Color
93138168#5D8AA8Air Force Blue532043051
240248255#F0F8FFAlice Blue9720810097
2273854#E32636Alizarin513557752
2294380#E52B50Amaranth533487853
2551910#FFBF00Amber784510050
16419857#A4C639Android Green70745550
1411820#8DB600Apple Green627410036
251206177#FBCEB1Apricot85249084
127255212#7FFFD4Aquamarine8816010075
758332#4B5320Army Green30694423
596875#3B444BArsenic262061226
233214107#E9D66BArylide Yellow82517467
178190181#B2BEB5Ash Grey73135872
135169107#87A96BAsparagus60932754
255153102#FF9966Atomic Tangerine712010070
1095326#6D351AAuburn28206126
0127255#007FFFAzure5721010050
137207240#89CFF0Baby Blue781997774
161202241#A1CAF1Baby Blue Eyes782097479
244194194#F4C2C2Baby Pink8206986
25520942#FFD12ABanana Yellow824710058
132132130#848482Battleship Grey5260151
152119123#98777BBazaar513531453
245245220#F5F5DCBeige95605691
614331#3D2B1FBistre19243318
000#000000Black0000
49140231#318CE7Bleu De France582107955
250240190#FAF0BEBlond93508686
00255#0000FFBlue4424010050
22293131#DE5D83Blush593426662
1216859#79443BBole3493435
20400#CC0000Boston University Red43010040
18116666#B5A642Brass63524748
1022550#66FF00Bright Green829610050
191148228#BF94E4Bright Lavender702726074
1953372#C32148Bright Maroon453467145
2550127#FF007FBright Pink6033010050
8232222#08E8DEBright Turquoise791779347
209159232#D19FE8Bright Ube742816177
06637#004225British Racing Green2015410013
20512750#CD7F32Bronze57306150
150750#964B00Brown383010029
255193204#FFC1CCBubble Gum8434910088
231254255#E7FEFFBubbles9718310095
240220130#F0DC82Buff85497973
128032#800020Burgundy2834510025
222184135#DEB887Burlywood74345770
204850#CC5500Burnt Orange492510040
23311681#E97451Burnt Sienna61147862
1385136#8A3324Burnt Umber3395934
18951164#BD33A4Byzantine523115847
1124199#702963Byzantium323114630
83104120#536878Cadet402061840
010760#006B3CCadmium Green3415410021
23713545#ED872DCadmium Orange64288455
227034#E30022Cadmium Red4935110045
163193173#A3C1ADCambridge Blue721401970
120134107#78866BCamouflage Green50911147
2552390#FFEF00Canary Yellow905610050
25580#FF0800Candy Apple Red54210050
1963058#C41E3ACardinal443507344
0204153#00CC99Caribbean Green6716510040
150024#960018Carmine3235010029
153186221#99BADDCarolina Blue732115073
23714533#ED9121Carrot Orange66338553
146161207#92A1CFCeil662253969
172225175#ACE1AFCeladon811234778
0123167#007BA7Cerulean4619610033
4282190#2A52BECerulean Blue412246445
16012090#A0785AChamoisee51262849
247231206#F7E7CEChampagne91377289
546979#36454FCharcoal262041926
2232550#DFFF00Chartreuse906810050
2224999#DE3163Cherry533437253
255183197#FFB7C5Cherry Blossom Pink8234810086
2059292#CD5C5CChestnut5305358
123630#7B3F00Chocolate313110024
2551670#FFA700Chrome Yellow733910050
152129123#98817BCinereous53121254
2276652#E34234Cinnabar5257655
21010530#D2691ECinnamon54257547
22820810#E4D00ACitrine79559247
251204231#FBCCE7Classic Rose883268589
0255111#00FF6FClover8114610050
071171#0047ABCobalt3621510034
155221255#9BDDFFColumbia Blue8320010080
04699#002E63Cool Black2121210019
140146172#8C92ACCool Grey592291661
18411551#B87333Copper52295746
255560#FF3800Coquelicot561310050
25512780#FF7F50Coral661610066
1376369#893F45Cordovan363553739
25123693#FBEC5DCorn89549567
1792727#B31B1BCornell Red3907440
100149237#6495EDCornflower Blue622197966
255248220#FFF8DCCornsilk974810093
255253208#FFFDD0Cream975710091
2202060#DC143CCrimson493488347
0255255#00FFFFCyan8718010050
25525549#FFFF31Daffodil946010060
24022548#F0E130Dandelion85558656
00139#00008BDark Blue2424010027
1016733#654321Dark Brown29305126
935784#5D3954Dark Byzantium303152429
16400#A40000Dark Candy Apple Red34010032
869126#08457EDark Cerulean292098826
15210596#986960Dark Chestnut47102349
2059169#CD5B45Dark Coral52105854
0139139#008B8BDark Cyan4718010027
18413411#B8860BDark Goldenrod55438938
15032#013220Dark Green151589610
263633#1A2421Dark Jungle Green131621612
189183107#BDB76BDark Khaki69563858
726050#483C32Dark Lava24271824
11579150#734F96Dark Lavender422703145
1390139#8B008BDark Magenta3930010027
051102#003366Dark Midnight Blue2321010020
8510747#556B2FDark Olive Green37823930
2551400#FF8C00Dark Orange673310050
119158203#779ECBDark Pastel Blue622124563
319260#03C03CDark Pastel Green601389738
150111214#966FD6Dark Pastel Purple582635664
1945934#C23B22Dark Pastel Red4597045
23184128#E75480Dark Pink593427562
051153#003399Dark Powder Blue3022010030
1353887#872657Dark Raspberry353305634
233150122#E9967ADark Salmon68157270
86325#560319Dark Scarlet193449317
602020#3C1414Dark Sienna1405016
477979#2F4F4FDark Slate Gray281802525
2311469#177245Dark Spring Green371506627
14512981#918151Dark Tan50452844
25516818#FFA812Dark Tangerine733810054
2047892#CC4E5CDark Terra Cotta513535555
1480211#9400D3Dark Violet4828210041
858585#555555Davy'S Grey330033
2196189#1560BDDenim432138041
193154107#C19A6BDesert63334159
237201175#EDC9AFDesert Sand82256381
105105105#696969Dim Gray410041
133187101#85BB65Dollar Bill65983956
00156#00009CDuke Blue2724010031
22516995#E1A95FEarth Yellow70346863
976481#614051Eggplant313292132
80200120#50C878Emerald661405255
229170112#E5AA70Fawn71306967
255280#FF1C00Ferrari Red54710050
2062232#CE1620Fire Engine Red453578145
1783434#B22222Firebrick3906842
2268834#E25822Flame54177751
252142172#FC8EACFlamingo Pink733449577
247233142#F7E98EFlavescent89528776
16833#014421Forest Green211499714
22815515#E49B0FGamboge66398848
248248255#F8F8FFGhost White9824010099
96130182#6082B6Glaucous532163755
15310121#996515Golden Brown44367634
2552230#FFDF00Golden Yellow855210050
21816532#DAA520Goldenrod67437449
128128128#808080Gray500050
01280#008000Green3912010025
113166210#71A6D2Iceberg642075263
25224794#FCF75EIcterine92589668
17823693#B2EC5DInchworm82847965
191368#138808India Green421158928
2559292#FF5C5CIndian Red62010068
22716887#E3A857Indian Yellow70357162
047167#002FA7International Klein Blue3222310033
255255240#FFFFF0Ivory996010097
0168107#00A86BJade5415810033
2155962#D73B3EJasper503596654
195176145#C3B091Khaki70372967
181126220#B57EDCLavender642755768
204204255#CCCCFFLavender Blue8424010090
255240245#FFF0F5Lavender Blush9634010097
196195208#C4C3D0Lavender Gray782451279
1242520#7CFC00Lawn Green829010049
2552470#FFF700Lemon925810050
1912550#BFFF00Lime877510050
2550255#FF00FFMagenta7030010050
192640#C04000Mahogany442010038
12800#800000Maroon26010025
2525112#191970Midnight Blue222406427
62180137#3EB489Mint601584947
25521988#FFDB58Mustard854710067
00128#000080Navy Blue2224010025
20411934#CC7722Ochre55307147
1281280#808000Olive476010025
2551270#FF7F00Orange653010050
03371#002147Oxford Blue1521210014
174198207#AEC6CFPastel Blue761962675
13110583#836953Pastel Brown43282242
207207196#CFCFC4Pastel Gray81601079
119221119#77DD77Pastel Green741206067
244154194#F49AC2Pastel Magenta753338078
25517971#FFB347Pastel Orange763510064
255209220#FFD1DCPastel Pink8834610091
179158181#B39EB5Pastel Purple662951366
25510597#FF6961Pastel Red64310069
203153201#CB99C9Pastel Violet703023270
253253150#FDFD96Pastel Yellow95609679
255229180#FFE5B4Peach913910085
20922649#D1E231Pear81667554
240234214#F0EAD6Pearl91464689
2302260#E6E200Peridot835910045
1121111#01796FPine Green401759824
255192203#FFC0CBPink8435010088
147197114#93C572Pistachio69964261
229228226#E5E4E2Platinum8940589
14269133#8E4585Plum433073541
2559054#FF5A36Portland Orange601110061
1122828#701C1CPrune2506027
25511724#FF7518Pumpkin632410055
10553156#69359CPurple Heart382704941
2271193#E30B5DRaspberry523379147
13010268#826644Raw Umber42333139
25500#FF0000Red54010050
657251#414833Rifle Green27801724
101011#65000BRosewood2135310020
035102#002366Royal Blue2021910020
2241795#E0115FRuby513378647
1836514#B7410ERust43188639
2551030#FF6700Safety Orange612410050
24419648#F4C430Saffron78459057
255140105#FF8C69Salmon691410071
194178128#C2B280Sand69453563
15011323#967117Sand Dune46437334
23621364#ECD540Sandstorm81528259
837103#082567Sapphire212228622
502020#321414Seal Brown1204314
255245238#FFF5EESeashell972510097
1126620#704214Sepia30307026
13812193#8A795DShadow48371945
192192192#C0C0C0Silver750075
2036511#CB410BSinopia46179042
135206235#87CEEBSky Blue771977173
207113175#CF71AFSky Magenta623204963
255250250#FFFAFASnow99010099
1672520#A7FC00Spring Bud858010049
70130180#4682B4Steel Blue512074449
228217111#E4D96FStraw82546866
250214165#FAD6A5Sunset86358981
2421330#F28500Tangerine643310047
0128128#008080Teal4318010025
22611491#E2725BTerra Cotta60107062
2382300#EEE600Titanium Yellow855810047
011794#00755ETropical Rain Forest3816810023
48213200#30D5C8Turquoise731756651
1810143#120A8FUltramarine252448730
91146229#5B92E5United Nations Blue602167363
243229171#F3E5ABVanilla89487581
1430255#8F00FFViolet5327410050
245222179#F5DEB3Wheat88397783
255255255#FFFFFFWhite10000100
245245245#F5F5F5White Smoke960096
115134120#738678Xanadu50136849
1577146#0F4D92Yale Blue342128132
2552550#FFFF00Yellow946010050
Sumber kode diambil dari situs http://www.workwithcolor.com/