Daftar Kode Warna HTML CSS Lengkap (Full Colour)

kode warna css dan html

Setiap orang memiliki reaksi yang berbeda terhadap stimulus eksternal sehingga persepsi warna antara satu individu dan lainnya pun juga berbeda. Itulah mengapa web designer perlu memahami betul kombinasi dan penggunaan kode warna CSS dan HTML pada sebuah website.

Skema warna adalah salah satu faktor yang menentukan keberhasilan atau kegagalan sebuah website. Warna adalah elemen yang dapat memberikan dampak secara psikologis bagi si pengamat.

Lalu, apa sih yang dimaksud dengan kode warna CSS? Apa sih yang dimaksud dengan kode warna HTML?

Kode warna HTML (Hypertext Markup Language) ditandai dengan enam karakter setelah tagar (#), misalnya #000000. Warna HTML diatur dengan menggunakan kode HEX yang merupakan gagasan heksadesimal dari RGB.

Perlu Sobat Jagoan ingat bahwa warna diwakili oleh tiga kelompok angka HEX, yang mana setiap kelompok merepresentasikan warna tertentu.

Tiga warna tersebut antara lain merah, hijau, dan biru dan model warna yang tersusun dari ketiganya disebut dengan RGB (Red, Green, Blue).

Background dari sebuah website merupakan bagian penting yang perlu mendapat perhatian juga. Dengan bantuan CSS (Cascading Style Sheets), kamu bisa membuat latar belakang halaman web dan entri lainnya.

Tidak hanya itu, CSS juga memungkinkan kamu untuk menggunakan sekitarnya 16.777.216 warna yang masing-masing diwakili oleh nama, kode RGB, atau kode HEX.

Daftar Kode Warna HTML dan CSS

kode warna css html

Berikut adalah kode warna CSS dan HTML tinggal klik dan copas yang bisa kamu jadikan referensi untuk color branding atau web design.

 Nama WarnaKode Warna HeximalKode Warna RGB
.
Alice Blue#F0F8FFRGB (240, 248, 254)
.
Antique White#FAEBD7RGB (251, 235, 217)
.
Aqua#00FFFFRGB (0, 255, 254)
.
Aquamarine#7FFFD4RGB (115, 255, 216)
.
Azure#F0FFFFRGB (239, 255, 255)
.
Beige#F5F5DCRGB (245, 245, 223)
.
Bisque#FFE4C4RGB (255, 227, 200)
j.h
Black#000000RGB (0, 0, 0)
.
Blanched Almond#FFEBCDRGB (255, 234, 208)
.
Blue#0000FFRGB (0, 0, 255)
.
Blue Violet#8A2BE2RGB (138, 43, 226)
.
Brown#A52A2ARGB(165, 42, 42)
.
Burly Wood#DEB887RGB (222, 184, 135)
.
Cadet Blue#5F9EA0RGB (95, 158, 160)
.
Chartreuse#7FFF00RGB (127, 255, 1)
.
Chocolate#D2691ERGB (210, 105, 30)
.
Coral#FF7F50RGB (251, 127, 80)
.
Cornflower Blue#6495EDRGB (100, 149, 237)
.
Cornsilk#FFF8DCRGB (225, 248, 220)
.
Crimson#DC143CRGB (220, 20, 60)
.
Cyan#00FFFFRGB (62, 254, 255)
.
Dark Blue#00008BRGB (0, 0, 139)
.
Dark Cyan#008B8BRGB (29, 139, 139)
.
Dark Golden Rod#B8860BRGB (184, 134, 11)
.
Dark Gray#A9A9A9RGB (169, 169, 169)
.
Dark Green#006400RGB (19, 100, 0)
.
Dark Khaki#BDB76BRGB (189, 183, 107)
.
Dark Magenta#8B008BRGB (139, 0, 140)
.
Dark Olive Green#556B2FRGB (85, 107, 47)
.
Dark Orange#FF8C00RGB (251, 140, 1)
.
Dark Orchid#9932CCRGB (153, 50, 204)
.
Dark Red#8B0000RGB (139, 5, 0)
.
Dark Salmon#E9967ARGB (233, 150, 122)
.
Dark Sea Green#8FBC8FRGB (143, 188, 144)
.
Dark Slate Blue#483D8BRGB (72, 61, 139)
.
Dark Slate Gray#2F4F4FRGB (47, 79, 79)
.
Dark Turquoise#00CED1RGB (48, 206, 209)
.
Dark Violet#9400D3RGB (148, 0, 211)
.
Deep Pink#FF1493RGB (249, 19, 147)
.
Deep Sky Blue#00BFFFRGB (43, 191, 254)
.
Dim Gray#696969RGB (105, 105, 105)
.
Dodger Blue#1E90FFRGB (30, 144, 255)
.
Fire Brick#B22222RGB (178, 34, 33)
.
Floral White#FFFAF0RGB (255, 250, 240)
.
Forest Green#228B22RGB (34, 139, 35)
.
Fuchsia#FF00FFRGB (249, 0, 255)
.
Gainsboro#DCDCDCRGB (220, 220, 220)
.
Ghost White#F8F8FFRGB (248, 248, 255)
.
Gold#FFD700RGB (253, 215, 3)
.
Golden Rod#DAA520RGB (218, 165, 32)
.
Gray#808080RGB (128, 128, 128)
.
Green#008000RGB (27, 128, 1)
.
Green Yellow#ADFF2FRGB (173, 255, 48)
.
Honey Dew#F0FFF0RGB (240, 255, 240)
.
Hot Pink#FF69B4RGB (240, 255, 240)
.
Indian Red#CD5C5CRGB (205, 92, 92)
.
Indigo#4B0082RGB (75, 0, 130)
.
Ivory#FFFFF0RGB (255, 255, 239)
.
Khaki#F0E68CRGB (240, 230, 140)
.
Lavender#E6E6FARGB (230, 230, 250)
.
Lavender Blush#FFF0F5RGB (254, 240, 245)
.
Lawn Green#7CFC00RGB (124, 252, 2)
.
Lemon Chiffon#FFFACDRGB (255, 250, 205)
.
Light Blue#ADD8E6RGB (173, 216, 230)
.
Light Coral#F08080RGB (240, 128, 128)
.
Light Cyan#E0FFFFRGB (224, 255, 255)
.
Light Goldenrod Yellow#FAFAD2RGB (250, 250, 210)
.
Light Gray#D3D3D3RGB (211, 211, 211)
.
Light Green#90EE90RGB (144, 238, 144)
.
Light Pink#FFB6C1RGB (252, 182, 193)
.
Light Salmon#FFA07ARGB (251, 160, 122)
.
Light Sea Green#20B2AARGB (40, 178, 170)
.
Light Sky Blue#87CEFARGB (135, 206, 250)
.
Light Slate Gray#778899RGB (119, 136, 153)
.
Light Steel Blue#B0C4DERGB (176, 196, 222)
.
Light Yellow#FFFFE0RGB (255, 255, 224)
.
Lime#00FF00RGB (63, 255, 0)
.
Lime Green#32CD32RGB (50, 205, 50)
.
Linen#FAF0E6RGB (250, 240, 230)
.
Magenta#FF00FFRGB (249, 0, 255)
.
Maroon#800000RGB (128, 4, 0)
.
Medium Aqua Marine#66CDAARGB (102, 205, 170)
.
Medium Blue#0000CDRGB (0, 0, 205)
.
Medium Orchid#BA55D3RGB (186, 85, 211)
.
Medium Purple#9370DBRGB (147, 112, 219)
.
Medium Sea Green#3CB371RGB (60, 179, 113)
.
Medium Slate Blue#7B68EERGB (123, 103, 238)
.
Medium Spring Green#00FA9ARGB (62, 250, 153)
.
Medium Turquoise#48D1CCRGB (72, 209, 204)
.
Medium Violet Red#C71585RGB (199, 21, 133)
.
Midnight Blue#191970RGB (25, 25, 112)
.
Mint Cream#F5FFFARGB (245, 255, 250)
.
Misty Rose#FFE4E1RGB (254, 228, 225)
.
Moccasin#FFE4B5RGB (254, 228, 181)
.
Navajo White#FFDEADRGB (254, 222, 173)
.
Navy#000080RGB (0, 0, 128)
.
Old Lace#FDF5E6RGB (253, 245, 230)
.
Olive#808000RGB (128, 128, 1)
.
Olive Drab#6B8E23RGB (107, 142, 35)
.
Orange#FFA500RGB (252, 165, 3)
.
Orange Red#FF4500RGB (250, 69, 1)
.
Orchid#DA70D6RGB (218, 112, 214)
.
Pale Golden Rod#EEE8AARGB (238, 232, 170)
.
Pale Green#98FB98RGB (152, 251, 153)
.
Pale Turquoise#AFEEEERGB (175, 238, 239)
.
Pale Violet Red#DB7093RGB (219, 112, 147)
.
Papaya Whip#FFEFD5RGB (254, 239, 213)
.
Peach Puff#FFDAB9RGB (253, 218, 185)
.
Peru#CD853FRGB (205, 133, 63)
.
Pink#FFC0CBRGB (252, 192, 203)
.
Plum#DDA0DDRGB (221, 160, 221)
.
Powder Blue#B0E0E6RGB (176, 224, 230)
.
Purple#800080RGB (128, 0, 128)
.
Rebecca Purple#663399RGB (102, 51, 153)
.
Red#FF0000RGB (255, 0, 0)
.
Rosy Brown#BC8F8FRGB (188, 143, 142)
.
Royal Blue#4169E1RGB (65, 105, 225)
.
Saddle Brown#8B4513RGB (139, 69, 19)
.
Salmon#FA8072RGB (250, 128, 114)
.
Sandy Brown#F4A460RGB (244, 164, 95)
.
Sea Green#2E8B57RGB (46, 139, 87)
.
Sea Shell#FFF5EERGB (255, 245, 238)
.
Sienna#A0522DRGB (160, 82, 45)
.
Silver#C0C0C0RGB (192, 192, 192)
.
Sky Blue#87CEEBRGB (135, 206, 235)
.
Slate Blue#6A5ACDRGB (106, 90, 205)
.
Slate Gray#708090RGB (112, 128, 145)
.
Snow#FFFAFARGB (255, 250, 250)
.
Spring Green#00FF7FRGB (63, 255, 128)
.
Steel Blue#4682B4RGB (70, 130, 180)
.
Tan#D2B48CRGB (210, 180, 140)
.
Teal#008080RGB (26, 128, 127)
.
Thistle#D8BFD8RGB (216, 191, 216)
.
Tomato#FF6347RGB (250, 99, 71)
.
Turquoise#40E0D0RGB (64, 224, 208)
.
Violet#EE82EERGB (238, 130, 238)
.
Wheat#F5DEB3RGB (245, 222, 179)
.
White#FFFFFFRGB (255, 255, 255)
.
White Smoke#F5F5F5RGB (245, 245, 245)
.
Yellow#FFFF00RGB (255, 255, 0)
.
Yellow Green#9ACD32RGB (154, 205, 49)
Cek Konten Lainnya:
Apa itu Landing Page? Ini Cara Membuat & Bedanya dengan Website

Kombinasi Kode Warna untuk Website

Untuk kamu yang kini sibuk mencari kombinasi kode warna untuk website atau UI (User Interface), congratulations, kamu datang ke tempat yang tepat.

Kami telah mengumpulkan daftar skema warna yang unik dan menarik dari beberapa website yang sempat mendapatkan penghargaan di ajang kompetisi web design.

Cloud VPS

Daftar ini mencakup berbagai skema warna seperti elegant, bold, earthy, dan masih banyak lagi. Kamu bisa menggunakan salah satu atau bahkan beberapa dari daftar di bawah ini sebagai inspirasi.

Elegant Yet Approachable

visme.co

Perpaduan unik dari warna kulit dan warna yang lebih elegan seperti dark imperial blue dan ruby membuat skema warna ini ideal untuk desain website yang bertujuan untuk menyampaikan pesan tertentu. Nuansa yang ditampilkan cenderung elegan namun masih tergolong menyenangkan.

Artsy and Creative

visme.co

Kombinasi warna yang digunakan pada skema ini adalah goldenrod, vermillion, biru tua, dan Dutch white yang dapat menghidupkan desain bernuansa artistik dan kreatif. Kombinasi warna ini cocok digunakan untuk website yang menyimpan arsip online karya musik.

Red and Lively

visme.co

Dasar warna yang digunakan pada skema warna ini adalah warna merah pada Bendera Polandia, dan dibarengi dengan kombinasi antara warna merah tua dengan merah muda gelap di atas background abu-abu terang. Skema warna ini menawarkan nuansa yang hidup dan minimalis.

Sleek and Futuristic

visme.co

Kombinasi menarik dari safir biru, abu-abu gunmetal, dan platinum di satu sisi dibarengi dengan kombinasi peach-orange dan cokelat di sisi lainnya menawarkan skema warna yang modern dan rapi. Skema warna ini cocok digunakan oleh website yang memiliki konten tentang teknologi atau ide-ide futuristik.

Texturized and Dynamics

visme.co

Warna-warna seperti sienna gelap, ash, dan semburat violet merah membuat skema warna ini wajib dimiliki oleh kamu yang mencari tampilan dan nuansa yang elegan, futuristik, dan dinamis.

Cek Konten Lainnya:
10+ Cara Membuat Website untuk Bisnis Paling Mudah

Kombinasi warna ini cukup fleksibel dan dapat digunakan dalam berbagai macam proyek, mulai dari laporan perusahaan yang tampak modern hingga majalah dan konten editorial yang sederhana.

Cara Mengetahui Kode Warna HTML

Untuk mengetahui kode warna HTML website, kamu dapat menggunakan beberapa cara berikut:

Menggunakan Tabel Kode Warna HTML

Ada banyak tabel kode warna HTML yang tersedia secara online. Kamu dapat mencari “HTML color code chart” atau “HTML color picker” di mesin pencari untuk menemukan tabel yang menunjukkan berbagai kode warna HTML beserta contohnya.

Menggunakan alat pemilih warna (color picker) pada browser

Banyak browser web modern dilengkapi dengan alat pemilih warna bawaan. Kamu dapat mengklik kanan pada elemen atau area tertentu pada halaman web, lalu pilih opsi seperti “Inspect” atau “Inspect Element” untuk membuka panel pengembang. Di panel pengembang, biasanya terdapat alat pemilih warna yang memungkinkan kamu untuk melihat kode warna HTML dari elemen yang dipilih.

Menggunakan perangkat lunak pengembangan web

Jika kamu menggunakan perangkat lunak pengembangan web seperti Adobe Photoshop, Adobe Illustrator, atau perangkat lunak serupa, kamu dapat menggunakan alat pemilih warna yang tersedia di dalamnya. Alat ini biasanya menyediakan kode warna HTML yang sesuai dengan warna yang kamu pilih.

Menggunakan situs web pemilih warna online

Ada juga banyak situs web yang menawarkan alat pemilih warna online yang dapat membantu Anda menemukan dan mengetahui kode warna HTML.
Beberapa situs web populer termasuk ColorHexa (https://www.colorhexa.com/), ColorPicker (https://imagecolorpicker.com/), atau HTML Color Codes (https://htmlcolorcodes.com/).

Dengan menggunakan salah satu cara di atas, kamu dapat dengan mudah menemukan dan mengetahui kode warna HTML yang Anda perlukan.

Cek Konten Lainnya:
Core Web Vitals: Definisi, Metrik, dan Tools

Cara Penggunaan Kode Warna

Penggunaan kode warna HTML tidak hanya membuat website kamu terlihat lebih menarik, tetapi juga meningkatkan peluang pengunjung untuk datang kembali.

1. Penggunaan Kode Warna untuk HTML Font

Untuk mengubah warna teks pada seluruh halaman website, kamu bisa mendefinisikannya di tag <body>. Sedangkan untuk mengubah warna pada satu atau sebagian kecil teks, kamu bisa menggunakan tag font yang lama dengan format:

<font color = “# ff0000”> text </font>

Warna dalam HTML harus didefinisikan sebagai kode HEX, yang merupakan kode enam digit yang mewakili jumlah warna merah, hijau, dan biru (RGB), misal:

<font color = “green”> text </font>

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

Baca juga: 22+ Font Keren untuk Website yang Bagus & Gratis

2. Penggunaan Kode Warna untuk HTML Background

Mengubah warna background halaman web sebenarnya cukup sederhana. Cara pertama dan paling populer adalah dengan menggunakan kode warna HEX dengan properti background-color.

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

<body style=”background-color:#FF0000;”>

</body>

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

 

Buat Website Lebih Mudah dengan Dukungan Banyak Bahasa Pemrogramman

buat website mudah dengan support banyak bahasa pemrogramman

Setelah kamu mengetahui kode warna HTML dan CSS, kini kamu bisa mulai praktik untuk coding di website secara langsung.

Kamu bisa mulai dengan memilih hosting terbaik dengan support terbaik untuk para developer dengan didukung bahasa pemrogramman populer seperti PHP, Laravel, SSH Acess, GIT, Phyton dan Node JS.

Dapatkan hosting dengan support terbaik untuk para developer di Cloud Hosting dari Jagoan Hosting.

Closing Thoughts

Pentingnya desain warna bagi suatu website berkenaan dengan pentingnya warna bagi pikiran manusia. Warna memiliki kemampuan untuk menciptakan ide, menyampaikan pesan, memicu minat, dan menghasilkan emosi tertentu.

Misalnya, warna-warna cerah cenderung membuat suasana hati yang bahagia dan positif, sedangkan warna-warna gelap cenderung memproyeksikan sebaliknya.

Memilih warna untuk website bukan berarti memilih warna yang kamu suka. Kamu harus bisa memastikan bahwa warna yang kamu pilih bisa memperkuat website atau merek bisnis kamu.

To conclude, warna adalah alat yang ampuh dalam membangun situs web yang sukses karena dapat digunakan untuk menghubungkan kamu dengan calon klien. Jangan lupa untuk memilih domain murah pilihanmu dengan kami ya, Sob!

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

You May Also Like
Freelance Developer di Jagoan Hosting
Read More
Jadi Jagoan Developer, Penawaran Menarik untuk Para Freelance Developer Indonesia
Ada penawaran menarik untuk para freelance developer kesayangan Jagoan Hosting, nih! Sebagai usaha untuk memberdayakan para Sobat Jagoan…
cara backup website wordpress
Read More
3 Cara Backup Website WordPress (Manual, Plugin, cPanel)
Halo, Sob! Banyak orang pasti setuju jika cara backup website WordPress adalah salah satu kemampuan dasar yang harus…