Belajar CSS #4 Properti Color CSS

Salah satu hal penting dalam mengatur tampilan website adalah mengatur pemilihan warna text pada sebuah Tag atau Element HTML. Hal ini agar tampilan web sehingga terlihat lebih menarik. Untuk mengatur gaya dan pemilihan warna tulisan pada HTML adalah dengan CSS menggunakan properti color.

Properti color dalam CSS berfungsi untuk memberikan ataupun mengubah warna text pada sebuah Tag atau Element HTML. Pada tutorial ini, kita akan belajar tentang properti color pada CSS.

Properti Color CSS

Ada beberapa properti pada CSS yang berguna untuk mendefinisikan warna pada suatu elemen sebagai nilainya. diantarnya adalah property color.

Sintaks

color: nilai_warna;

Contoh penggunaan:

<html>
  <head>
    <title>Properti Color</title>
    <meta content="">
    <style>
        p {
        color: red;
        }
    </style>
  </head>
  <body>
    <h1>Properti Color CSS </h1>
    <p>
      Memberikan Warna pada CSS
    </p> 
  </body>
</html>

Keterangan :

Untuk menulis nilai warna pada properti color adalah harus menggunakan nama warna dalam bahasa inggris.

p {
   color: red;
  }

Pada contoh diatas, kita memberikan warna merah untuk teks paragraf pada elemen <p>.

Hasilnya:

Properti Color CSS

Gambar dibawah ini merupakan nama-nama warna pada CSS.

Adapun daftar lengkap nama-nama warna di CSS dapat anda kunjungi di: W3C.org (Color Keywords).

Selain menggunakan nama warna, terdapat juga cara lain yang valid seperti kode heksa, fungsi rgb(), dan lain-lain. Mari kita bahas ..

Kode Heksadesimal Properti Color CSS

Kode heksadesmial merupakan kode penulisan nama warna yang menggunakan bilangan heksa desmial. kode ini berguna untuk membuat warna baru yang belum ada di daftar nama warna. Adapun aturuan dalam penulisan  kode hexadesimal, diantaranya :

  • Mempunyai nilai dari 0 sampai f (16 dalam desimal).
  • Diawali dengan tanda pagar (#), lalu diikuti kode heksanya.
  • Terdiri dari 3 digit atau 6 digit bilangan.

Contoh:

Angka dalam kode heksa desimal dalam menentukan nilai warna dalam RGB 6 digit (#RRGGBB)

#FF0000 (6 digit)

Angka dalam kode heksa desimal dalam menentukan nilai warna dalam RGB 3 digit (#RGB)

##F00 (3 digit).

Nilai yang diberikan pada parameter tersebut dimulai dari angka 0~255. Semakin besar nilai yang diberikan, semakin kuat nilai warna tersebut.

Selain menggunakan heksadesimal, ada juga cara lain seperti menggunakan fungsi rgb(), rgba(), hsl(), hsla().

Fungsi RGB

Pada properti Color CSS, RGB merupakan singkatan dari Red, Green, Blue. Fungsi rgb() adalah menghasilkan warna berdasarkan konsep warna RGB pada komputer.

Contoh :

p {
    color:rgb(225, 40, 17) ;
  }

Fungsi RGBA

Dalam penggunaan, fungsi rgba () ini sama seperti fungsi RGB, yang membedakannya hanya penambahan parameter ”alpha” dibelakangnya. Nilai alpha adalah dimulai dari 0% smpai 100% atau 0.0~1.0.

rgba: (red, blue, green, alpha) ;

Jika nilai alpha semakin mendekati angka satu, maka warnanya akan semakin terang. Sebaliknya, jika mendekati angka nol maka warnanya akan semakin transparan.

Contoh :

p {
  color: rgba(225, 40, 17, 0.8);
  }

Pada contoh di atas, nilai alpha yang diberikan adalah 0.8, atau sama dengan 80%.

Fungsi HSL dan HSLA

HSL (Hue,Saturation,Lightness) merupakan fungsi yang menghasilkan warna berdasarkan konsep warna HSL. Nilai hue yang digunakan adalah nilai derajat dari 0~360. Sedangkan untuk nilai saturation dan lightness menggunakan persen, dari 0%~100%.

Properti Color CSS

Contoh :

p {
   color: hsl(215, 80%, 39%);
  }

Sedangkan untuk memberikan nilai alpha atau transparan pada warna HSL, dapat menggunaakan fungsi hsla()

Contoh:

p {
    color: hsla(215, 80%, 39%, 0.8);
}

Warna Gradasi

Gradasi warna adalah untuk penggabungan dari beberapa unsur perubahan warna sehingga terlihat menjadi kesatuan warna

Di CSS, warna gradasi dapat dibuat dengan fungsi:

  • linear-gradient() untuk gradasi linear;
  • radial-gradient() untuk gradasi lingkaran;
  • conic-gradient() untuk gradasi memutar;

Fungsi linear-gradient()menggunakan parameter arah di awalnya, lalu diikuti dengan warna yang akan digabungkan. Parameternya dapat berbentuk nama arah seperti left, right, top, bottom, dan juga derajat seperti 90°.

Fungsi radial-gradient(), parameter awalnya berupa ukuran lingkaran sedangkan fungsi conic-gradient() parameter awalnya berupa derajat lingkaran.

Contoh :

<html>
  <head>
    <title>Properti Color</title>
    <meta content="">
    <style>
    h1 {
      background: linear-gradient(90deg, rgb(189, 182, 118) 0%, rgb(206, 14, 158) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
  </head>
  <body>
    <h1>Properti Color CSS</h1>
    <p>
      Memberikan Warna pada CSS
    </p> 
  </body>
</html>

Saat ini warna gradasi belum disupport oleh properti color, jadi untuk menggunakan warna gradasi pada teks, dapat menggunakan properti background.

Hasilnya :

Properti Color CSS

Penutup

Begitulah pembahasan mengenai properti color dalam CSS. Jadi, Sejauh ini kita sudah mempelajari landasan dasar dalam penggunaan CSS meliputi :

Struktur Dasar CSS

Cara Penulisan CSS Ke Html

Jenis Jenis Selector di CSS

Properti Color di CSS

Maka untuk pembahasan artikel yang ke empat yaitu Belajar CSS #5 – Properti background di CSS

Tinggalkan Balasan

Scroll to Top