CSS Academy · Pelajaran

Nilai Warna: Dinamakan, Heks, RGB, HSL

Pelajari setiap format warna CSS: warna bernama, kod heks, fungsi rgb() dan fungsi hsl().

Pelajaran 1 daripada 413 langkah

Nilai Warna: Dinamakan, Heks, RGB, HSL ialah pelajaran CSS Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.

Format Warna CSS

CSS menyokong pelbagai format warna. Pemilihan format yang sesuai bergantung pada aliran kerja, alat yang digunakan, dan sama ada anda memerlukan ketelusan atau manipulasi dinamik.

Warna Bernama

CSS mentakrifkan lebih daripada 140 warna bernama seperti red, tomato dan cornflowerblue. Warna ini bagus untuk prototaip pantas tetapi menawarkan ketepatan yang terhad.

<h1>Named Colors</h1>
  <button>cornflowerblue button</button>

Warna Heksadesimal

Warna heksadesimal menggunakan # diikuti oleh 6 digit heksadesimal (atau 3 digit untuk bentuk ringkas). Setiap pasangan digit mewakili merah, hijau dan biru (0–255).

<p class="full-hex">Full hex: #ff6347</p>
  <p class="shorthand-hex">Shorthand hex: #f64</p>

Heksadesimal dengan Alfa

Tambahkan pasangan digit heksadesimal keempat (atau digit keempat dalam bentuk ringkas) untuk ketelusan alfa:

<div class="hex-alpha-full">8-digit hex alpha</div>
  <div class="hex-alpha-short">4-digit shorthand alpha</div>

Warna RGB

rgb() menerima tiga nombor bulat (0–255) untuk saluran merah, hijau dan biru. Format ini sangat mudah dibaca dan difahami secara terprogram.

<p class="rgb-tomato">rgb(255, 99, 71)</p>
  <p class="rgb-black">rgb(0, 0, 0)</p>
  <p class="rgb-white">rgb(255, 255, 255)</p>

Warna RGBA

Tambahkan parameter keempat (0–1) kepada rgb() untuk ketelusan alfa. Ini setara dengan rgb() yang lebih baharu menggunakan sintaks garis miring.

<p class="rgba-legacy">rgba(255, 99, 71, 0.5)</p>
  <p class="rgba-modern">rgb(255 99 71 / 0.5)</p>

Warna HSL

hsl() mentakrifkan warna berdasarkan rona (0–360°), ketepuan (0–100%) dan kecerahan (0–100%). Format ini jauh lebih intuitif untuk mencipta palet dan variasi warna.

<p class="hsl-tomato">hsl(9, 100%, 64%)</p>
  <p class="hsl-steelblue">hsl(210, 70%, 50%)</p>

Warna HSLA

Seperti rgba(), hsla() menambahkan saluran alfa. CSS moden membolehkan anda menggunakan pemisah garis miring sebagai ganti:

<p class="hsla-legacy">hsla(9, 100%, 64%, 0.5)</p>
  <p class="hsla-modern">hsl(9 100% 64% / 0.5)</p>

Mencipta Variasi Warna dengan HSL

HSL sangat sesuai untuk menjana rona cerah dan gelap. Kekalkan rona dan ketepuan, kemudian ubah kecerahan:

<button class="btn-light">Light</button>
  <button class="btn">Base</button>
  <button class="btn-dark">Dark</button>

Kata Kunci currentColor

currentColor ialah nilai dinamik yang sama dengan sifat color semasa bagi elemen tersebut. Gunakannya supaya sempadan, bayang atau isian SVG mewarisi warna teks secara automatik.

<a href="#">Link with currentColor border</a>

Kata Kunci transparent

Kata kunci transparent bersamaan dengan rgba(0,0,0,0) — lutsinar sepenuhnya. Kata kunci ini berguna untuk kesan tuding apabila anda beralih daripada lutsinar kepada warna.

<button>Transparent background</button>

Semakan Pantas

Format warna manakah yang paling memudahkan anda mencipta rona yang lebih cerah dan lebih gelap daripada rona yang sama?

Jawab dalam pelajaran interaktif

Ulang Kaji

CSS menawarkan format warna bernama, heksadesimal, RGB dan HSL. HSL sesuai untuk manipulasi warna secara terprogram. Semua format menerima saluran alfa untuk ketelusan. currentColor dan transparent ialah kata kunci khas yang berguna.

Percuma untuk bermula

Pelajari CSS dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 40
Pelajaran: 159

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Nilai Warna: Dinamakan, Heks, RGB, HSL” percuma?

Ya — teks penuh “Nilai Warna: Dinamakan, Heks, RGB, HSL” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Nilai Warna: Dinamakan, Heks, RGB, HSL”?

Pelajari setiap format warna CSS: warna bernama, kod heks, fungsi rgb() dan fungsi hsl(). Anda berlatih CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan CSS Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Nilai Warna: Dinamakan, Heks, RGB, HSL” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke CSS Academy