Blog

Kode Warna di HTML(Hypertext Markup Language) dan CSS(Cascading Style Sheets)

Skema warna adalah salah satu faktor yang menentukan keberhasilan atau kegagalan sebuah website.Pada pemrograman,pewarnaan dilakukan dengan menggunakan kode

Ada beberapa tipe kode warna yang biasanya digunakan digunakan di dalam permograman komputer yaitu bentuk hexadecimal,HSL,HSLA,RGBA DAN RGB.

Hexadesimal tersusun dari kombinasi huruf dan angka dengan diawali dengan tanda ‘#’. Sedangkan RGB terdiri dari 3 bagian angka yang terpisah oleh tanda koma. Kode warna pada HTML menggunakan HTML triplets. Setiap dua digit kode melambangkan warna-warna red (merah), green (hijau), blue (biru) atau #RRGGBB.

Background dari sebuah website juga bagian penting yang perlu diperhatikan.Dengan adanya CSS (Cascading Style Sheets),kita bisa membuat latar belakang halaman web dan entri lainnya.

Daftar Kode Warna HTML dan CSS

Di bawah ini daftar kode warna HTML & CSS yang dapat kita gunakan untuk mempercantik website. Tidak hanya mempercantik,banyak faktor lain yang dipengaruhi oleh warna.

Langsung saja inilah daftar kode warna CSS dan HTML yang bisa kita jadikan referensi untuk color branding atau web design :

Nama Warna :Yellow Green

Kode Heximal :#9ACD32

RGB :RGB (154, 205, 49)

Nama Warna :Yellow

Kode Heximal :#FFFF00

RGB :RGB (255, 255, 0)

Nama Warna :White Smoke

Kode Heximal :#F5F5F5

RGB :RGB (245, 245, 245)

Nama Warna :White

Kode Heximal :#FFFFFF

RGB :RGB (255, 255, 255)

Nama Warna :Wheat

Kode Heximal :#F5DEB3

RGB :RGB (245, 222, 179)

Nama Warna :Violet

Kode Heximal :#EE82EE

RGB :RGB (238, 130, 238)

Nama Warna :Turquoise

Kode Heximal :#40E0D0

RGB :RGB (64, 224, 208)

Nama Warna :Tomato

Kode Heximal :#FF6347

RGB :RGB (250, 99, 71)

Nama Warna :Thistle

Kode Heximal :#D8BFD8

RGB :RGB (216, 191, 216)

Nama Warna :Teal

Kode Heximal :#008080

RGB :RGB (26, 128, 127)

Nama Warna :Tan

Kode Heximal :#D2B48C

RGB :RGB (210, 180, 140)

Nama Warna :Steel Blue

Kode Heximal :#4682B4

RGB :RGB (70, 130, 180)

Nama Warna :Spring Green

Kode Heximal :#00FF7F

RGB :RGB (63, 255, 128)

Nama Warna :Snow

Kode Heximal :#FFFAFA

RGB :RGB (255, 250, 250)

Nama Warna :Slate Gray

Kode Heximal :#708090

RGB :RGB (112, 128, 145)

Nama Warna :Slate Blue

Kode Heximal :#6A5ACD

RGB :RGB (106, 90, 205)

Nama Warna :Sienna

Kode Heximal :#A0522D

RGB :RGB (160, 82, 45)

Nama Warna :Sky Blue

Kode Heximal :#87CEEB

RGB :RGB (135, 206, 235)

Nama Warna :Silver

Kode Heximal :#C0C0C0

RGB :RGB (192, 192, 192)

Nama Warna :Salmon

Kode Heximal :#FA8072

RGB :RGB (250, 128, 114)

Nama Warna :Sea Green

Kode Heximal :#2E8B57

RGB :RGB (46, 139, 87)

Nama Warna :Sea Shell

Kode Heximal :#FFF5EE

RGB :RGB (255, 245, 238)

Nama Warna :Saddle Brown

Kode Heximal :#8B4513

RGB :RGB (139, 69, 19)

Nama Warna :Sandy Brown

Kode Heximal :#F4A460

RGB :RGB (244, 164, 95)

Nama Warna :Royal Blue

Kode Heximal :#4169E1

RGB :RGB (65, 105, 225)

Nama Warna :Rosy Brown

Kode Heximal :#BC8F8F

RGB :RGB (188, 143, 142)

Nama Warna :Red

Kode Heximal :#FF0000

RGB :RGB (255, 0, 0)

Nama Warna :Rebecca Purple

Kode Heximal :#663399

RGB :RGB (102, 51, 153)

Nama Warna :Powder Blue

Kode Heximal :#B0E0E6

RGB :RGB (176, 224, 230)

Nama Warna :Purple

Kode Heximal :#800080

RGB :RGB (128, 0, 128)

Nama Warna :Plum

Kode Heximal :#DDA0DD

RGB :RGB (221, 160, 221)

Nama Warna :Pink

Kode Heximal :#FFC0CB

RGB :RGB (252, 192, 203)

Nama Warna :Peru

Kode Heximal :#CD853F

RGB :RGB (205, 133, 63)

Nama Warna :Papaya Whip

Kode Heximal :#FFEFD5

RGB :RGB (254, 239, 213)

Nama Warna :Peach Puff

Kode Heximal :#FFDAB9

RGB :RGB (253, 218, 185)

Nama Warna :Pale Turquoise

Kode Heximal :#AFEEEE

RGB :RGB (175, 238, 239)

Nama Warna :Pale Violet Red

Kode Heximal :#DB7093

RGB :RGB (219, 112, 147)

Nama Warna :Pale Golden Rod

Kode Heximal :#EEE8AA

RGB :RGB (238, 232, 170)

Nama Warna :Pale Green

Kode Heximal :#98FB98

RGB :RGB (152, 251, 153)

Nama Warna :Orchid

Kode Heximal :#DA70D6

RGB :RGB (218, 112, 214)

Nama Warna :Navy

Kode Heximal :#000080

RGB :RGB (0, 0, 128)

Nama Warna :Orange

Kode Heximal :#FFA500

RGB :RGB (252, 165, 3)

Nama Warna :Orange Red

Kode Heximal :#FF4500

RGB :RGB (250, 69, 1)

Nama Warna :Olive

Kode Heximal :#808000

RGB :RGB (128, 128, 1)

Nama Warna :Olive Drab

Kode Heximal :#6B8E23

RGB :RGB (107, 142, 35)

Nama Warna :Old Lace

Kode Heximal :#FDF5E6

RGB :RGB (253, 245, 230)

Nama Warna :Navajo White

Kode Heximal :#FFDEAD

RGB :RGB (254, 222, 173)

Nama Warna :Moccasin

Kode Heximal :#FFE4B5

RGB :RGB (254, 228, 181)

Nama Warna :Misty Rose

Kode Heximal :#FFE4E1

RGB :RGB (254, 228, 225)

Nama Warna :Midnight Blue

Kode Heximal :#191970

RGB :RGB (25, 25, 112)

Nama Warna :Mint Cream

Kode Heximal :#F5FFFA

RGB :RGB (245, 255, 250)

Nama Warna :Medium Violet Red

Kode Heximal :#C71585

RGB :RGB (199, 21, 133)

Nama Warna :Medium Spring Green

Kode Heximal :#00FA9A

RGB :RGB (62, 250, 153)

Nama Warna :Medium Turquoise

Kode Heximal :#48D1CC

RGB :RGB (72, 209, 204)

Nama Warna :Medium Blue

Kode Heximal :#0000CD

RGB :RGB (0, 0, 205)

Nama Warna :Medium Orchid

Kode Heximal :#BA55D3

RGB :RGB (186, 85, 211)

Nama Warna :Medium Slate Blue

Kode Heximal :#7B68EE

RGB :RGB (123, 103, 238)

Nama Warna :Medium Sea Green

Kode Heximal :#3CB371

RGB :RGB (60, 179, 113)

Nama Warna :Medium Purple

Kode Heximal :#9370DB

RGB :RGB (147, 112, 219)

Nama Warna :Medium Aqua Marine

Kode Heximal :#66CDAA

RGB :RGB (102, 205, 170)

Nama Warna :Maroon

Kode Heximal :#800000

RGB :RGB (128, 4, 0)

Nama Warna :Magenta

Kode Heximal :#FF00FF

RGB :RGB (249, 0, 255)

Nama Warna :Linen

Kode Heximal :#FAF0E6

RGB :RGB (250, 240, 230)

Nama Warna :Lime Green

Kode Heximal :#32CD32

RGB :RGB (50, 205, 50

Nama Warna :Lime

Kode Heximal :#00FF00

RGB :RGB (63, 255, 0)

Nama Warna :Light Sea Green

Kode Heximal :#20B2AA

RGB :RGB (40, 178, 170)

Nama Warna :Light Steel Blue

Kode Heximal :#B0C4DE

RGB :RGB (176, 196, 222)

Nama Warna :Light Yellow

Kode Heximal :#FFFFE0

RGB :RGB (255, 255, 224)

Nama Warna :Light Slate Gray

Kode Heximal :#778899

RGB :RGB (119, 136, 153)

Nama Warna :Light Sky Blue

Kode Heximal :#87CEFA

RGB :RGB (135, 206, 250)

Nama Warna :Light Salmon

Kode Heximal :#FFA07A

RGB :RGB (251, 160, 122)

Nama Warna :Light Pink

Kode Heximal :#FFB6C1

RGB :RGB (252, 182, 193)

Nama Warna :Light Green

Kode Heximal :#90EE90

RGB :RGB (144, 238, 144)

Nama Warna :Light Gray

Kode Heximal :#D3D3D3

RGB :RGB (211, 211, 211)

Nama Warna :Light Goldenrod Yellow

Kode Heximal :#FAFAD2

RGB :RGB (250, 250, 210)

Nama Warna :Light Cyan

Kode Heximal :#E0FFFF

RGB :RGB (224, 255, 255)

Nama Warna :Light Coral

Kode Heximal :#F08080

RGB :RGB (240, 128, 128)

Nama Warna :Light Blue

Kode Heximal :#ADD8E6

RGB :RGB (173, 216, 230)

Nama Warna :Lawn Green

Kode Heximal :#7CFC00

RGB :RGB (124, 252, 2)

Nama Warna :Lemon Chiffon

Kode Heximal :#FFFACD

RGB :RGB (255, 250, 205)

Nama Warna :Lavender

Kode Heximal :#E6E6FA

RGB :RGB (230, 230, 250)

Nama Warna :Lavender Blush

Kode Heximal :#FFF0F5

RGB :RGB (254, 240, 245)

Nama Warna :Indigo

Kode Heximal :#4B0082

RGB :RGB (75, 0, 130)

Nama Warna :Indian Red

Kode Heximal :#CD5C5C

RGB :RGB (205, 92, 92)

Nama Warna :Khaki

Kode Heximal :#F0E68C

RGB :RGB (240, 230, 140)

Nama Warna :Ivory

Kode Heximal :#FFFFF0

RGB :RGB (255, 255, 239)

Nama Warna :Hot Pink

Kode Heximal :#FF69B4

RGB :RGB (240, 255, 240)

Nama Warna :Honey Dew

Kode Heximal :#F0FFF0

RGB :RGB (240, 255, 240)

Nama Warna :Green Yellow

Kode Heximal :#ADFF2F

RGB :RGB (173, 255, 48)

Nama Warna :Green

Kode Heximal :#008000

RGB :RGB (27, 128, 1)

Nama Warna :Gray

Kode Heximal :#808080

RGB :RGB (128, 128, 128)

Nama Warna :Gold

Kode Heximal :#FFD700

RGB :RGB (253, 215, 3)

Nama Warna :Golden Rod

Kode Heximal :#DAA520

RGB :RGB (218, 165, 32)

Nama Warna :Gainsboro

Kode Heximal :#DCDCDC

RGB :RGB (220, 220, 220)

Nama Warna :Ghost White

Kode Heximal :#F8F8FF

RGB :RGB (248, 248, 255)

Nama Warna :Dim Gray

Kode Heximal :#696969

RGB :RGB (105, 105, 105)

Nama Warna :Fuchsia

Kode Heximal :#FF00FF

RGB :RGB (249, 0, 255)

Nama Warna :Forest Green

Kode Heximal :#228B22

RGB :RGB (34, 139, 35)

Nama Warna :Fire Brick

Kode Heximal :#B22222

RGB :RGB (178, 34, 33)

Nama Warna :Floral White

Kode Heximal :#FFFAF0

RGB :RGB (255, 250, 240)

Nama Warna :Dodger Blue

Kode Heximal :#1E90FF

RGB :RGB (30, 144, 255)

Nama Warna :Deep Pink

Kode Heximal :#FF1493

RGB :RGB (249, 19, 147)

Nama Warna :Deep Sky Blue

Kode Heximal :#00BFFF

RGB :RGB (43, 191, 254)

Nama Warna :Dark Violet

Kode Heximal :#9400D3

RGB :RGB (148, 0, 211)

Nama Warna :Dark Turquoise

Kode Heximal :#00CED1

RGB :RGB (48, 206, 209)

Nama Warna :Dark Slate Gray

Kode Heximal :#2F4F4F

RGB :RGB (47, 79, 79)

Nama Warna :Dark Slate Blue

Kode Heximal :#483D8B

RGB :RGB (72, 61, 139)

Nama Warna :Dark Sea Green

Kode Heximal :#8FBC8F

RGB :RGB (143, 188, 144)

Nama Warna :Dark Salmon

Kode Heximal :#E9967A

RGB :RGB (233, 150, 122)

Nama Warna :Dark Red

Kode Heximal :#8B0000

RGB :RGB (139, 5, 0)

Nama Warna :Dark Orchid

Kode Heximal :#9932CC

RGB :RGB (153, 50, 204)

Nama Warna :Dark Orange

Kode Heximal :#FF8C00

RGB :RGB (251, 140, 1)

Nama Warna :Dark Olive Green

Kode Heximal :#556B2F

RGB :RGB (85, 107, 47)

Nama Warna :Dark Magenta

Kode Heximal :#8B008B

RGB :RGB (139, 0, 140)

Nama Warna :Dark Khaki

Kode Heximal :#BDB76B

RGB :RGB (189, 183, 107)

Nama Warna :Dark Green

Kode Heximal :#006400

RGB :RGB (19, 100, 0)

Nama Warna :Dark Gray

Kode Heximal :#A9A9A9

RGB :RGB (169, 169, 169)

Nama Warna :Dark Golden Rod

Kode Heximal :#B8860B

RGB :RGB (184, 134, 11)

Nama Warna :Dark Cyan

Kode Heximal :#008B8B

RGB :RGB (29, 139, 139)

Nama Warna :Dark Blue

Kode Heximal :#00008B

RGB :RGB (0, 0, 139)

Nama Warna :Cyan

Kode Heximal :#00FFFF

RGB :RGB (62, 254, 255)

Nama Warna :Crimson

Kode Heximal :#DC143C

RGB :RGB (220, 20, 60)

Nama Warna :Cornsilk

Kode Heximal :#FFF8DC

RGB :RGB (225, 248, 220)

Nama Warna :Cornflower Blue

Kode Heximal :#6495ED

RGB :RGB (100, 149, 237)

Nama Warna :Coral

Kode Heximal :#FF7F50

RGB :RGB (251, 127, 80)

Nama Warna :Chartreuse

Kode Heximal :#7FFF00

RGB :RGB (127, 255, 1)

Nama Warna :Chocolate

Kode Heximal :#D2691E

RGB :RGB (210, 105, 30)

Nama Warna :Cadet Blue

Kode Heximal :#5F9EA0

RGB :RGB (95, 158, 160)

Nama Warna :Burly Wood

Kode Heximal :#DEB887

RGB :RGB (222, 184, 135)

Nama Warna :Brown

Kode Heximal :#A52A2A

RGB :RGB(165, 42, 42)

Nama Warna :Blue Violet

Kode Heximal :#8A2BE2

RGB :RGB (138, 43, 226)

Nama Warna :Blue

Kode Heximal :#0000FF

RGB :RGB (0, 0, 255)

Nama Warna :Black

Kode Heximal :#000000

RGB :RGB (0, 0, 0)

Nama Warna :Aquamarine

Kode Heximal :#7FFFD4

RGB :RGB (115, 255, 216

Nama Warna :Beige

Kode Heximal :#F5F5DC

RGB :RGB (245, 245, 223)

Nama Warna :Bisque

Kode Heximal :#FFE4C4

RGB :RGB (255, 227, 200)

Nama Warna :Blanched Almond

Kode Heximal :#FFEBCD

RGB :RGB (255, 234, 208)

Nama Warna Azure

Kode Heximal :#F0FFFF

RGB :RGB (239, 255, 255)

Nama Warna :Aqua

Kode Heximal :#00FFFF

RGB :RGB (0, 255, 254)

Nama Warna :Alice Blue

Kode Heximal :#F0F8FF

RGB :RGB (240, 248, 254)

Nama Warna :Antique White

Kode Heximal :#FAEBD7

RGB :RGB (251, 235, 217)

Daftar kode warna diatas setidaknya membantu kita untuk memahami cara mewarnai website dan menerapkannya agar pengunjung nyaman dan betah untuk mengunjungi website kita.

Selain menggunakan kode warna,kita dapat menggunakan generator untuk menentukan kode warna apa saja yang bisa digunakan.Kita dapat menggunakan generator warna yang disediakan oleh beberapa website di bawah ini.

W3School HTML Color Picker

Situs ini dapat digunakan untuk memilih warna berdasarkan warna dasar. Kita dapat memilih tingkat saturasi dan melihat langsung (preview) hasilnya,terdapat juga pilihan untuk memasukkan warna berdasarkan kode dan juga memunculkan jendela HTML 5 untuk pemilihan warna.

HTML Color Code

Situs ini menyediakan tampilan pemilihan warna.Kita tinggal mengarahkan kursor ke dalam tabel warna atau menggeser slider untuk mendapatkan warna yang sesuai dengan kode warna dalam bentuk hexadecimal.

Colors and Skillshare

Situs ini digunakan sebagai alat schema generator. Jika kita seorang desainer,situs ini memberikan saran schema yang sesuai dengan kebutuhan & tersedia juga kode hexadecimal yang bisa digunakan ke dalam website.

Cara Penggunaan Kode Warna

Penggunaan kode warna untuk HTML BACKGROUND

Kita bisa menerapkan kode warna HEX langsung pada elemen HTML <body> menggunakan atribut style seperti di bawah ini.

</body>

Namun, perlu diingat bahwa langkah-langkahnya mungkin berbeda, tergantung pada elemen-elemen tersebut sebaris atau bertingkat.Metode ini digunakan untuk menata hampir semua elemen HTML.

Penggunaan kode warna untuk HTML FONT

untuk mengubah warna pada satu atau sebagian kecil teks, kamu bisa menggunakan tag font yang lama dengan format:

Atau bisa juga seperti ini

Sejumlah browser baru memungkinkan kita untuk memberi nama warna, seperti yang dicontohkan di atas, tetapi opsi yang kita punya lebih terbatas.

Memilih warna untuk website bukan berarti memilih warna yang kita suka.Kita harus bisa memastikan juga warna yang kita pilih bisa memperkuat website atau merek bisnis yang kita jalankan.

Warna dapat mempengaruhi website kita,karena warna mampu menciptakan ide,pesan,dan memicu minat klien atau pengunjung.

Sekian artikel kali ini,semoga bisa membantu anda dalam memilih kode warna untuk website anda 🙂

selamat mencoba ya