Tutorial
Step-by-step tutorials applying color science concepts to real-world design and development tasks.
Membuat OG Image Berwarna dengan Next.js dan Satori
Buat gambar Open Graph dinamis dengan Next.js dan Satori. Buat template OG yang sadar warna dengan gradien, warna brand, dan desain responsif.
Diperbarui Feb 24, 2026
CSS Custom Properties untuk Sistem Warna Dinamis
Bangun sistem warna yang mudah dipelihara dengan CSS custom properties. Mencakup variabel, mode terang/gelap, dan perubahan warna JS runtime.
Diperbarui Feb 18, 2026
Warna Tailwind CSS: Panduan Sistem Shade Lengkap
Kuasai sistem warna Tailwind CSS: palet default, konvensi shade 50-950, warna khusus dalam config, dan pendekatan CSS variables baru dalam Tailwind v4.
Diperbarui Feb 11, 2026
Mengimplementasikan Dark Mode: Panduan Lengkap untuk Developer
Pelajari cara mengimplementasikan dark mode menggunakan CSS custom properties, prefers-color-scheme, JavaScript toggle, dan strategi adaptasi warna yang tepat untuk proyek web apa pun.
Diperbarui Feb 04, 2026
Membangun Color Picker Web Component dari Awal
Bangun color picker aksesibel sebagai Web Component. Implementasikan rendering canvas, slider hue, saluran alpha, dan custom events dengan Shadow DOM.
Diperbarui Feb 02, 2026
CSS color-mix(): Padukan Warna Secara Native di Browser
Pelajari CSS color-mix() untuk memadukan warna native di browser. Kuasai sintaks, ruang warna, dan buat palet dinamis tanpa JavaScript.
Diperbarui Jan 31, 2026
Gamut Warna Dijelaskan: sRGB, P3, dan Rec. 2020
Pahami gamut warna—sRGB, Display P3, dan Rec. 2020—dan cara menggunakan CSS wide-gamut dengan @media (color-gamut) untuk layar modern.
Diperbarui Jan 28, 2026
Fungsi Warna CSS: rgb(), hsl(), oklch() Dibandingkan
Bandingkan setiap fungsi warna CSS—rgb(), hsl(), oklch(), color-mix(). Pelajari mana yang digunakan, kapan, dan dukungan browsernya.
Diperbarui Jan 22, 2026
Ruang Warna Perseptual: Lab, LCH, Oklab, OKLCH
Jelajahi ruang warna yang seragam secara perseptual — CIE Lab, LCH, Oklab, dan OKLCH. Pelajari bagaimana setiap ruang warna dirancang, di mana ia unggul, dan mana yang digunakan untuk CSS dan desain.
Diperbarui Jan 22, 2026
Komponen Auto-Layout Figma dengan Token Warna
Bangun komponen auto-layout Figma dengan arsitektur token warna. Pelajari pengikatan variabel, token responsif, varian tema, dan developer handoff.
Diperbarui Jan 15, 2026
Color Proofing: Memastikan Akurasi Warna Cetak
Pelajari teknik soft proofing, hard proofing, dan press proof untuk memastikan reproduksi warna cetak yang akurat dari layar ke output akhir.
Diperbarui Jan 13, 2026
CMYK untuk Desainer Web: Ketika Cetak Bertemu Layar
Desainer web perlu memahami CMYK untuk proyek cetak. Pelajari perbedaan gamut, strategi konversi RGB-ke-CMYK, dan alur kerja proofing.
Diperbarui Jan 12, 2026
Bagaimana Kertas Mempengaruhi Warna: Substrat dan Kualitas Cetak
Pahami bagaimana jenis kertas, lapisan, dan berat mempengaruhi warna yang dicetak. Pelajari perbedaan antara kertas berlapis, tidak berlapis, dan khusus untuk akurasi warna.
Diperbarui Jan 09, 2026
Foil Stamping dan Warna Metalik dalam Desain Cetak
Pelajari teknik foil stamping, pilihan tinta metalik, pilihan foil emas dan perak, dan pertimbangan desain untuk materi cetak premium.
Diperbarui Jan 08, 2026
Arsitektur Warna Multi-Brand: Satu Codebase, Banyak Tema
Bangun arsitektur warna multi-brand dengan CSS custom properties dan design token. Dukung white-label theming dari satu codebase dengan integrasi Tailwind.
Diperbarui Jan 06, 2026
Warna dalam 3D dan WebGL: Ruang Warna Linear dan PBR
Pahami warna dalam rendering 3D—sRGB vs linear RGB, koreksi gamma, warna physically-based rendering, manajemen warna Three.js, dan HDR dalam web 3D.
Diperbarui Jan 02, 2026
Warna untuk Penceritaan Data: Melampaui Warna Grafik Bawaan
Lampaui warna grafik bawaan. Pelajari palet sekuensial, divergen, dan kategorikal, aksesibilitas visualisasi data, dan skala warna D3/Chart.js.
Diperbarui Des 29, 2025
Animasi Warna dalam CSS: Transitions dan Keyframes
Kuasai animasi warna CSS dengan transitions, animasi keyframe, rotasi hue HSL, interpolasi OKLCH untuk kehalusan perseptual, dan praktik terbaik performa.
Diperbarui Des 26, 2025
Fungsi CSS light-dark(): Pergantian Tema Native
Gunakan CSS light-dark() untuk pergantian tema native. Ganti toggle JavaScript dan media queries dengan satu fungsi CSS untuk warna mode terang dan gelap.
Diperbarui Des 24, 2025
Model Warna RGB: Cara Layar Menampilkan Warna
Pahami model warna RGB—pencampuran cahaya merah, hijau, biru, rentang 0–255, fungsi CSS rgb(), dan mengapa layar menampilkan 16,7 juta warna.
Diperbarui Des 20, 2025
Alur Kerja Manajemen Warna: Dari Layar ke Cetak
Kuasai manajemen warna dari kalibrasi monitor hingga proofing cetak. Pelajari profil ICC dan alur kerja untuk akurasi warna dari layar ke cetak.
Diperbarui Des 14, 2025
Membangun Sistem Warna untuk Design System Anda
Bangun arsitektur warna sistematis untuk design system Anda dengan konvensi penamaan, generasi shade, token semantis, dan pola implementasi.
Diperbarui Des 09, 2025
Merancang API Warna: REST Endpoint untuk Data Warna
Rancang REST API warna dengan endpoint untuk konversi warna, pencarian, pengecekan kontras, dan pembuatan Palet. Pelajari desain skema dan praktik terbaik.
Diperbarui Des 06, 2025
Teknik Warna SVG: Fill, Stroke, dan Gradien
Kuasai teknik warna SVG: atribut fill dan stroke, gradien linear dan radial, kata kunci currentColor, dan styling SVG berbasis CSS modern.
Diperbarui Nov 29, 2025
Aturan 60-30-10: Proporsi Warna dalam Desain
Kuasai aturan 60-30-10 untuk desain. Pelajari cara warna dominan, sekunder, dan aksen bekerja bersama, dengan hex dan tips melanggar aturan.
Diperbarui Nov 24, 2025
Pemisahan Warna Dijelaskan: Menyiapkan File untuk Cetak
Pahami pemisahan warna CMYK, pelat spot color, trapping, dan tanda registrasi. Siapkan file siap cetak dengan pemisahan warna yang benar.
Diperbarui Nov 21, 2025
HSL vs HSV: Model Warna Mana yang Harus Digunakan?
Pahami perbedaan model warna HSL dan HSV, kapan masing-masing sesuai untuk web atau color picker, dan perbandingannya dengan fungsi warna CSS.
Diperbarui Nov 19, 2025
Sistem Warna Semantis: Menamai Warna berdasarkan Tujuan, Bukan Rona
Bangun sistem warna semantis berbasis tujuan (success, warning, error). Pelajari arsitektur token dan implementasi dalam CSS dan Tailwind.
Diperbarui Nov 14, 2025
Sintaks Warna Relatif CSS: Transformasikan Warna Apapun Secara Dinamis
Kuasai sintaks warna relatif CSS untuk mentransformasi warna secara dinamis. Sesuaikan hue, saturasi, lightness, dan saluran alpha langsung di stylesheet Anda.
Diperbarui Nov 10, 2025
Mendesain untuk Mode Kontras Tinggi: Windows, macOS, dan Web
Desain untuk mode kontras tinggi di Windows, macOS, dan web. Pelajari forced-colors CSS, kata kunci warna sistem, dan strategi pengujian.
Diperbarui Nov 06, 2025
Memahami Kode Warna Hex: Panduan Lengkap
Kuasai kode warna hex dari awal. Pelajari arti #RRGGBB, cara membaca nilai hex apa pun, notasi singkat, transparansi alpha, dan cara mengonversi antar format.
Diperbarui Okt 29, 2025
Warna dalam Seni Generatif: Algoritma untuk Palet Indah
Buat warna indah dalam seni generatif dengan spiral HSL, palet berbasis noise, sampling rasio emas, dan algoritma warna p5.js untuk estetika prosedural.
Diperbarui Okt 26, 2025
Theming Warna Dinamis di React: Melampaui Variabel CSS
Implementasikan theming warna dinamis di React menggunakan variabel CSS, context provider, dan Tailwind CSS. Bangun tema yang dapat dikustomisasi pengguna dengan generasi warna runtime.
Diperbarui Okt 23, 2025
Panduan Pantone Matching System: Panduan Lengkap untuk Desainer
Pelajari cara kerja Pantone Matching System, perbedaan antara buku berlapis dan tidak berlapis, warna spot vs proses, dan batasan konversi Pantone ke hex.
Diperbarui Okt 19, 2025
Aksesibilitas Lebih dari Sekadar Kontras: Warna dalam Desain Inklusif
Aksesibilitas warna melampaui rasio kontras. Pelajari prinsip 'bukan hanya warna' WCAG, indikator fokus, status error, dan pola ramah buta warna.
Diperbarui Okt 17, 2025
Warna Screen Printing: Panduan untuk Desainer
Kuasai teknik warna screen printing termasuk pemisahan warna, layar halftone, tinta spot color, dan persiapan desain untuk material screen-printed.
Diperbarui Okt 14, 2025
Interpolasi Warna dalam CSS: Mengapa OKLCH Unggul
Interpolasi warna CSS menentukan cara gradien memadukan warna. OKLCH menghasilkan hasil vivid dan merata secara perseptual—RGB dan HSL tidak.
Diperbarui Okt 12, 2025
Daftar Periksa Aksesibilitas Warna untuk Pengembang Web
Daftar periksa aksesibilitas warna untuk pengembang web: rasio kontras WCAG, indikator fokus, alat pengujian, dan pemeriksaan otomatis.
Diperbarui Okt 07, 2025
Manipulasi Warna JavaScript: Library dan Teknik
Kuasai manipulasi warna JavaScript dengan chroma.js, culori, dan tinycolor2. Parse, transformasi, dan buat warna secara programatik untuk aplikasi web.
Diperbarui Okt 02, 2025
Warna dalam Animasi Web: GSAP, Framer Motion, dan CSS
Kuasai animasi warna dalam CSS transitions, GSAP, dan Framer Motion. Pelajari interpolasi OKLCH, teknik keyframe, dan optimasi performa.
Diperbarui Sep 29, 2025
Spot Colors vs Process Colors: Panduan Warna Cetak
Perbedaan spot colors dan process colors CMYK, kapan menggunakan masing-masing, pengaruh biaya cetak, dan cara menyiapkan file yang benar.
Diperbarui Sep 27, 2025
Algoritma Kontras Warna: WCAG 2 vs APCA
Pahami cara WCAG 2 dan APCA menghitung kontras. Bandingkan hasilnya dan pelajari mana yang digunakan untuk desain aksesibel.
Diperbarui Sep 25, 2025
Sistem Warna SwiftUI: Membangun Palet Warna Adaptif
Bangun palet warna adaptif dalam SwiftUI. Pelajari Color vs UIColor, warna asset catalog, warna dark mode dinamis, dan pola warna aksesibilitas.
Diperbarui Sep 19, 2025
Design Token untuk Warna: Dari Figma ke Kode
Implementasikan color design token dari Figma ke kode produksi menggunakan Style Dictionary. Pelajari penamaan token, transformasi, dan output multi-platform.
Diperbarui Sep 12, 2025
Konvensi Penamaan Warna dalam CSS dan Design System
Jelajahi warna bernama CSS, penamaan semantis dengan custom properties, skala gaya Tailwind, dan praktik terbaik nama warna dalam design system.
Diperbarui Sep 06, 2025
Warna dalam Desain Email: Apa yang Berhasil di Semua Klien
Kuasai warna email di Outlook, Gmail, dan Apple Mail. Pelajari strategi aman, perbaikan dark mode, dan persyaratan inline style.
Diperbarui Sep 05, 2025
Color Theming di React: CSS Variables dan Context
Bangun color theming yang skalabel di React menggunakan CSS custom properties dan Context API. Mencakup arsitektur tema, Tailwind CSS themes, dan strategi multi-brand.
Diperbarui Sep 03, 2025
Performa Warna Web: Gradien, Bayangan, dan Filter
Optimalkan performa warna web. Bagaimana gradien, box-shadows, CSS filters, dan backdrop-filter memengaruhi rendering dan cara GPU-accelerate.
Diperbarui Sep 01, 2025
Warna Responsif: Mengadaptasi Warna untuk Layar Berbeda
Pelajari bagaimana warna berubah di berbagai layar, gamut warna, dan mode gelap. Gunakan media query CSS dan properti kustom untuk membangun sistem warna responsif untuk layar apa pun.
Diperbarui Agu 31, 2025
Kombinasi Warna Signage untuk Visibilitas Maksimum
Kombinasi warna signage paling terlihat, keterbacaan jarak jauh, persyaratan ADA, pertimbangan LED, dan pengaruh material dan pencahayaan.
Diperbarui Agu 30, 2025
Cara Memilih Warna Brand: Panduan Langkah demi Langkah
Panduan langkah demi langkah memilih warna brand. Meliputi riset, analisis industri, psikologi warna, dan dokumentasi panduan brand.
Diperbarui Agu 29, 2025