Color Palette Generator
Buat palet warna komplementer, analogi, triadik, dan tetradik dari warna dasar apa pun
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.
Kasus Penggunaan Color Palette Generator
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.
| Skema | Warna | Sudut hue | Terbaik untuk |
|---|---|---|---|
| Complementary | 2 | 180 | High contrast, call-to-action buttons |
| Analogous | 3 | -30, 0, +30 | Harmonious, low-tension backgrounds |
| Triadic | 3 | 0, 120, 240 | Balanced variety, dashboards |
| Split-Complementary | 3 | 0, 150, 210 | Softer contrast than complementary |
| Tetradic (Rectangle) | 4 | 0, 90, 180, 270 | Rich palettes, complex UIs |
| Monochromatic | 5 | Same hue, varied lightness | Subtle, 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.
Contoh Kode
Buat palet warna secara terprogram menggunakan konversi HSL dan rotasi hue.
// 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"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']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
}