🎨 Renk Şeması Oluşturucu — 5 Renkli Palet Yap

Generate harmonious 5-color schemes from any base color. Complementary, analogous, triadic, tetradic, monochromatic. Export as CSS variables or Tailwind.

Enter a base color and instantly see five harmonious colors generated using classic color theory rules: complementary (opposite), analogous (adjacent), triadic (three equidistant), tetradic (four), or monochromatic. Export as CSS custom properties, a Tailwind config, or JSON.

Base Color

Scheme

Export as:

How to Use

Pick a base color

Click the base color swatch or enter a HEX value to set your starting color.

Choose a scheme

Select Complementary, Analogous, Triadic, Tetradic, or Monochromatic from the scheme selector.

Export the palette

Lock colors you want to keep, click Regenerate to vary others, then export as CSS variables, Tailwind, or JSON.

Frequently Asked Questions

What is a color palette in design? +

A color palette is a set of colors chosen to work harmoniously together in a design. Color theory defines relationships between colors: complementary (opposite on the color wheel), analogous (adjacent), triadic (three equidistant), tetradic (four), and monochromatic (same hue, varying lightness).

What is a complementary color scheme? +

Complementary colors are directly opposite each other on the color wheel (e.g., blue and orange, red and green). They create strong contrast and visual tension — ideal for call-to-action buttons and highlights that need to stand out.

What is an analogous color scheme? +

Analogous colors are adjacent on the color wheel (e.g., blue, blue-green, green). They create harmonious, natural-looking combinations with low contrast — great for backgrounds, serene designs, and nature-inspired UIs.

How do I lock a color I like? +

Click the lock icon on any color swatch to lock it. Locked colors are preserved when you click Regenerate or change the scheme type. This lets you keep a brand color while varying the supporting palette.

How do I export the palette? +

Use the Export dropdown to copy as CSS custom properties (--color-1: #abc), Tailwind config colors object, or a raw JSON array. All formats are ready to paste directly into your project.

Tam Rehber: Renk Paleti Üreteci

Renk Paleti Üreteci, yerleşik renk uyum teorisini kullanarak tek bir temel renkten uyumlu renk setleri oluşturur. Paletleri CSS özel özellikleri, Tailwind uyumlu ölçekler ve tasarım token JSON'u olarak dışa aktarır.

Renk Uyum Teorisi

Renk uyumu, birlikte kullanıldığında estetik açıdan hoş olan renk tekerleğindeki tonlar arasındaki öngörülebilir ilişkileri tanımlar:

Tamamlayıcı — Tekerleğin tam karşısındaki iki renk (örn. mavi ve turuncu). Yüksek kontrast, enerjik.
Analojik — Tekerleğe bitişik üç ila beş renk. Doğal, uyumlu, düşük kontrast.
Üçlü — 120° aralıklarla eşit aralıklı üç renk. Canlı ve dengeli.
Dörtlü (kare) — 90° aralıklarla dört renk. Zengin ve karmaşık.
Bölünmüş tamamlayıcı — Bir temel renk ve tamamlayıcısının yanındaki iki renk. Tamamlayıcıya benzer kontrast ancak daha yumuşak.

Palet Oluşturmak için HSL ve HSB

HSL (Ton, Doygunluk, Açıklık), palet oluşturma için tercih edilen renk modelidir. RGB'nin aksine, doğrudan insan algısıyla örtüşür: renk tonu almak için açıklığı öngörülü biçimde artırabilir, gölge almak için azaltabilirsiniz. Üretici dahili olarak HSL'de çalışır ve araçlarınızın gerektirdiği formatı kullanabilmeniz için HSL, HEX ve RGB çıktısı sunar.

60-30-10 Tasarım Kuralı

60-30-10 kuralı, görsel tasarımda temel bir ilkedir: görsel alanın %60'ını baskın renge (genellikle nötr), %30'unu ikincil renge ve %10'unu vurgu rengine ayırın. Bu oran, izleyicinin bakışını yönlendiren bir hiyerarşi oluşturur.

Ton, Gölge ve Nüans Farkları

Ton (Tint) — Tona beyaz eklemek. HSL'de açıklığı artırır. Pastel varyantlar üretir.
Gölge (Shade) — Tona siyah eklemek. HSL'de açıklığı azaltır. Derin, zengin varyantlar üretir.
Nüans (Tone) — Tona gri eklemek. Doygunluğu azaltır. Sofistike UI paletlerinde kullanılan soluk varyantlar üretir.

WCAG Kontrast Denetimi

Oluşturulan paletteki her renk örneği, hem beyaz hem de siyah metin için WCAG 2.1 kontrast oranlarına göre otomatik olarak kontrol edilir:

AA — Normal metin için minimum 4.5:1, büyük metin için 3:1.
AAA — Normal metin için gelişmiş 7:1, büyük metin için 4.5:1.

CSS Özel Özelliklerine Dışa Aktarma

:root {
  --color-marka-50: #eff6ff;
  --color-marka-100: #dbeafe;
  --color-marka-500: #3b82f6;
  --color-marka-900: #1e3a5f;
}

Bu token'ları stil sayfanız genelinde var(--color-marka-500) ile referans gösterin. Paleti tek bir yerde güncellemek değişiklikleri her yere yayar.

Tailwind Tarzı Ölçek (50–950)

Tailwind CSS, 50'den (en açık) 950'ye (en koyu) kadar her değer arasında algısal olarak düzgün bir adımla sayısal bir ölçeği popüler hale getirdi. Üretici, temel renginizi 500 konumuna eşler ve tutarlı açıklık artışları sağlayarak ölçeğin geri kalanını algoritmik olarak türetir.

Tasarım Sistemi Token'larında Kullanım

Style Dictionary ve Theo gibi tasarım token sistemleri, token adlarını renk değerleriyle eşleştiren JSON yapılarını işler. Üretici, hem tasarımcıların hem de mühendislerin aynı gerçek kaynağa başvurabilmesi için sayısal ölçeğin üzerine katmanlı semantik adlandırmayla (birincil, ikincil, yıkıcı, başarı, uyarı) token'a hazır bir JSON dışa aktarır.

İlgili Araçlar

Kesin bir başlangıç temel rengi seçmek için Renk Seçici'yi kullanın. Palet renklerinden degrade arka planlar oluşturmak için Degrade Üreteci'ni kullanın.