Warna - Trik CSS

Anonim

The colorproperti di CSS menetapkan warna teks dan teks dekorasi.

p ( color: blue; )

Nilai

The colorproperti dapat menerima nilai warna CSS.

  • Warna yang dinamai: misalnya, "aqua".
  • Warna heksa: misalnya, # 00FFFF atau # 0FF.
  • Warna RGB dan RGBa: misalnya, rgb (0, 255, 255) dan rgba (0, 255, 255, .5).
  • Warna HSL dan HSLa: misalnya, hsl (180, 100%, 50%) dan hsla (180, 100%, 50%, .5).

Warna Bernama

p ( color: aqua; )

Warna yang dinamai juga dikenal sebagai warna kata kunci, warna X11, atau warna SVG. Semua warna bernama buram secara default kecuali transparent, yang sepenuhnya transparan atau "jelas". Lihat potongan Named Colors dan Hex Equivalents kami untuk mengetahui daftar nama warna.

Warna Hex

Warna heksadesimal, atau warna heksadesimal, ditentukan dengan nilai alfanumerik. Pasangan karakter pertama mewakili nilai merah, pasangan kedua mewakili nilai hijau, dan pasangan ketiga mewakili nilai biru, semuanya dalam rentang dari 00 hingga FF.

p ( color: #00FFFF; )

Jika pasangan nilai merah, biru, dan hijau semuanya ganda, Anda dapat menyingkat nilai hex menjadi singkatan 3 karakter - misalnya, # 00FFFF dapat disingkat menjadi # 0FF.

.full-hex ( color: #00FFFF; /* aqua */ ) .abbreviated-hex ( color: #0FF; /* also aqua */ )

Warna RGB dan RGBa

Warna RGB ditentukan dengan daftar tiga nilai numerik yang dipisahkan koma (mulai dari 0 hingga 255) atau nilai persentase (mulai dari 0% hingga 100%). Nilai pertama mewakili nilai merah, nilai kedua mewakili nilai hijau, dan nilai ketiga mewakili nilai biru. Warna RGB buram secara default.

p ( color: rgb(0, 255, 255); )

RGBa menambahkan nilai keempat untuk saluran alfa, yang mengatur opasitas warna. Nilai alfa adalah angka dalam rentang dari 0,0 (sepenuhnya transparan) hingga 1 (sepenuhnya tidak tembus pandang).

p ( color: rgba(0, 255, 255, .5); )

Warna HSL dan HSLa

Warna HSL ditentukan dengan daftar tiga nilai yang dipisahkan koma: derajat Hue (angka mulai dari 0 hingga 360), persentase Saturasi (mulai dari 0% hingga 100%), dan persentase Cahaya (mulai dari 0% hingga 100%). Warna HSL buram secara default.

p ( color: hsl(180, 100%, 50%); )

HSLa menambahkan nilai keempat untuk saluran alfa untuk mengontrol opasitas warna. Nilai alfa adalah angka dalam rentang dari 0,0 (sepenuhnya transparan) hingga 1 (sepenuhnya tidak tembus pandang).

p ( color: hsla(180, 100%, 50%, .5); )

Demo

Lihat nilai warna Pena dengan CSS-Tricks (@ css-trick) di CodePen.

Catatan Penggunaan

The colorcascades properti. Jika Anda menyetelnya pada badan, semua elemen turunan akan mewarisi warna itu, kecuali jika warnanya disetel sendiri di lembar gaya agen pengguna.

Perbatasan mewarisi colorkecuali nilai warna ditentukan dalam borderdeklarasi.

The colorproperti berlaku untuk text-decorationbaris. Di browser yang mendukung text-decoration-colorproperti, Anda dapat menentukan warna berbeda untuk teks dan garis dekorasinya.

colorjuga berlaku untuk penanda item daftar (seperti poin peluru dan angka). Anda tidak bisa menyetel warna terpisah untuk penanda item daftar, tapi Anda bisa menggantinya dengan gambar dengan list-styleproperti.

Meskipun warna yang dinamai dan warna hex tidak memiliki saluran alfa, Anda dapat mengatur opasitasnya dengan opacityproperti di semua browser saat ini dan IE9 +.

Terkait

  • font
  • text-decoration-color
  • opacity

Informasi Lebih Lanjut

  • color di spesifikasi W3C
  • color di MDN
  • Artikel CSS-Tricks Yay untuk HSLa

Dukungan Browser

Chrome Safari Firefox Opera YAITU Android iOS
Apa saja Apa saja Apa saja Apa saja Apa saja * Apa saja Apa saja

* HSL, HSLa, dan RGBa didukung di IE9 +.