04 Sep

Daftar Kode Warna Lengkap untuk CSS dan HTML

Daftar kode warna lengkap untuk CSS dan HTML. Tools kode warna online dan untuk mencari kode warna dari gambar.

Kode warna sangat penting. Untuk programer dan desainer. Berdasar kode warna, kita bisa membuat warna yang persis sama dengan warna yang kita kehendaki. Jika kita hanya melihat warna hijau saja, maka kita pastinya akan kesulitan untuk menduplikat warna serupa. Jika kita perlu warna sama untuk keperluan lain, maka kita sendiri akan kerepotan.

Tetapi, jika kita mengerti kode warnanya, maka kita akan mudah untuk membuat warna yang persis sama.

Katakan saja, kita memiliki kode warna seperti #ff44dd. Ini adalah kode hexadecimal dan bermanfaat bagi desainer dan programer. Atau, untuk mereka yang kebetulan harus berurusan dengan warna – warna yang spesifik.

Pada HTML, kode ini polanya adalah #RRGGBB dengan R = red. G = Green dan B = Blue.

Atau, warna – warna primer.

Kode warna untuk “UMUM” lebih sering digunakan dengan nilai Hexadecimalnya. Meskipun begitu, ada juga nilai decimal RGB nya. Misalnya, yang kita pakai untuk mendesain di Corel atau Photoshop.

Secara lengkap, untuk pemrograman komputer, kode warna yang dipakai Hexadecimal, RGB, RGBA, HSL dan HSLA.

Kode warna Hexadecimal

Sistem bilangan 16

Ini adalah kode untuk bahasa mesin atau bahasa paling dasar di komputer. Nilai yang ada adalah 16 buah.

Dimulai dari 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

A adalah pengganti angka 10. Kode ini tidak boleh menggunakan angka dobel supaya tidak salah tafsir mesinnya.

Untuk kode warna hexadecimal tadi, angka ff44dd ini artinya ff bagian merah. 44 adalah bagian hijau dan dd adalah bagian biru.

Nilai 00 ( nol nol ) adalah intensitas terkecil ( tidak ada sama sekali ). FF adalah intensitas terbesar.

Contoh: #FF0000. Intensitas merah TERBESAR.

Intensitas hijau nol nol atau terkecil.

Intensitas biru adalah nol nol atau terkecil atau tidak ada samasekali.

Jadi, warnanya adalah merah. MERAH MURNI.

Sekarang, warna #00FF00. Intensitas terbesarnya HIJAU.

Intensitas merahnya nol nol atau 00. Intensitas birunya nol nol juga.

Catatan: Yang ada adalah nilai nol, bukan Huruf O. Karena basisnya hanya 16. Huruf terakhir hanya F saja.

Jadi, warnanya HIJAU MURNI.

Kalau #FFFF00, warnanya menjadi KUNING MURNI.

Karena merupakan campuran merah dan hijau.

Kode ini biasanya disebut juga kode HEX, HEX Code. 

Kode warna RGB ( Decimal RGB )

Sistem bilangan 10

Hanya ada 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 saja. Kode ini biasanya hanya ditulis sebagai RGB saja dan jarang ditulis sebagai Decimal RGB. 

Oke, jadi, ada HEXADECIMAL RGB dan DECIMAL RGB.

Yang terakhir biasanya ditulis sebagai RGB saja.

Kode warna DECIMAL RGB memiliki warna intensitas paling tinggi 255.

Intensitas warna terendah adalah 0 atau nol. 

Jadi, warna merah untuk DECIMAL RGB adalah 255, 0, 0 ( duaratus limapuluh lima, nol, nol ).

Kode warna RGBA

Kita akan mengkonversi kode warna Hexadecimal ke RGBA jika kita akan menggunakan opacity atau tingkat keburaman warna.

Opacity: Nilai 0% adalah TRANSPARAN SEMPURNA. Nilai 100% adalah TERLIHAT SEMPURNA. 

Atau, Nilai 0 ( nol ) artinya TRANSPARAN SEMPURNA dan nilai 1 ( satu ) adalah TERLIHAT SEMPURNA.

0,65 artinya 65%.

  • Contoh penggunaan:

Jika ada gambar mobil dan layer putih

Yang dibawah gambar mobil. Yang diatas layer atau lapisan warna putih.

Maka: Layer putih 0 maka yang terlihat gambar mobil. Layer putih 50 artinya gambar mobil agak buram tertutup putih. Layer putih 100 artinya yang layar putih terlihat putih sempurna.

Artinya, layer putih 100% berarti gambar mobil dibawah sama sekali tidak kelihatan.

Tetapi, ini digunakan hanya untuk tingkat lanjut saja. Untuk yang dasar, biasanya kita mengikuti aplikasi seperti Corel, Photoshop atau lainnya.

Jika aplikasi meminta kita untuk mengkonversi gambar ke RGBA, kita tinggal klik YES saja.

Untuk memberi layer tambahan, juga sudah ada settingnya.

Untuk pemrograman, terkadang memang kita memberi layer warna tambahan atau layer gambar untuk keperluan tertentu.

Layer warna penutup ini juga kita program bisa berubah opacity nya untuk mendapat efek visual yang bagus.

Misal, nilai RGBA adalah 51, 167, 59, 0.65

Nilai 51 adalah merah

Nilai 116 adalah Hijau

Nilai 59 adalah biru.

Angka 0.65 adalah opacity 65%.

HSL dan HSLA biasanya jarang digunakan saat mendesain dengan Corel atau Photoshop.

Tetapi, daripada penasaran, kita bahas sedikit soal HSL dan HSLA.

Kode Warna HSL ( Hue Saturation Lightness )

  • HUE: Derajat warna dalam lingkaran warna. Nilainya nol sampai 360.

Untuk ukurannya, 0 merah. 120 hijau. 240 biru.

  • SATURATION: Persentase kandungan warna abu – abu.

Nilainya. 0% adalah mengandung warna abu – abu FULL. Kandungan warna asli nol.

100% adalah FULL COLOR ASLI. Kandungan warna abu – abu nol.

  • LIGHTNESS: Persentase kandungan warna hitam dan putih

0% artinya kandungannya hitam.

100% artinya kandungannya putih.

Jadi, ketika ada kode warna seperti gambar dibawah ini, Anda sudah tahu artinya.

kode warna

Jadi, warna MERAH MURNI itu nilai derajatnya nol ( 0 ). Saturationnya 100% tanpa gradasi abu – abu.

Kemudian, antara putih dan hitam, ada ditengah atau 50%.

Nilai HSL MERAH MURNI : ( 0, 100%, 50% ).

Kode warna HSLA

 HSL dengan opacity. Seperti RGB dengan Opacity ( RGBA ). 

Nilainya adalah seperti ini:

HSLA ( 0, 100%, 50%, 065 ).  Nilai opacity yang ada adalah 0,65 atau 65% opacity.

Cara menggunakan CSS untuk HEXADECIMAL, RGB. RGBA, HSL dan HSLA

  • Cara menggunakan CSS untuk HEXADECIMAL

p {
color: #25547f;
}
  • Cara menggunakan / menulis CSS untuk RGB

p { color: rgb(42, 74, 131); }
  • Cara menggunakan / menulis CSS untuk RGBA

p { color: rgba(42, 74, 131, 1); }
  • Cara menggunakan / menulis CSS untuk HSL:

p { color: hsl(159, 44%, 43%); }
  • Cara menulis CSS untuk HSLa:

p { color: hsla(159, 44%, 43%, 1); }

Sekarang, kita sudah tahu aturan kode warna seperti ini. Jadi, yang namanya tabel kode warna atau daftar kode warna mungkin tidak terlalu penting juga. Tetapi, bisa kita gunakan untuk mencari warna secara cepat.

Tabel kode Warna lengkap

 

Kode Warna HTML Primer
000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

Tabel – tabel warna diatas belum memiliki nama. Ini tabel gradasi warna yang satu tingkat lebih rendah atau lebih tinggi.

Untuk tabel warna dibawah ini, ada tabel untuk warna – warna yang setidaknya, diberi nama oleh orang.

Tabel warna lengkap:

Nama Warna HTML HEX Color
Alice Blue #F0F8FF
Antique White #FAEBD7
Aqua #00FFFF
Aquamarine #7FFFD4
Azure #F0FFFF
Beige #F5F5DC
Bisque #FFE4C4
Black #000000
Blanched Almond #FFEBCD
Blue #0000FF
Blue Violet #8A2BE2
Brown #A52A2A
Burly Wood #DEB887
Cadet Blue #5F9EA0
Chartreuse #7FFF00
Chocolate #D2691E
Coral #FF7F50
Corn flower Blue #6495ED
Cornsilk #FFF8DC
Crimson #DC143C
Cyan #00FFFF
Dark Blue #00008B
Dark Cyan #008B8B
Dark Golden Rod #B8860B
Dark Gray #A9A9A9
Dark Grey #A9A9A9
Dark Green #006400
Dark Khaki #BDB76B
Dark Magenta #8B008B
Dark Olive Green #556B2F
Dark Orange #FF8C00
Dark Orchid #9932CC
Dark Red #8B0000
Dark Salmon #E9967A
Dark Sea Green #8FBC8F
Dark Slate Blue #483D8B
Dark Slate Gray #2F4F4F
Dark Slate Grey #2F4F4F
Dark Turquoise #00CED1
Dark Violet #9400D3
Deep Pink #FF1493
Deep Sky Blue #00BFFF
Dim Gray #696969
Dim Grey #696969
Dodger Blue #1E90FF
Fire Brick #B22222
Floral White #FFFAF0
Forest Green #228B22
Fuchs ia #FF00FF
Gainsboro #DCDCDC
Ghost White #F8F8FF
Gold #FFD700
Golden Rod #DAA520
Grey #808080
Green #008000
Green Yellow #ADFF2F
Honey Dew #F0FFF0
Hot Pink #FF69B4
Indian Red #CD5C5C
Indigo #4B0082
Ivory #FFFFF0
Khaki #F0E68C
Lavender #E6E6FA
Lavender Blush #FFF0F5
Lawn Green #7CFC00
Lemon Chiffon #FFFACD
Light Blue #ADD8E6
LightCoral #F08080
Light Cyan #E0FFFF
Light Golden Rod Yellow #FAFAD2
Light Grey #D3D3D3
Light Green #90EE90
Light Pink #FFB6C1
Light Salmon #FFA07A
Light Sea Green #20B2AA
Light Sky Blue #87CEFA
Light Slate Grey #778899
Light Steel Blue #B0C4DE
Light Yellow #FFFFE0
Lime #00FF00
Lime Green #32CD32
Linen #FAF0E6
Magenta #FF00FF
Maroon #800000
Medium Aqua Marine #66CDAA
Medium Blue #0000CD
Medium Orchid #BA55D3
Medium Purple #9370DB
Medium Sea Green #3CB371
Medium Slate Blue #7B68EE
Medium Spring Green #00FA9A
Medium Turquoise #48D1CC
Medium Violet Red #C71585
Midnight Blue #191970
Mint Cream #F5FFFA
Misty Rose #FFE4E1
Moccasin #FFE4B5
Navajo White #FFDEAD
Navy #000080
Old Lace #FDF5E6
Olive #808000
Olive Drab #6B8E23
Orange #FFA500
Orange Red #FF4500
Orchid #DA70D6
Pale Golden Rod #EEE8AA
Pale Green #98FB98
Pale Tu rquoise #AFEEEE
Pale Violet Red #DB7093
Papaya Whip #FFEFD5
Peach Puff #FFDAB9
Peru #CD853F
Pink #FFC0CB
Plum #DDA0DD
Powder Blue #B0E0E6
Purple #800080
Rebecca Purple #663399
Red #FF0000
Rosy Brown #BC8F8F
Royal Blue #4169E1
Saddle Brown #8B4513
Salmon #FA8072
Sandy Brown #F4A460
Sea Green #2E8B57
Sea Shell #FFF5EE
Sienna #A0522D
Silver #C0C0C0
Sky Blue #87CEEB
Slate Blue #6A5ACD
Slate Grey #708090
Tan #D2B48C
Snow #FFFAFA
Spring Green #00FF7F
Thistle #D8BFD8
Steel Blue #4682B4
Turquoise #40E0D0
Teal #008080
Tomato #FF6347
White Smoke #F5F5F5
Violet #EE82EE
Wheat #F5DEB3
Yellow #FFFF00
White #FFFFFF
Yellow Green #9ACD32

Sebenarnya, warna – warna diatas bisa saja kita modifikasi sendiri. Tetapi, minimal itulah warna – warna yang diberi nama oleh orang.

Untuk kode warna RGB, RGBa atau HSLA bisa dicari padanannya secara online. Banyak Tools yang bisa dipergunakan.

Saat ini, ada banyak tools untuk memilih warna. Misalnya saja di https://html-color-codes.info. Pada situs ini, kita bisa memilih warna dan mengupload gambar untuk diketahui kode warnanya.

Saat mengupload gambar, kita akan mengambil warna bagian tertentu gambar tersebut. Jangan khawatir jika warnanya bermacam – macam. Ada pointer untuk mengarahkan ke warna yang kita inginkan.

Pointer mouse kita geser ke bagian gambar yang kita ingin tahu warnanya. Akan keluar kode warnanya.

Untuk sekedar memilih warna, kita bisa mengarahkan pointer mouse ke warna yang kita pilih. Misal kita pilih merah. Kemudian, kita bisa menggesernya untuk mendapatkan gradasi warna yang kita inginkan. Misal, warna agak merah jambu.

Saat itu juga, akan keluar contoh warna beserta kode warna yang bersangkutan. Kita bisa copy paste dan simpan untuk catatan kita.

Jadi, besok – besok lagi, kita akan bisa mendapat warna yang pasti dan tidak berubah gradasinya. Atau, tidak kesulitan lagi mencocokkan warnanya satu per satu.

Jika Anda mau mempelajari soal warna lebih lanjut, bisa mempelajari tentang lingkaran warna. Gunanya, untuk mencari warna yang cocok dipadankan dengan warna tertentu.

Itulah sedikit gambaran mengenai Kode Warna. Semoga bermanfaat dan salam sukses luar biasa! Sampai Jumpa lagi!

Leave a reply