Anak Males – Kali ini kita akan belajar caranya mengubah warna di css. Didalam sebuah website, warna merupakan hal yangn sangat penting.
Kenapa penting ? karena warna dapat mempengaruhi suasana hati dan perasaan pengunjung website.
Warna juga dapat menjadi bagian dari identitas visual sebuah website dan dapat membantu membedakan website tersebut dari website lain.
Selain itu, warna juga dapat membantu menyampaikan pesan atau tujuan dari website tersebut. Misalnya, warna merah dapat digunakan untuk menunjukkan bahwa website tersebut memberikan sesuatu yang eksklusif atau bahwa website tersebut memberikan sesuatu yang sangat penting.
Warna juga dapat digunakan untuk membantu mengarahkan perhatian pengunjung ke bagian-bagian tertentu dari website tersebut.
Secara umum, sangat penting untuk memilih warna yang tepat untuk sebuah website agar dapat membantu mencapai tujuan dan menyampaikan pesan yang diinginkan.
Namun, juga penting untuk memastikan bahwa warna-warna yang dipilih dapat dibaca dengan baik dan mudah dibedakan, terutama jika website tersebut menampilkan banyak teks atau informasi.
Nah, maka dari itu, untuk mengatur warna di website, kita bisa menggunakan css. Kenapa css ? Karena di dalam css ada yang namanya property color yang bisa mengubah warna website.
Mengenal Properti Color di CSS
Atribut color dalam CSS digunakan untuk menentukan warna teks dalam sebuah elemen HTML. Kita dapat menggunakan nama warna standar, seperti red atau blue, atau menggunakan kode warna hexadecimal, seperti #FF0000 (merah) atau #0000FF (biru). Kita juga dapat menggunakan kode warna RGB atau HSL untuk menentukan warna.
Contoh penggunaan atribut color dalam sebuah elemen HTML adalah seperti berikut:
.my-element {
color: red;
}
Atau:
.my-element {
color: #FF0000;
}
Atau:
.my-element {
color: rgb(255, 0, 0);
}
Catatan: Ingatlah bahwa atribut color hanya akan berpengaruh pada teks dalam elemen yang diberikan. Jika ingin mengubah warna latar belakang elemen, kita dapat menggunakan atribut background-color.
Nilai Yang Valid Untuk Warna CSS
Terdapat berbagai cara untuk menentukan nilai warna pada properti color. Salah satunya adalah dengan menuliskan nama warna dalam bahasa Inggris, seperti menetapkan warna merah untuk teks paragraf dengan menuliskan color: red.
Selain itu, terdapat juga cara lain yang valid seperti menggunakan fungsi rgb() dan kode heksa untuk menentukan warna.
Mari kita bahas semuanya.
Nama Warna
Pertama, Kita dapat menentukan warna di CSS dengan menggunakan nama warna standar. Ini adalah cara yang paling mudah dan sederhana untuk menentukan warna, karena Kita tidak perlu memikirkan kode warna yang rumit.
Untuk menggunakan nama warna standar, Kita hanya perlu menuliskan nama warna yang di inginkan sebagai nilai atribut color. Contoh penggunaan nama warna standar adalah seperti berikut:
.my-element {
color: red;
}
.my-other-element {
color: blue;
}
.my-third-element {
color: green;
}
.my-fourth-element {
color: yellow;
}
Beberapa nama warna standar yang tersedia adalah red, orange, yellow, green, blue, purple, pink, brown, black, dan white. Namun, jumlah nama warna standar yang tersedia tergantung pada browser yang di gunakan.
Catatan: Ingatlah bahwa atribut color hanya akan berpengaruh pada teks dalam elemen yang diberikan. Jika ingin mengubah warna latar belakang elemen, Kita dapat menggunakan atribut background-color.
Kode Hexadecimal
Kode warna hexadecimal adalah sistem penomoran yang digunakan untuk menentukan warna di CSS. Ini terdiri dari 6 digit yang mewakili jumlah merah, hijau, dan biru dalam warna tersebut. Setiap digit merupakan bilangan hexadesimal, yang berarti bahwa ia terdiri dari 16 simbol: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, dan F.
Untuk menggunakan kode warna hexadecimal, kita harus menuliskan kode warna tersebut dengan tanda pagar (#) di depan. Contoh penggunaan kode warna hexadecimal adalah seperti berikut:
Copy code.my-element {
color: #FF0000;
}
.my-other-element {
color: #00FF00;
}
.my-third-element {
color: #0000FF;
}
.my-fourth-element {
color: #FFFF00;
}Dalam contoh di atas, warna merah ditentukan dengan kode warna hexadecimal #FF0000, hijau dengan #00FF00, biru dengan #0000FF, dan kuning dengan #FFFF00.
Catatan: Ingatlah bahwa atribut color hanya akan berpengaruh pada teks dalam elemen yang diberikan. Jika ingin mengubah warna latar belakang elemen, kita dapat menggunakan atribut background-color.
Fungsi RGB dan RGBa
Kode warna RGB (Red Green Blue) adalah sistem penomoran yang digunakan untuk menentukan warna di CSS. Ini terdiri dari tiga angka yang mewakili jumlah merah, hijau, dan biru dalam warna tersebut. Angka-angka tersebut bernilai antara 0 dan 255, yang merupakan jumlah maksimum untuk setiap warna.
Untuk menggunakan kode warna RGB, kita harus menuliskan kode warna tersebut dengan menggunakan fungsi rgb(). Contoh penggunaan kode warna RGB adalah seperti berikut:
Copy code.my-element {
color: rgb(255, 0, 0);
}
.my-other-element {
color: rgb(0, 255, 0);
}
.my-third-element {
color: rgb(0, 0, 255);
}
.my-fourth-element {
color: rgb(255, 255, 0);
}Dalam contoh di atas, warna merah ditentukan dengan kode warna RGB rgb(255, 0, 0), hijau dengan rgb(0, 255, 0), biru dengan rgb(0, 0, 255), dan kuning dengan rgb(255, 255, 0).
Catatan: Ingatlah bahwa atribut color hanya akan berpengaruh pada teks dalam elemen yang diberikan. Jika ingin mengubah warna latar belakang elemen, kita dapat menggunakan atribut background-color.
Fungsi HSL dan HSLa
Kode warna HSL (Hue Saturation Lightness) adalah sistem penomoran yang digunakan untuk menentukan warna di CSS. Ini terdiri dari tiga angka yang mewakili tonalitas, kejenuhan, dan kecerahan warna.
Tonalitas merupakan sudut pada roda warna yang menentukan jenis warna yang muncul. Nilainya bernilai antara 0 dan 360, dengan 0 mewakili merah, 120 mewakili hijau, dan 240 mewakili biru.
Kejenuhan merupakan tingkat kepekatannya warna. Nilainya bernilai antara 0% (tidak ada warna) dan 100% (warna yang paling pekat).
Kecerahan merupakan tingkat kecerahan warna. Nilainya bernilai antara 0% (hitam) dan 100% (putih).
Untuk menggunakan kode warna HSL, kita harus menuliskan kode warna tersebut dengan menggunakan fungsi hsl(). Contoh penggunaan kode warna HSL adalah seperti berikut:
.my-element {
color: hsl(0, 100%, 50%);
}
.my-other-element {
color: hsl(120, 100%, 50%);
}
.my-third-element {
color: hsl(240, 100%, 50%);
}
.my-fourth-element {
color: hsl(60, 100%, 50%);
}
Dalam contoh di atas, warna merah ditentukan dengan kode warna HSL hsl(0, 100%, 50%), hijau dengan hsl(120, 100%, 50%), biru dengan hsl(240, 100%, 50%), dan kuning dengan hsl(60, 100%, 50%).
Cara Membuat Warna Gradasi CSS
Untuk membuat warna gradasi di CSS, Anda dapat menggunakan atribut background dengan nilai linear-gradient atau radial-gradient.
Contoh penggunaan atribut linear-gradient adalah seperti berikut:
.my-element {
background: linear-gradient(to right, red, yellow);
}
Di sini, warna gradasi akan dibuat dari merah ke kuning dengan arah dari kiri ke kanan. Anda juga dapat menentukan arah lain dengan menggunakan kata kunci seperti to top, to bottom, to left, atau to right.
Contoh penggunaan atribut radial-gradient adalah seperti berikut:
.my-element {
background: radial-gradient(red, yellow);
}
Di sini, warna gradasi akan dibuat dari merah ke kuning dengan arah dari tengah keluar. Anda juga dapat menentukan letak tengah gradasi dengan menambahkan dua angka yang mewakili posisi x dan y. Contohnya:
.my-element {
background: radial-gradient(50% 50%, red, yellow);
}
Di sini, tengah gradasi akan diletakkan pada titik tengah elemen.
Anda juga dapat menambahkan lebih banyak warna ke dalam gradasi dengan menambahkan lebih banyak nilai warna. Contohnya:
.my-element {
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
Di sini, warna gradasi akan dibuat dari merah ke ungu dengan arah dari kiri ke kanan.
Catatan: Ingatlah bahwa atribut background akan berpengaruh pada latar belakang elemen yang diberikan. Jika Anda ingin mengubah warna teks, Anda dapat menggunakan atribut color.
Tips Menggunakan Warna
Berikut adalah beberapa tips yang dapat Anda gunakan dalam menggunakan warna di CSS:
- Pilih warna yang sesuai dengan tujuan dan pesan yang ingin disampaikan. Misalnya, warna merah dapat digunakan untuk menunjukkan kemarahan atau keberanian, sementara warna biru dapat digunakan untuk menunjukkan ketenangan atau kepercayaan.
- Gunakan warna yang kontras untuk membuat teks lebih terbaca. Misalnya, jika Anda menggunakan latar belakang berwarna terang, gunakan warna teks yang lebih gelap agar lebih terbaca.
- Gunakan warna yang harmonis untuk menciptakan kesatuan visual. Anda dapat menggunakan warna-warna yang berdekatan di roda warna untuk menciptakan kesatuan, atau menggunakan skema warna
Penutup
Baiklah mungkin kita cukupkan tutorial css kali ini. sampai jumpa di tutorial berikutnya.