Color Palette Generator

Buat palet warna komplementer, analogi, triadik, dan tetradik dari warna dasar apa pun

Coba contoh

Warna dasar

Skema warna

Palet yang dihasilkan

Apa Itu Palet Warna?

Palet warna adalah kumpulan warna yang dipilih untuk bekerja bersama dalam sebuah desain. Ketika Anda memilih satu warna dasar untuk merek, situs web, atau ilustrasi, Anda membutuhkan warna pendamping yang serasi di sampingnya. Pembuatan palet warna mengotomatiskan pilihan tersebut dengan menerapkan aturan teori warna, khususnya hubungan geometris pada roda warna HSL standar.

Roda warna HSL (Hue, Saturation, Lightness) menyusun hue dalam lingkaran 360 derajat. Merah berada di 0 derajat, hijau di 120 derajat, dan biru di 240 derajat. Setiap skema harmoni warna bekerja dengan memilih hue pada jarak sudut tertentu dari warna dasar. Pasangan komplementer, misalnya, menggunakan dua warna yang terpisah 180 derajat. Set analogi memilih warna dalam jangkauan 30 derajat di kedua sisi. Aturan geometris ini menghasilkan kombinasi yang seimbang karena hue yang dipilih tersebar di sekitar roda daripada mengelompok di satu area.

Alat ini menerima warna hex apa pun sebagai input, mengonversinya ke HSL, memutar hue sesuai sudut yang ditentukan oleh skema yang dipilih, dan mengonversi hasilnya kembali ke hex. Alat ini mendukung enam skema: komplementer, analogi, triadik, split-komplementer, tetradik, dan monokromatis. Setiap skema menghasilkan jumlah warna output yang berbeda, mulai dari 2 hingga 5.

Mengapa Menggunakan Color Palette Generator Ini?

Memilih warna yang serasi dengan coba-coba itu lambat dan tidak konsisten. Pembuat palet menerapkan aturan teori warna secara instan, menghasilkan kombinasi yang seimbang secara matematis dari titik awal mana pun.

Pembuatan Palet Seketika
Pilih warna dasar dan jenis skema, palet langsung muncul. Tidak ada pengiriman formulir, tidak ada layar loading. Ubah warna dasar dan output diperbarui secara real time.
🎨
Enam Skema Harmoni
Pilih dari komplementer, analogi, triadik, split-komplementer, tetradik, atau monokomatis. Setiap skema menghasilkan efek visual yang berbeda, mulai dari pasangan kontras tinggi hingga gradien satu hue yang halus.
🔒
Pemrosesan Mengutamakan Privasi
Semua kalkulasi warna berjalan di browser Anda. Tidak ada data warna yang dikirimkan ke server mana pun. Alat ini bekerja secara offline setelah halaman dimuat.
📋
Ekspor dengan Satu Klik
Salin kode hex individual atau seluruh palet dengan satu klik. Tempel langsung ke CSS, Figma, konfigurasi Tailwind, atau alat desain apa pun yang menerima nilai hex.

Kasus Penggunaan Color Palette Generator

Pembuatan Tema UI
Developer frontend yang membangun aplikasi baru dapat memulai dengan warna merek dan menghasilkan palet lengkap untuk token primer, sekunder, dan aksen. Skema triadik atau tetradik menghasilkan variasi yang cukup untuk tombol, tautan, peringatan, dan latar belakang.
Token Warna Design System
Engineer design system menggunakan palet monokomatis untuk menghasilkan skala lightness dari satu hue merek, kemudian memetakan setiap langkah ke token bernama (misalnya blue-100 hingga blue-900).
Visualisasi Data
Data engineer dan analis membutuhkan warna yang berbeda untuk seri grafik agar tidak bertabrakan. Palet analogi atau triadik memberikan pemisahan yang cukup untuk 3-6 seri sekaligus menjaga grafik tetap kohesif secara visual.
Landing Page Marketing
Desainer yang membangun halaman kampanye memulai dari warna primer merek dan menggunakan skema split-komplementer untuk menemukan warna aksen bagi tombol CTA dan bagian yang disorot tanpa bertabrakan dengan logo.
Pemasangan untuk Aksesibilitas
Engineer QA yang menguji kepatuhan WCAG memasangkan warna palet yang dihasilkan dan menjalankannya melalui alat pengecekan kontras. Memulai dari skema komplementer atau split-komplementer sering menghasilkan pasangan dengan kontras luminan yang tinggi.
Mempelajari Teori Warna
Mahasiswa yang mempelajari desain dapat beralih antara keenam skema pada warna dasar yang sama dan melihat bagaimana setiap geometri mendistribusikan hue di sekitar roda. Output visual membuat sudut-sudut abstrak menjadi nyata.

Perbandingan Skema Harmoni Warna

Setiap skema harmoni memilih warna berdasarkan sudut rotasi hue dari warna dasar pada roda HSL. Tabel di bawah ini mencantumkan setiap skema, jumlah warna yang dihasilkan, sudut rotasi, dan konteks desain di mana skema tersebut paling cocok.

SkemaWarnaSudut hueTerbaik untuk
Complementary2180High contrast, call-to-action buttons
Analogous3-30, 0, +30Harmonious, low-tension backgrounds
Triadic30, 120, 240Balanced variety, dashboards
Split-Complementary30, 150, 210Softer contrast than complementary
Tetradic (Rectangle)40, 90, 180, 270Rich palettes, complex UIs
Monochromatic5Same hue, varied lightnessSubtle, single-brand pages

Cara Kerja Rotasi Roda Warna HSL

Semua pembuatan palet dalam alat ini bergantung pada model warna HSL. Memahami ketiga sumbunya membantu Anda memprediksi bagaimana warna dasar akan berubah di setiap skema.

Hue (0-360)
Posisi pada roda warna dalam derajat. 0 adalah merah, 60 adalah kuning, 120 adalah hijau, 180 adalah sian, 240 adalah biru, 300 adalah magenta. Skema palet memutar nilai ini sambil mempertahankan saturasi dan lightness.
Saturation (0-100%)
Seberapa vivid warnanya. 100% berarti penuh saturasi; 0% adalah nuansa abu-abu. Skema palet mempertahankan saturasi dasar sehingga semua warna yang dihasilkan berbagi intensitas yang sama.
Lightness (0-100%)
Seberapa terang warnanya. 0% adalah hitam, 50% adalah hue murni, 100% adalah putih. Skema monokomatis memvariasikan lightness untuk membuat skala tonal; semua skema lainnya mempertahankan lightness tetap.

Contoh Kode

Buat palet warna secara terprogram menggunakan konversi HSL dan rotasi hue.

JavaScript
// Generate a complementary color by rotating hue 180 degrees
function hexToHsl(hex) {
  let r = parseInt(hex.slice(1,3), 16) / 255;
  let g = parseInt(hex.slice(3,5), 16) / 255;
  let b = parseInt(hex.slice(5,7), 16) / 255;
  const max = Math.max(r,g,b), min = Math.min(r,g,b);
  let h = 0, s = 0, l = (max + min) / 2;
  if (max !== min) {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
    else if (max === g) h = ((b - r) / d + 2) / 6;
    else h = ((r - g) / d + 4) / 6;
  }
  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
}

function hslToHex(h, s, l) {
  s /= 100; l /= 100;
  const a = s * Math.min(l, 1 - l);
  const f = n => {
    const k = (n + h / 30) % 12;
    return Math.round(255 * (l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1))));
  };
  return '#' + [f(0), f(8), f(4)].map(v => v.toString(16).padStart(2, '0')).join('');
}

const base = '#6366f1';
const [h, s, l] = hexToHsl(base);
const comp = hslToHex((h + 180) % 360, s, l);
console.log(comp); // → "#f1ee63"
Python
import colorsys

def hex_to_hsl(hex_color: str):
    r, g, b = (int(hex_color[i:i+2], 16) / 255 for i in (1, 3, 5))
    h, l, s = colorsys.rgb_to_hls(r, g, b)
    return round(h * 360), round(s * 100), round(l * 100)

def hsl_to_hex(h: int, s: int, l: int) -> str:
    r, g, b = colorsys.hls_to_rgb(h / 360, l / 100, s / 100)
    return '#{:02x}{:02x}{:02x}'.format(round(r * 255), round(g * 255), round(b * 255))

def complementary(hex_color: str) -> str:
    h, s, l = hex_to_hsl(hex_color)
    return hsl_to_hex((h + 180) % 360, s, l)

def triadic(hex_color: str) -> list[str]:
    h, s, l = hex_to_hsl(hex_color)
    return [hex_color, hsl_to_hex((h + 120) % 360, s, l), hsl_to_hex((h + 240) % 360, s, l)]

print(complementary('#6366f1'))  # → #f1ee63
print(triadic('#6366f1'))        # → ['#6366f1', '#66f163', '#f16366']
Go
package main

import (
	"fmt"
	"math"
)

func hexToHSL(hex string) (float64, float64, float64) {
	var r, g, b uint8
	fmt.Sscanf(hex, "#%02x%02x%02x", &r, &g, &b)
	rf, gf, bf := float64(r)/255, float64(g)/255, float64(b)/255
	max := math.Max(rf, math.Max(gf, bf))
	min := math.Min(rf, math.Min(gf, bf))
	l := (max + min) / 2
	if max == min {
		return 0, 0, l * 100
	}
	d := max - min
	s := d / (2 - max - min)
	if l <= 0.5 {
		s = d / (max + min)
	}
	var h float64
	switch max {
	case rf:
		h = (gf - bf) / d
		if gf < bf { h += 6 }
	case gf:
		h = (bf-rf)/d + 2
	case bf:
		h = (rf-gf)/d + 4
	}
	return h * 60, s * 100, l * 100
}

func hslToHex(h, s, l float64) string {
	s /= 100; l /= 100
	a := s * math.Min(l, 1-l)
	f := func(n float64) uint8 {
		k := math.Mod(n+h/30, 12)
		return uint8(255 * (l - a*math.Max(-1, math.Min(math.Min(k-3, 9-k), 1))))
	}
	return fmt.Sprintf("#%02x%02x%02x", f(0), f(8), f(4))
}

func main() {
	h, s, l := hexToHSL("#6366f1")
	comp := hslToHex(math.Mod(h+180, 360), s, l)
	fmt.Println(comp) // → #f1ee63
}

Pertanyaan yang Sering Diajukan

Apa perbedaan antara komplementer dan split-komplementer?
Komplementer menggunakan dua warna yang terpisah tepat 180 derajat pada roda warna, menghasilkan kontras hue maksimum. Split-komplementer menggantikan lawan langsung dengan dua warna pada 150 dan 210 derajat dari warna dasar, memberikan kontras kuat dengan ketegangan visual yang lebih rendah. Split-komplementer lebih mudah digunakan dalam desain UI karena tidak ada warna aksen yang secara langsung berlawanan dengan warna dasar.
Berapa banyak warna yang sebaiknya dimiliki palet UI?
Sebagian besar design system menggunakan 3-5 hue inti: primer, sekunder, netral, dan satu atau dua aksen. Setiap hue inti kemudian memiliki skala lightness (100 hingga 900). Mulai dengan skema triadik atau tetradik untuk hue inti, lalu buat skala monokomatis untuk masing-masing.
Bisakah saya menggunakan palet ini dengan Tailwind CSS?
Ya. Salin nilai hex dan tambahkan ke objek colors dalam file tailwind.config.js atau tailwind.config.ts Anda. Untuk skala monokomatis, petakan setiap shade ke kunci bernomor (50, 100, 200, dll.) agar sesuai dengan konvensi penamaan Tailwind.
Mengapa beberapa warna yang dihasilkan terlihat kusam atau keruh?
Jika warna dasar Anda memiliki saturasi rendah atau lightness ekstrem (sangat dekat 0% atau 100%), hue yang diputar juga akan tampak redup. Generator mempertahankan nilai saturasi dan lightness warna dasar. Untuk palet yang vivid, pilih warna dasar dengan saturasi di atas 50% dan lightness antara 30% dan 70%.
Apa perbedaan antara HSL dan HSV/HSB?
HSL dan HSV keduanya menggunakan hue sebagai sumbu melingkar, tetapi mendefinisikan kecerahan secara berbeda. Dalam HSL, lightness 50% adalah hue murni dan 100% adalah putih. Dalam HSV (juga disebut HSB), value 100% adalah hue murni dan tidak ada cara mencapai putih tanpa mengurangi saturasi. Sebagian besar pembuat palet menggunakan HSL karena sumbu lightnessnya lebih intuitif dalam merepresentasikan kecerahan warna yang kita rasakan.
Bagaimana skema harmoni warna berkaitan dengan aksesibilitas?
Harmoni warna dan kontras WCAG adalah dua hal yang terpisah. Pasangan komplementer memiliki kontras hue maksimum, tetapi itu tidak menjamin kontras luminan yang cukup untuk keterbacaan teks. Setelah membuat palet, uji setiap pasangan latar depan/latar belakang terhadap WCAG AA (rasio 4.5:1 untuk teks normal). Warna dengan lightness yang serupa akan gagal terlepas dari hubungan hue mereka.
Apakah HSL sama dengan fungsi CSS hsl()?
Ya. Fungsi CSS hsl() menerima tiga argumen: hue dalam derajat (0-360), saturasi sebagai persentase, dan lightness sebagai persentase. CSS Color Level 4 juga menerima nilai alpha yang dipisahkan garis miring: hsl(240 60% 50% / 0.8). Model HSL yang digunakan generator ini sesuai persis dengan spesifikasi CSS, sehingga Anda dapat menempelkan nilai hue, saturasi, dan lightness langsung ke stylesheet Anda.