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.

DAFTAR ISI

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:

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%.

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 :