Belajar css seputar color

belajar css

Kegunaan color

CSS color digunakan untuk memberikan color atau warna pada elemen HTML. Dengan color Anda bisa memberikan nilai warna pada property background-color, border-color, color dan yang lainnya. Pada color sendiri Anda bisa memberikan nilai atau menentukan warna mana yang akan digunakan dengan macam-macam type warna. Seperti: RGB, HEX, HSL dan yang lainnya.

Nilai color CSS yang paling sering gunakan:

  • nilai HEX – seperti #ff0000
  • nilai RGB – seperti rgb (255,0,0)
  • nama color – seperti blue

Background color

Dengan property background-color Anda bisa memberikan warna latar belakang pada elemen HTML.

Nilai color CSS yang paling sering gunakan:

  • nilai HEX – seperti #ff0000
  • nilai RGB – seperti rgb (255,0,0)
  • nama color – seperti blue

Contoh:

Editor Online
  1. h1 {
  2. background-color: green;
  3. }
  4. p {
  5. background-color: orange;
  6. }

Anda akan belajar seputar property background-color lebih dalam pada bab berikutnya.

Border color

Dengan property border-color Anda bisa memberikan warna pada perbatasan atau border.

Nilai color CSS yang paling sering gunakan:

  • nilai HEX – seperti #ff0000
  • nilai RGB – seperti rgb (255,0,0)
  • nama color – seperti blue

Contoh:

Editor Online
  1. h1 {
  2. border-color: blue;
  3. border-style: solid;
  4. border-width: 2px;
  5. }
  6. p {
  7. border-color: black;
  8. border-style: solid;
  9. border-width: 2px;
  10. }

Anda akan belajar seputar property border lebih dalam pada bab berikutnya.

Text color

Dengan property color Anda bisa memberikan warna pada text atau elemen HTML.

Nilai color CSS yang paling sering gunakan:

  • nilai HEX – seperti #ff0000
  • nilai RGB – seperti rgb (255,0,0)
  • nama color – seperti blue

Contoh:

Editor Online
  1. h1 {
  2. color: green;
  3. }
  4. p {
  5. color: red;
  6. }

CSS nilai color NAMA

Color atau warna dapat ditentukan sebagai nilai nama itu sendiri dalam bahasa inggris, seperti: red, blue, yellow, orange dan yang lainnya.

Contoh:

Editor Online
  1. h1 {
  2. color: green;
  3. }
  4. p {
  5. color: blue;
  6. }

CSS nilai color RGB

Dalam HTML, warna dapat ditentukan sebagai nilai RGB, menggunakan rumus ini:

rgb ( red, green , blue )

Setiap parameter (red, green, dan blue) menentukan intensitas warna antara 0 dan 255.

Misalnya, rgb (255, 0, 0) ditampilkan sebagai merah atau red, karena merah diatur ke nilai tertinggi (255) dan yang lainnya diatur ke 0.

Untuk menampilkan warna hitam atau black, semua parameter warna harus diatur ke 0, seperti ini: rgb (0, 0, 0).

Untuk menampilkan warna putih atau white, semua parameter warna harus diatur ke 255, seperti ini: rgb (255, 255, 255).

Contoh:

Editor Online
  1. h1 {
  2. color: rgb(0, 0, 255);
  3. }
  4. p {
  5. color: rgb(255, 0, 0);
  6. }

CSS nilai color HEX

Dalam HTML, warna dapat ditentukan menggunakan nilai heksadesimal dalam bentuk:

#rrggbb

Di mana rr (red), gg (green) dan bb (blue) adalah nilai heksadesimal antara 00 dan ff (sama dengan desimal 0-255).

Sebagai contoh, #ff0000 ditampilkan sebagai merah atau red, karena merah diatur ke nilai tertinggi (ff) dan yang lainnya diatur ke nilai terendah (00).

Contoh:

Editor Online
  1. h1 {
  2. color: #ff0000;
  3. }
  4. p {
  5. color: #0000ff;
  6. }

Kebanyakan programmer memberikan nilai warna dengan HEX

CSS nilai color HSL

Dalam HTML, warna dapat ditentukan menggunakan hue, saturation, dan lightness (HSL) dalam bentuk:

hsl ( hue , saturation , lightness )

Hue adalah gelar pada roda warna dari 0 hingga 360. 0 berwarna merah atau red, 120 berwarna hijau atau green, dan 240 berwarna biru atau blue.

Saturasi adalah nilai persentase, 0% berarti warna abu-abu atau grey, dan 100% adalah warna penuh.

Cahaya juga persentase, 0% hitam atau black, 50% tidak terang atau gelap, 100% putih atau white

Contoh:

Editor Online
  1. h1 {
  2. color: hsl(0, 0%, 50%);
  3. }
  4. p {
  5. color: hsl(0, 100%, 50%);
  6. }

CSS nilai color RGBA

RGBA adalah salah satu nilai warna yang merupakan perpanjangan dari nilai warna RGB dengan alpha channel – yang menentukan opacity atau tingkat transparan untuk warna.

Sebuah nilai warna RGBA ditentukan dengan:

RGBA ( red, green , blue, alpha )

Parameter alpha adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (tidak transparan sama sekali):

Contoh:

Editor Online
  1. h1 {
  2. background-color: rgba(0, 0, 255, 0.19);
  3. }
  4. p {
  5. background-color: rgba(255, 99, 71, 0.3);
  6. }

Perhatikan contoh diatas, warna background-color sedikit transparan. Dan Anda bisa meningkatkan tingkat transparan dengan mengatur opacity sesuai kebutuhan Anda.

CSS nilai color HSLA

HSLA adalah salah satu nilai warna yang merupakan perpanjangan dari nilai warna HSL dengan alpha channel – yang menentukan opacity atau tingkat transparan untuk warna.

Sebuah nilai warna HSLA ditentukan dengan:

HSLA ( hue, saturation , lightness, alpha )

Parameter alpha adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (tidak transparan sama sekali):

Contoh:

Editor Online
  1. h1 {
  2. background-color: hsla(54, 100%, 62%, 0.5);
  3. }
  4. p {
  5. background-color: hsla(88, 50%, 53%, 0.5);
  6. }

Perhatikan contoh diatas, warna background-color sedikit transparan. Dan Anda bisa meningkatkan tingkat transparan dengan mengatur opacity sesuai kebutuhan Anda.

Referensi:

w3schools.com
developer.mozilla.com
tutorialspoint.com

Leave a Reply

Your email address will not be published. Required fields are marked *