Renk Paleti Oluşturucu
Herhangi bir temel renkten tamamlayıcı, analoji, triadik ve tetradik renk paletleri oluşturun
Temel renk
Renk şeması
Oluşturulan palet
Renk Paleti Nedir?
Renk paleti, bir tasarımda birlikte kullanılmak üzere seçilmiş sabit bir renk kümesidir. Bir marka, web sitesi veya illüstrasyon için tek bir temel renk belirlediğinizde, yanında duracak tamamlayıcı renkler bulmanız gerekir. Renk paleti oluşturma, renk teorisinin kurallarını —özellikle standart HSL renk çemberindeki geometrik ilişkileri— uygulayarak bu seçimi otomatikleştirir.
HSL (Ton, Doygunluk, Açıklık) renk çemberi, tonları 360 derecelik bir dairede düzenler. Kırmızı 0 derecede, yeşil 120 derecede, mavi ise 240 derecede yer alır. Her renk uyum şeması, temel renkten belirli açısal uzaklıklarda tonlar seçerek çalışır. Örneğin tamamlayıcı çift, renk çemberinde tam olarak 180 derece ayrı iki renk kullanır. Analoji seti ise her iki yönde 30 derece içindeki renkleri seçer. Bu geometrik kurallar dengeli kombinasyonlar üretir; çünkü seçilen tonlar çember boyunca dağılır ve tek bir bölgede yığılmaz.
Bu araç, herhangi bir hex rengi girdi olarak alır, HSL'ye dönüştürür, seçilen şema tarafından tanımlanan açılara göre tonu döndürür ve sonuçları tekrar hex biçimine çevirir. Altı şemayı destekler: tamamlayıcı, analoji, triadik, bölünmüş tamamlayıcı, tetradik ve monokromatik. Her şema 2 ile 5 arasında farklı sayıda çıktı rengi üretir.
Bu Renk Paleti Oluşturucuyu Neden Kullanmalısınız?
Deneme yanılma yöntemiyle uyumlu renkler bulmak yavaş ve tutarsızdır. Palet oluşturucu, renk teorisi kurallarını anında uygulayarak herhangi bir başlangıç noktasından matematiksel olarak dengeli sonuçlar verir.
Renk Paleti Oluşturucu Kullanım Senaryoları
Renk Uyum Şemaları Karşılaştırması
Her uyum şeması, HSL çemberinde temel renkten ton rotasyonu açılarına göre renk seçer. Aşağıdaki tablo her şemayı, ürettiği renk sayısını, rotasyon açılarını ve en iyi çalıştığı tasarım bağlamını listeler.
| Şema | Renk sayısı | Ton açıları | En iyi kullanım |
|---|---|---|---|
| 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 |
HSL Renk Çemberi Rotasyonu Nasıl Çalışır?
Bu araçtaki tüm palet oluşturma, HSL renk modeline dayanır. Üç eksenini anlamak, temel rengin her şema altında nasıl dönüşeceğini tahmin etmenizi sağlar.
Kod Örnekleri
HSL dönüşümü ve ton rotasyonu kullanarak renk paletlerini programatik olarak oluşturun.
// 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
}