Skip to content
Kuliah Coding

CSS Color

Yuk kita pelajari materi CSS Color — bagian penting dari styling yang membuat tampilan website menjadi menarik dan hidup

Apa Itu CSS Color?

Section titled “Apa Itu CSS Color?”

CSS Color digunakan untuk mengatur warna pada elemen HTML, seperti:

  • Warna teks
  • Warna latar belakang
  • Warna border
  • Dan lainnya

Tempat Umum Menggunakan color (Warna)

Section titled “Tempat Umum Menggunakan color (Warna)”
Properti CSSFungsi
colorMengatur warna teks
background-colorMengatur warna latar belakang
border-colorMengatur warna garis pinggir (border)
outline-colorWarna outline luar elemen

Contoh:

p {
  color: blue;
  background-color: yellow;
}

Cara Menuliskan color di CSS

Section titled “Cara Menuliskan color di CSS”

Beberapa cara untuk memberikan warna pada elemen di website diantaranya:

1. Nama Warna CSS (Color Name)

Section titled “1. Nama Warna CSS (Color Name)”

Gunakan nama warna bawaan CSS seperti red, blue, green, black, white, dll.

h1 {
  color: red;
}

2. Hexadecimal (#rrggbb)

Section titled “2. Hexadecimal (#rrggbb)”

Menggunakan kode heksadesimal, diawali dengan tanda #.

Contoh:

/* Merah */
color: #ff0000;


/* Abu-abu tua */
background-color: #333333;

3. RGB (Red, Green, Blue)

Section titled “3. RGB (Red, Green, Blue)”

Gunakan fungsi rgb() untuk menentukan warna dengan angka 0–255.

Contoh:

color: rgb(255, 0, 0);       /* Merah */
background-color: rgb(0, 0, 0); /* Hitam */

4. RGBA (RGB + Alpha)

Section titled “4. RGBA (RGB + Alpha)”

Menambahkan transparansi dengan nilai alpha (0 = transparan, 1 = solid).

Contoh:

background-color: rgba(255, 0, 0, 0.5); /* Merah transparan */

5. HSL dan HSLA

Section titled “5. HSL dan HSLA”

Menggunakan format hsl(hue, saturation, lightness).

Contoh:

color: hsl(0, 100%, 50%);     /* Merah terang */
color: hsla(0, 100%, 50%, 0.5); /* Merah transparan */

Contoh kode lengkap Penerapan CSS Color

Section titled “Contoh kode lengkap Penerapan CSS Color”
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #f0f0f0;
    }


    h1 {
      color: #2c3e50;
    }


    p {
      color: rgb(60, 60, 60);
      background-color: rgba(0, 128, 255, 0.1);
      padding: 10px;
      border-left: 4px solid blue;
    }
  </style>
</head>
<body>


  <h1>Belajar CSS Color</h1>
  <p>Warna membuat tampilan website lebih menarik dan hidup.</p>


</body>
</html>

Hasilnya:

css-color

Tips Menggunakan color dengan Baik

Section titled “Tips Menggunakan color dengan Baik”
  • Gunakan kontras yang cukup antara teks dan latar belakang
  • Gunakan warna konsisten agar tampilan profesional

Kesimpulan

Section titled “Kesimpulan”

CSS Color memungkinkan kamu untuk:

  • Mengatur warna teks, background, dan border
  • Menambahkan transparansi
  • Membuat tampilan website lebih indah dan user-friendly