Renk Paleti Oluşturucu

Herhangi bir temel renkten tamamlayıcı, analoji, triadik ve tetradik renk paletleri oluşturun

Örnek dene

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.

Anında Palet Oluşturma
Bir temel renk ve şema türü seçin; palet hemen görünür. Form gönderimi yok, yükleme ekranı yok. Temel rengi değiştirdiğinizde çıktı gerçek zamanlı olarak güncellenir.
🎨
Altı Uyum Şeması
Tamamlayıcı, analoji, triadik, bölünmüş tamamlayıcı, tetradik veya monokromatik şemalar arasından seçim yapın. Her şema, yüksek kontrastlı çiftlerden ince tek-tonlu degradelere kadar farklı bir görsel etki üretir.
🔒
Gizlilik Odaklı İşleme
Tüm renk hesaplamaları tarayıcınızda çalışır. Herhangi bir sunucuya renk verisi gönderilmez. Sayfa yüklendikten sonra araç çevrimdışı da çalışır.
📋
Tek Tıkla Dışa Aktarma
Tek hex kodlarını veya tüm paleti tek tıkla kopyalayın. Doğrudan CSS, Figma, Tailwind yapılandırması veya hex değerlerini kabul eden herhangi bir tasarım aracına yapıştırın.

Renk Paleti Oluşturucu Kullanım Senaryoları

Arayüz Teması Oluşturma
Yeni bir uygulama geliştiren ön yüz geliştiriciler, bir marka rengiyle başlayarak birincil, ikincil ve vurgu değerleri için tam bir palet oluşturabilir. Triadik veya tetradik şemalar, düğmeler, bağlantılar, uyarılar ve arka planlar için yeterli çeşitlilik sağlar.
Tasarım Sistemi Renk Değerleri
Tasarım sistemi mühendisleri, tek bir marka tonu için açıklık ölçeği oluşturmak amacıyla monokromatik paletler kullanır; ardından her adımı adlandırılmış bir değere (ör. blue-100'den blue-900'e) eşler.
Veri Görselleştirme
Veri mühendisleri ve analistler, çakışmayan grafik serileri için birbirinden ayrışan renkler ister. Analoji veya triadik palet, grafiği görsel olarak tutarlı tutarken 3-6 seri için yeterli ayrışma sağlar.
Pazarlama Açılış Sayfaları
Kampanya sayfaları tasarlayan tasarımcılar, markanın birincil rengiyle başlar ve logo ile çakışmadan CTA düğmeleri ile vurgulanan bölümler için vurgu renkleri bulmak amacıyla bölünmüş tamamlayıcı şema kullanır.
Erişilebilirlik Eşleştirmesi
WCAG uyumluluğunu test eden kalite güvence mühendisleri, oluşturulan palet renklerini eşleştirir ve bir kontrast denetleyicisinden geçirir. Tamamlayıcı veya bölünmüş tamamlayıcı şemadan başlamak çoğunlukla yüksek parlaklık kontrastına sahip çiftler üretir.
Renk Teorisi Öğrenmek
Tasarım öğrencileri, aynı temel renkte altı şema arasında geçiş yaparak her geometrinin tonları çember boyunca nasıl dağıttığını görebilir. Görsel çıktı, soyut açıları somut hale getirir.

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.

ŞemaRenk sayısıTon açılarıEn iyi kullanım
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

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.

Ton (0-360)
Renk çemberindeki konumu derece cinsinden ifade eder. 0 kırmızı, 60 sarı, 120 yeşil, 180 camgöbeği, 240 mavi, 300 ise macenta. Palet şemaları, doygunluk ve açıklığı sabit tutarken bu değeri döndürür.
Doygunluk (0-100%)
Rengin ne kadar canlı olduğunu ifade eder. %100 tam doygun, %0 ise gridir. Palet şemaları, oluşturulan tüm renklerin aynı yoğunluğu paylaşması için temel doygunluğu korur.
Açıklık (0-100%)
Rengin ne kadar parlak olduğunu ifade eder. %0 siyah, %50 saf ton, %100 beyazdır. Monokromatik şemalar tonal bir ölçek oluşturmak için açıklığı değiştirir; diğer tüm şemalar açıklığı sabit tutar.

Kod Örnekleri

HSL dönüşümü ve ton rotasyonu kullanarak renk paletlerini programatik olarak oluşturun.

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
}

Sıkça Sorulan Sorular

Tamamlayıcı ile bölünmüş tamamlayıcı arasındaki fark nedir?
Tamamlayıcı, renk çemberinde tam olarak 180 derece ayrı iki renk kullanır ve maksimum ton kontrastı sağlar. Bölünmüş tamamlayıcı, doğrudan karşıtı temel renkten 150 ve 210 derece konumundaki iki renkle değiştirir; böylece daha az görsel gerilimle güçlü kontrast elde edilir. Bölünmüş tamamlayıcı, hiçbir vurgu rengi temele doğrudan karşı gelmediğinden arayüz tasarımında çalışmak için daha uygundur.
Bir arayüz paletinde kaç renk olmalıdır?
Çoğu tasarım sistemi 3-5 temel ton kullanır: bir birincil, bir ikincil, bir nötr ve bir ya da iki vurgu. Her temel ton ardından bir açıklık ölçeğine (100'den 900'e) sahip olur. Temel tonlar için triadik veya tetradik şemayla başlayın, ardından her biri için monokromatik ölçekler oluşturun.
Bu paletleri Tailwind CSS ile kullanabilir miyim?
Evet. Hex değerlerini kopyalayın ve tailwind.config.js ya da tailwind.config.ts dosyanızdaki colors nesnesine ekleyin. Monokromatik bir ölçek için her tonu Tailwind'in adlandırma kuralıyla eşleşmesi amacıyla numaralı bir anahtara (50, 100, 200 vb.) eşleyin.
Bazı oluşturulan renkler neden soluk veya mat görünüyor?
Temel renginizin doygunluğu düşükse ya da açıklığı aşırı değerdeyse (%0 veya %100'e çok yakınsa), döndürülen tonlar da sönük görünür. Oluşturucu, temel rengin doygunluk ve açıklık değerlerini korur. Canlı paletler için doygunluğu %50'nin üzerinde ve açıklığı %30 ile %70 arasında olan bir temel renk seçin.
HSL ile HSV/HSB arasındaki fark nedir?
HSL ve HSV'nin her ikisi de tonu dairesel bir eksen olarak kullanır; ancak parlaklığı farklı biçimde tanımlar. HSL'de açıklık %50 saf tonu, %100 ise beyazı temsil eder. HSV'de (HSB olarak da bilinir) değer %100 saf tondur ve doygunluğu azaltmadan beyaza ulaşmanın yolu yoktur. Çoğu palet oluşturucu HSL kullanır; çünkü açıklık ekseni, renk parlaklığını algılamamıza daha sezgisel biçimde karşılık gelir.
Renk uyum şemaları erişilebilirlikle nasıl ilişkilidir?
Renk uyumu ile WCAG kontrastı birbirinden ayrı konulardır. Tamamlayıcı bir çiftin maksimum ton kontrastı vardır; ancak bu, metin okunabilirliği için yeterli parlaklık kontrastını garanti etmez. Palet oluşturduktan sonra her ön plan/arka plan çiftini WCAG AA'ya (normal metin için 4,5:1 oranı) karşı test edin. Benzer açıklığa sahip renkler, ton ilişkisinden bağımsız olarak başarısız olur.
HSL, CSS hsl() fonksiyonuyla aynı mı?
Evet. CSS hsl() fonksiyonu üç parametre alır: derece cinsinden ton (0-360), yüzde olarak doygunluk ve yüzde olarak açıklık. CSS Color Düzey 4, eğik çizgiyle ayrılmış bir alfa değerini de kabul eder: hsl(240 60% 50% / 0.8). Bu oluşturucu tarafından kullanılan HSL modeli, CSS spesifikasyonuyla tam olarak eşleşir; dolayısıyla ton, doygunluk ve açıklık değerlerini doğrudan stil dosyalarınıza yapıştırabilirsiniz.