Beranda / CSS / Pemrograman / Web

Panduan Lengkap CSS Colors: Biar Web Kamu Makin Hidup! (Tutorial CSS Part 6)

Oleh Sopyan Posting Komentar
Logo CSS
Gambar 6.0 : Logo CSS

Warna itu penting banget dalam desain web. Bayangin aja kalau semua halaman web cuma hitam putih—bosenin banget, kan? Nah, di sinilah CSS Colors berperan. Mulai dari mewarnai teks, latar belakang, sampai border, semuanya bisa kamu atur sesuai selera.

Di artikel ini, kita bakal bahas:

  1. CSS Color Names
  2. CSS Background Color
  3. CSS Text Color
  4. CSS Border Color
  5. CSS Color Values

Yuk, kita bahas satu per satu!

1. CSS Color Names: Nama-Nama Warna yang Siap Pakai

CSS udah nyediain banyak nama warna yang bisa langsung kamu pakai. Gak perlu mikir kode ribet—cukup tulis aja nama warnanya.

Contoh:

h1 {
  color: red;
}

div {
  background-color: lightblue;
}

Contoh dengan internal CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: red;
    }
    div {
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <h1>Judul Berwarna Merah</h1>
  <div>Ini latar belakangnya light blue</div>
</body>
</html>

Hasilnya:

Contoh CSS Color Names
Gambar 6.1 : Contoh CSS Color Name

Beberapa nama warna yang populer:

  • red
  • blue
  • green
  • yellow
  • black
  • white
  • gray
  • orange
  • purple
  • pink

Totalnya ada 140+ nama warna yang bisa kamu pakai. Praktis banget, kan?

2. CSS Background Color: Warnai Latar Belakang Sesuai Mood

Mau bikin bagian tertentu jadi lebih menarik? Gunakan background-color.

Contoh:

body {
  background-color: #f0f0f0;
}

.card {
  background-color: rgba(255, 255, 255, 0.8);
}

Contoh menggunakan internal CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #f0f0f0;
    }
    .card {
      background-color: rgba(255, 255, 255, 0.8);
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="card">Ini adalah card dengan latar semi-transparan</div>
</body>
</html>

Hasilnya:

Contoh CSS Background Color
Gambar 6.2 : Contoh CSS Background Color

Tips: Warna latar belakang yang soft biasanya bikin pengunjung lebih nyaman baca konten kamu.

3. CSS Text Color: Biar Teks Lebih Menonjol

Teks itu isi utama dari sebuah web. Makanya penting banget untuk kasih warna yang tepat.

Contoh:

p {
  color: #333333;
}

a {
  color: blue;
}

Contoh menggunakan internal CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: #333333;
    }
    a {
      color: blue;
    }
  </style>
</head>
<body>
  <p>Ini paragraf dengan warna teks abu gelap.</p>
  <a href="#">Link berwarna biru</a>
</body>
</html>

Hasilnya:

Contoh CSS Text Color
Gambar 6.3 : Contoh CSS Text Color

Ingat: Kontras antara teks dan background harus cukup, biar tetap terbaca dengan jelas.

4. CSS Border Color: Sentuhan Akhir yang Bikin Elegan

Border bisa kamu kasih warna juga, lho! Cocok banget buat kotak-kotak informasi, tombol, atau elemen lainnya.

Contoh:

.box {
  border: 2px solid green;
}

.button {
  border: 1px solid #ccc;
}

Contoh menggunakan internal CSS :

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      border: 2px solid green;
      padding: 10px;
    }

    .button {
      border: 1px solid #ccc;
      padding: 5px 10px;
    }
  </style>
</head>
<body>
  <div class="box">Kotak dengan border hijau</div>
  <button class="button">Tombol dengan border abu</button>
</body>
</html>

Hasilnya:

Contoh CSS Border Color
Gambar 6.4 : CSS Border Color

Bisa juga pakai properti border-top-color, border-left-color, dll kalau mau beda-beda tiap sisi.

5. CSS Color Values: Banyak Cara untuk Nentuin Warna

Selain nama warna, CSS juga dukung beberapa format nilai warna lain:

  • Hexadecimal: #ff0000 (merah)
  • RGB: rgb(255, 0, 0)
  • RGBA: rgba(255, 0, 0, 0.5) (ada transparansinya)
  • HSL: hsl(0, 100%, 50%)
  • HSLA: hsla(0, 100%, 50%, 0.5)

Contoh:

.container {
  background-color: hsl(210, 50%, 90%);
  color: rgba(0, 0, 0, 0.7);
}

Contoh menggunakan internal CSS:


<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      background-color: hsl(210, 50%, 90%);
      color: rgba(0, 0, 0, 0.7);
      padding: 15px;
    }
  </style>
</head>
<body>
  <div class="container">Warna pakai format HSL dan RGBA</div>
</body>
</html>


Hasilnya:

Contoh CSS Color Values
Gambar 6.5 : Contoh CSS Color Values

Setiap format punya keunggulannya sendiri. Misalnya, rgba dan hsla bagus buat efek transparan.

Penutup

CSS Colors itu salah satu hal dasar yang wajib kamu kuasai kalau mau bikin website yang menarik. Dengan warna yang tepat, kamu bisa bikin tampilan web jadi lebih hidup, profesional, dan enak dipandang.

Selamat eksplorasi warna! Jangan takut bereksperimen—kadang kombinasi tak terduga bisa jadi desain paling kece!

Posting Komentar untuk "Panduan Lengkap CSS Colors: Biar Web Kamu Makin Hidup! (Tutorial CSS Part 6) "