CSS Academy · Pelajaran

color-mix() dan Sintaks Warna Relatif

Campurkan warna dan buat variasi warna menggunakan fungsi warna CSS modern.

Pelajaran 4 dari 412 langkah

color-mix() dan Sintaks Warna Relatif adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Fungsi color-mix()

color-mix() mencampurkan dua warna dalam ruang warna tertentu. Fungsi ini memungkinkan variasi warna berbasis token desain tanpa Sass atau JavaScript.

  <button class="button-hover">Hover-mixed button</button>

Sintaks color-mix()

Sintaks lengkap: color-mix(in <color-space>, <color-1> [percentage], <color-2> [percentage]). Persentase harus berjumlah 100%.

  <div class="mix-equal">Equal mix</div>
  <div class="mix-weighted">Weighted mix</div>

Ruang Warna dalam color-mix()

Ruang warna memengaruhi hasil pencampuran. Ruang perseptual modern seperti oklch menghasilkan warna yang lebih seragam secara visual daripada srgb:

  <div class="oklch-mix">OKLCH mix</div>
  <div class="srgb-mix">sRGB mix</div>

Membuat Skala Warna dengan color-mix()

Buat palet warna yang konsisten dari satu warna merek:

  <span class="swatch swatch-100"></span>
  <span class="swatch swatch-300"></span>
  <span class="swatch swatch-700"></span>
  <span class="swatch swatch-900"></span>

Sintaks Warna Relatif

Warna relatif memungkinkan Anda menghasilkan warna baru dari warna yang sudah ada dengan mengubah saluran tertentu. Gunakan kata kunci from:

  <p class="darker">20% darker text</p>
  <p class="desaturated">Half saturation text</p>

Varian Transparan dengan Warna Relatif

Buat versi transparan dari warna merek tanpa mengetahui nilai RGB-nya:

  <div class="overlay">Overlay</div>

Mencerahkan dan Menggelapkan

Tambahkan atau kurangi kecerahan dalam oklch untuk membuat rona terang dan rona gelap:

  <div class="card demo-active">Card</div>

Ikhtisar Ruang Warna oklch

OKLCH adalah ruang warna yang seragam secara perseptual:

l — kecerahan (0 hingga 1)
c — kroma/saturasi (0 hingga 0.4+)
h — sudut rona (0 hingga 360)

Menyesuaikan l menghasilkan rona terang dan gelap yang seragam secara dapat diprediksi.

Dukungan Peramban

color-mix() didukung di Chrome 111+, Firefox 113+, Safari 16.2+. Sintaks warna relatif (kata kunci from) tersedia di Chrome 119+, Safari 16.4+, Firefox 128+. Periksa caniuse.com untuk mengetahui dukungan terkini.

Masa Depan color-contrast()

color-contrast() adalah fungsi yang diusulkan untuk memilih warna yang paling mudah dibaca secara otomatis (dari sebuah daftar) terhadap latar belakang tertentu. Fungsi ini belum tersedia di peramban, tetapi dirancang untuk penerapan tema yang berfokus pada aksesibilitas.

Pemeriksaan Cepat

Ruang warna color-mix() mana yang menghasilkan pencampuran dengan keseragaman perseptual paling tinggi?

Jawab di pelajaran interaktif

Ringkasan

color-mix(in oklch, color1 %, color2 %) mencampurkan warna dalam ruang tertentu — ideal untuk membuat rona terang, rona gelap, dan varian transparan dari satu warna merek. Sintaks warna relatif (oklch(from var(--brand) calc(l+0.2) c h)) menghasilkan warna baru dengan mengubah saluran individual. OKLCH adalah ruang warna terbaik untuk menghasilkan warna yang seragam secara perseptual.

Gratis untuk memulai

Belajar CSS dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 40
Pelajaran: 159

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “color-mix() dan Sintaks Warna Relatif” gratis?

Ya — teks lengkap “color-mix() dan Sintaks Warna Relatif” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “color-mix() dan Sintaks Warna Relatif”?

Campurkan warna dan buat variasi warna menggunakan fungsi warna CSS modern. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “color-mix() dan Sintaks Warna Relatif” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

calc() untuk Perhitungan Dinamis
min(), max(), dan clamp() untuk Nilai Fleksibel
repeat() dan minmax() dalam Grid
color-mix() dan Sintaks Warna Relatif

← Kembali ke CSS Academy