50 Kode Warna CSS dan Contoh Penggunaannya

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan dan formatting dokumen HTML. Salah satu aspek penting dalam CSS adalah pengaturan warna. Warna dalam CSS dapat didefinisikan menggunakan berbagai format seperti nama warna, kode HEX, RGB, atau HSL.

Format Penulisan Warna di CSS

Ada beberapa cara untuk mendefinisikan warna dalam CSS:

1. Nama Warna: Menggunakan nama warna seperti red, blue, green
2. Kode HEX: Format 6 digit hexadecimal seperti #FF0000 (merah)
3. RGB: Format RGB seperti rgb(255, 0, 0)
4. RGBA: Format RGB dengan transparansi seperti rgba(255, 0, 0, 0.5)

50 Kode Warna CSS Populer

Berikut adalah 50 warna yang paling sering digunakan dalam web development:

• Red (Merah): #FF0000 | rgb(255, 0, 0)
• Blue (Biru): #0000FF | rgb(0, 0, 255)
• Green (Hijau): #008000 | rgb(0, 128, 0)
• Yellow (Kuning): #FFFF00 | rgb(255, 255, 0)
• Orange (Oranye): #FFA500 | rgb(255, 165, 0)
• Purple (Ungu): #800080 | rgb(128, 0, 128)
• Pink (Merah Muda): #FFC0CB | rgb(255, 192, 203)
• Brown (Cokelat): #A52A2A | rgb(165, 42, 42)
• Black (Hitam): #000000 | rgb(0, 0, 0)
• White (Putih): #FFFFFF | rgb(255, 255, 255)
• Gray (Abu-abu): #808080 | rgb(128, 128, 128)
• Cyan (Sian): #00FFFF | rgb(0, 255, 255)
• Magenta: #FF00FF | rgb(255, 0, 255)
• Lime (Hijau Terang): #00FF00 | rgb(0, 255, 0)
• Navy (Biru Dongker): #000080 | rgb(0, 0, 128)
• Teal (Hijau Kebiruan): #008080 | rgb(0, 128, 128)
• Gold (Emas): #FFD700 | rgb(255, 215, 0)
• Silver (Perak): #C0C0C0 | rgb(192, 192, 192)
• Coral (Koral): #FF7F50 | rgb(255, 127, 80)
• Violet (Violet): #EE82EE | rgb(238, 130, 238)
• Maroon (Marun): #800000 | rgb(128, 0, 0)
• Olive (Zaitun): #808000 | rgb(128, 128, 0)
• Indigo: #4B0082 | rgb(75, 0, 130)
• Turquoise (Pirus): #40E0D0 | rgb(64, 224, 208)
• Beige: #F5F5DC | rgb(245, 245, 220)
• Salmon: #FA8072 | rgb(250, 128, 114)
• Chocolate (Cokelat Tua): #D2691E | rgb(210, 105, 30)
• Aquamarine: #7FFFD4 | rgb(127, 255, 212)
• Crimson: #DC143C | rgb(220, 20, 60)
• Khaki: #F0E68C | rgb(240, 230, 140)
• Plum: #DDA0DD | rgb(221, 160, 221)
• Sky Blue (Biru Langit): #87CEEB | rgb(135, 206, 235)
• Lavender: #E6E6FA | rgb(230, 230, 250)
• Orchid: #DA70D6 | rgb(218, 112, 214)
• Chartreuse: #7FFF00 | rgb(127, 255, 0)
• Tan: #D2B48C | rgb(210, 180, 140)
• Rosy Brown: #BC8F8F | rgb(188, 143, 143)
• Moccasin: #FFE4B5 | rgb(255, 228, 181)
• Sea Green: #2E8B57 | rgb(46, 139, 87)
• Steel Blue: #4682B4 | rgb(70, 130, 180)
• Peach Puff: #FFDAB9 | rgb(255, 218, 185)
• Deep Sky Blue: #00BFFF | rgb(0, 191, 255)
• Sienna: #A0522D | rgb(160, 82, 45)
• Dark Green: #006400 | rgb(0, 100, 0)
• Fire Brick: #B22222 | rgb(178, 34, 34)
• Slate Gray: #708090 | rgb(112, 128, 144)
• Thistle: #D8BFD8 | rgb(216, 191, 216)
• Forest Green: #228B22 | rgb(34, 139, 34)
• Wheat: #F5DEB3 | rgb(245, 222, 179)
• Tomato: #FF6347 | rgb(255, 99, 71)

Contoh Penggunaan Warna dalam CSS

Berikut adalah berbagai contoh penggunaan warna dalam CSS dengan penjelasan:

Contoh 1: Menggunakan Inline CSS

Penjelasan: Jika kita ingin membuat tulisan berwarna merah menggunakan inline CSS

<p style=”color: red;”>Tulisan ini akan berwarna merah</p>

Contoh 2: Menggunakan Internal CSS dengan Kode HEX

Penjelasan: Jika kita ingin membuat semua paragraf berwarna biru menggunakan kode HEX

<style>

  p {

color: #0000FF;

  }

</style>

Contoh 3: Mengubah Warna Background

Penjelasan: Jika background div akan berwarna hijau dan teks putih

<div style=”background-color: green; color: white;”>Teks putih dengan background hijau</div>

Pemahaman tentang kode warna CSS sangat penting dalam pengembangan web. Dengan menguasai berbagai format penulisan warna seperti nama warna, HEX, RGB, dan RGBA, developer dapat menciptakan tampilan website yang menarik dan profesional