nilai warna yang sah di CSS

Warna CSS

Warna di CSS dapat ditentukan dengan metode berikut:

  • warna heksadesimal
  • warna heksadesimal dengan transparansi
  • Warna RGB
  • Warna RGBA
  • Warna HSL
  • Warna HSLA
  • Nama warna yang ditetapkan/berlaku di seluruh browser
  • Dengan menggunakan currentcolor kata kunci

warna heksadesimal

gunakan #RRGGBB untuk menentukan warna heksadesimal, di mana RR (merah), GG (hijau), dan BB (biru) adalah bilangan heksadesimal yang menentukan komponen warna (komponen). Semua nilai harus berada di antara 00 dan FF.

contoh, nilai #0000ff ditampilkan dengan warna biru, karena komponen biru diatur ke nilai maksimal (ff), sementara komponen lain diatur ke 00.

Contoh

definisi warna HEX yang berbeda:

#p1 {background-color: #ff0000;}   /* Merah */
#p2 {background-color: #00ff00;}   /* Hijau */
#p3 {background-color: #0000ff;}   /* Biru */

Coba Sendiri

warna heksadesimal dengan transparansi

gunakan #RRGGBB untuk menentukan warna heksadesimal. Untuk menambahkan kekentalan, tambahkan dua digit ekstra di antara 00 dan FF.

Contoh

definisi warna HEX dengan transparansi:

#p1a {background-color: #ff000080;}   /* Merah dengan transparansi */
#p2a {background-color: #00ff0080;}   /* Hijau dengan transparansi */
#p3a {background-color: #0000ff80;}   /* Biru dengan transparansi */

Coba Sendiri

Warna RGB

Nilai warna RGB disusun oleh fungsi rgb()Diatur, sintaksnya adalah:

rgb(red, hijau, blue)

setiap parameter (red, hijau, bluedefinisi kekuatan warna, dapat berupa bilangan bulat antara 0 hingga 255 atau persen (dari 0% hingga 100%).

Contoh, nilai rgb(0,0,255) ditampilkan dengan warna biru, karena parameter blue diatur ke nilai maksimal (255), sementara parameter lain diatur ke 0.

Selain itu, nilai berikut mendefinisikan warna yang sama: rgb(0,0,255) dan rgb(0%,0%,100%)。

Contoh

Definisi warna RGB yang berbeda:

#p1 {background-color: rgb(255, 0, 0);}   /* Merah */
#p2 {background-color: rgb(0, 255, 0);}   /* Hijau */
#p3 {background-color: rgb(0, 0, 255);}   /* Biru */

Coba Sendiri

Warna RGBA

Warna RGBA adalah ekspansi nilai warna RGB, ia memiliki channel Alpha - menentukan kepadatan objek.

Warna RGBA melalui Fungsi rgba()Diatur, sintaksnya adalah:

rgba(red, hijau, blue, alpha)

alpha Parameter adalah angka yang berada di antara 0.0 (sangat transparan) dan 1.0 (sangat tak transparan).

Contoh

Definisi warna RGB dengan kepadatan yang berbeda:

#p1 {background-color: rgba(255, 0, 0, 0.3);}   /* Merah dengan kepadatan */
#p2 {background-color: rgba(0, 255, 0, 0.3);}   /* Hijau dengan kepadatan */
#p3 {background-color: rgba(0, 0, 255, 0.3);}   /* Biru dengan kepadatan */

Coba Sendiri

Warna HSL

HSL berarti hue (warna), saturasi (saturasi) dan kecerdasan (kecerdasan) - representasi koordinat kerucut warna.

Dengan menggunakan Fungsi hsl()Tentukan nilai warna HSL, sintaks fungsi ini adalah:

hsl(hue, kepadatan, kecerahan)

Hue adalah derajat di lubang warna (dari 0 sampai 360) - 0 (atau 360) adalah merah, 120 adalah hijau, 240 adalah biru.

Saturasi adalah nilai persen; 0% menunjukkan bayangan abu-abu, sementara 100% adalah warna penuh.

Kecerdasan juga berupa persen; 0% adalah hitam, 100% adalah putih.

Contoh

定义不同的 HSL warna：

#p1 {background-color: hsl(120, 100%, 50%);}   /* 绿色 */
#p2 {background-color: hsl(120, 100%, 75%);}   /* 浅绿色 */
#p3 {background-color: hsl(120, 100%, 25%);}   /* 深绿色 */
#p4 {background-color: hsl(120, 60%, 70%);}    /* hijau halus */

Coba Sendiri

Warna HSLA

Warna HSLA adalah ekspansi nilai warna HSL, yang memiliki channel Alpha - menentukan kepadatan objek.

Nilai warna HSLA terdiri dari Fungsi hsla()Tentukan, sintaks dari fungsi ini adalah:

hsla(hue, kepadatan, kecerahan, alpha)

alpha Parameter adalah angka yang berada di antara 0.0 (sangat transparan) dan 1.0 (sangat tak transparan).

Contoh

Definisi warna HSL dengan transparensi:

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}   /* hijau dengan transparensi */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}   /* hijau muda dengan transparensi */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}   /* hijau tua dengan transparensi */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}    /* hijau gelap dengan transparensi */

Coba Sendiri

Nama warna yang ditetapkan/berlaku di seluruh browser

HTML dan standar warna CSS menetapkan 140 nama warna yang ditetapkan sebelumnya.

Contohnya:blue、red、coral、brown dengan:

Contoh

Definisi nama warna yang berbeda:

#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}

Coba Sendiri

Daftar semua nama warna yang ditetapkan dapat ditemukan di pustaka referensi nama warna kami.

Kata kunci currentcolor

currentcolor Mengutip nilai properti color elemen kunci.

Contoh

Warna pinggiran <div> elemen ini akan menjadi biru, karena warna teks <div> elemen ini adalah biru:

#myDIV {
  color: blue; /* teks biru */
  border: 10px solid currentcolor; /* warna pinggiran biru */
}

Coba Sendiri