Pembuatan Palet Warna Membangun Palet Lengkap Dari Satu Hex:

Kamu memiliki hex warna merek. Mungkin berasal dari logo, panduan gaya, atau sekadar warna yang disukai. Sekarang kamu butuh palet lengkap — tint, shade, warna komplementer, token semantik, dan variasi mode gelap. Panduan ini menjelaskan secara eksak bagaimana membangunnya, secara programatis dan benar.

Teori Warna yang Benar-Benar Penting

Sebagian besar teori warna yang kamu temui di sekolah desain tidak langsung terapkan pada pekerjaan UI. Berikut yang benar-benar relevan:

Untuk kebanyakan library UI, kamu akan menggunakan warna merek sebagai utama, warna analog sebagai sekunder, dan warna komplementer atau split-complementary untuk aksen dan keadaan interaktif.

Mengapa HSL Lebih Baik dari Hex untuk Pekerjaan Palet

Hex dan RGB mengkodekan warna sebagai saluran perangkat keras — bukan seperti yang dirasakan manusia. HSL (Warna, Kehadiran, Kecerahan) berpeta pada persepsi manusia:

• Warna — warna itu sendiri (0–360°, di mana 0 = merah, 120 = hijau, 240 = biru)
• Kehadiran — seberapa hidup atau abu-abu (0% = abu-abu, 100% = warna penuh)
• Kecerahan — seberapa terang atau gelap (0% = hitam, 100% = putih)

Ini penting karena untuk membuat tint dari warna merek, kamu tidak mencampurkan dengan putih — kamu meningkatkan kecerahan di HSL. Warna (hue) tetap sama. Ini tidak terjamin ketika kamu melakukan perhitungan matematis terhadap nilai hex.

Cara Membangun Tint dan Shade Secara Tepat

Cara yang salah umum terjadi: lerp hex menuju #ffffff untuk tint, menuju #000000 untuk shade. Ini menyebabkan drift warna dan artefak penurunan kehadiran — "biru terang" menjadi abu-abu yang terlalu lemah.

Cara yang benar: ubah hex ke HSL, lalu ubah hanya kecerahan:

/**
 * Generate a 10-step shade scale from a base HSL color.
 * Returns shades from 50 (lightest) to 950 (darkest), like Tailwind.
 * @param {number} h - Hue (0–360)
 * @param {number} s - Saturation (0–100)
 * @param {number} l - Base lightness (0–100)
 * @returns {Object} - Scale object: { 50, 100, 200, ..., 900, 950 }
 */
function generateShadeScale(h, s, l) {
  // Lightness stops mapped to Tailwind-style scale keys
  const stops = [
    [50,  95],
    [100, 90],
    [200, 80],
    [300, 70],
    [400, 60],
    [500, l],   // 500 = your base color
    [600, 40],
    [700, 30],
    [800, 20],
    [900, 12],
    [950, 7],
  ];

  const scale = {};
  for (const [key, lightness] of stops) {
    scale[key] = `hsl(${h}, ${s}%, ${lightness}%)`;
  }
  return scale;
}

// Example: brand color #3b82f6 (Tailwind blue-500)
// HSL ≈ hsl(217, 91%, 60%)
const palette = generateShadeScale(217, 91, 60);
// palette[50]  → "hsl(217, 91%, 95%)" — near-white blue tint
// palette[500] → "hsl(217, 91%, 60%)" — brand color
// palette[900] → "hsl(217, 91%, 12%)" — near-black blue shade

Pintu masuk utama: warna dan kehadiran tetap konstan di seluruh skala. Hanya kecerahan yang berubah. Ini menghasilkan skala yang konsisten secara visual dan terasa sebagai keluarga warna yang sama pada setiap bobot.

Perlu membuat ini dari hex? Gunakan Pengekstrak Palet Warna untuk mengekstrak nilai HSL dari warna apa pun secara instan.

Skala Desain 50–950

Tailwind populerkan skala 11 tingkat (50, 100–900, 950). Sekarang ini menjadi standar yang diadopsi secara luas dalam sistem desain karena dapat dipetakan secara langsung ke kebutuhan:

• 50–100: Latar belakang halaman, keadaan hover pada permukaan terang
• 200–300: Batas, pembagi halus, keadaan nonaktif
• 400–500: Elemen interaktif — tombol, tautan, lingkaran fokus
• 600–700: Keadaan hover/aktif untuk elemen interaktif
• 800–900: Teks pada latar belakang terang
• 950: Sekitar hitam untuk judul dengan kontras tinggi

Ketika kamu membuat skala ini untuk warna merek, kamu secara otomatis mendapatkan semua warna yang dibutuhkan untuk setiap keadaan komponen — tanpa harus membuat keputusan warna per komponen.

Dari Hex Merek ke Palet yang Bekerja Lengkap

Berikut adalah alur kerja praktis ketika kamu memiliki satu hex merek:

1. Ubah ke HSL. Mengubah #1d4ed8 → hsl(221, 74%, 48%)
2. Buat skala utama. Jalankan fungsi shade di atas untuk skala 11 tingkat penuh.
3. Turunkan sekunder. Rotasi hue ±30° untuk sekunder analog: hsl(251, 74%, 48%) (ungu-biru).
4. Turunkan aksen. Rotasi hue 180° untuk komplementer: hsl(41, 74%, 48%) (kuning terang).
5. Buat skala untuk ketiganya. Fungsi shade yang sama, input hue yang berbeda.

Kamu bisa memperlihatkan hasil lengkap — termasuk jenis harmoni — sebelum menulis satu baris kode. Generator Skema Warna Token Warna Semantik

Nilai skala murni digunakan untuk primitif palet. Token semantik adalah yang benar-benar digunakan oleh komponen:

Pemisahan ini yang membuat mode gelap menjadi terkendali. Komponen-mu merujuk ke

const tokens = {
  // Map scale values to semantic names
  'color-primary':         palette[500],  // brand color
  'color-primary-hover':   palette[600],
  'color-primary-subtle':  palette[50],
  'color-text':            palette[900],
  'color-text-muted':      palette[600],
  'color-border':          palette[200],
  'color-bg':              palette[50],

  // Status colors — separate scales per semantic group
  'color-success':         'hsl(142, 71%, 45%)',
  'color-warning':         'hsl(38, 92%, 50%)',
  'color-danger':          'hsl(0, 84%, 60%)',
};

. Dalam mode gelap, kamu hanya perlu memetakan token — bukan setiap komponen. color-text, bukan palette[900]Mode Gelap: Inversi Skala

Palet HSL yang baik akan terinversi hampir secara otomatis. Aturan: tukar ujung terang dan gelap, lalu sesuaikan titik tengah sedikit untuk keseimbangan persepsi.

Karena warna dan kehadiran tetap konstan di seluruh skala, identitas merekmu bertahan saat diinversi. Warna utama biru dalam mode terang terbaca sebagai biru yang sama dalam mode gelap — hanya lebih terang di atas permukaan gelap. Ini adalah manfaat komposit dari membangun palet dengan HSL dari awal.

// Light mode
const lightTokens = {
  'color-bg':    palette[50],   // near-white background
  'color-text':  palette[900],  // near-black text
  'color-border': palette[200],
};

// Dark mode — same scale, inverted stops
const darkTokens = {
  'color-bg':    palette[950],  // near-black background
  'color-text':  palette[50],   // near-white text
  'color-border': palette[800],
};

Menggabungkan Semuanya

Dari satu hex, kamu sekarang bisa menghasilkan palet lengkap, bernama secara semantik, dan siap untuk mode gelap dalam kurang dari 50 baris JavaScript. Langkah kunci:

Ubah hex → HSL

1. Buat skala 11 tingkat berdasarkan kecerahan, dengan menjaga warna dan kehadiran tetap konstan
2. Turunkan warna sekunder dan aksen melalui rotasi
3. Peta nilai skala dasar ke token semantik
4. Perbarui token untuk mode gelap
5. Untuk prototipe cepat tanpa harus menulis kode, gunakan

untuk menangani semua ini secara visual — ekspor hasilnya sebagai variabel CSS atau file token JSON, lalu masukkan langsung ke sistem desainmu. Generator Skema Warna dan Pengekstrak Palet Warna tangani semua ini secara visual — ekspor hasilnya sebagai variabel CSS atau file token JSON dan masukkan langsung ke sistem desain Anda.

Anda mungkin juga menyukai

Pemverifikasian Skema JSON: Mendeteksi Pelanggaran Kontrak API Sebelum Dikirim

Baca selengkapnya "

Diterbitkan pada 11 Mei 2026

Verifikasi Tanda Tangan PDF: Apa yang Perlu Diketahui Pengembang

Baca selengkapnya "

Diterbitkan pada 10 Mei 2026

Markdown vs HTML: Kapan Harus Menggunakan Masing-Masing untuk Dokumentasi, README, dan API

Baca selengkapnya "

Diterbitkan pada 9 Mei 2026

Parameter UTM: Cara Mencatat Kampanye Pemasaran Tanpa Menebak

Baca selengkapnya "

Diterbitkan pada 8 Mei 2026