Softonic

Renk Paleti Jeneratörü

Adım 1 / 4 Palet oluşturucu

Bir HEX temel rengi seçin, uyum şemasını belirleyin ve UI taslağına, landing sayfasına, grafiğe ya da tasarım sistemine kopyalanabilecek bir palet üretin. Araç kısa ve tam HEX değerlerini normalleştirir, paleti HSL üzerinde renk tonu ve açıklık kaydırmalarıyla oluşturur, ardından tıklanabilir renk örnekleri ve CSS özel özellikleri döndürür.

Palet oluşturucu nasıl çalışır

  1. 1

    Temel HEX rengini girin

    Renk seçiciyi kullanın ya da #6366F1 gibi bir değer yazın. Üç haneli kısa yazım otomatik olarak genişletilir.

  2. 2

    Bir uyum şeması seçin

    Sakin bir ölçek, yakın tonlar veya daha güçlü vurgu renkleri gerekip gerekmediğine göre monokromatik, analog, tamamlayıcı, triadik ya da tetradik seçin.

  3. 3

    Örnekleri üretin ve inceleyin

    Palet, kopyalanabilir HEX renk örnekleri olarak görünür. Son karar vermeden önce renkleri gerçek arayüzde kontrol edin.

  4. 4

    Çıktıyı kopyalayın

    Dışa aktarma adımında HEX listesini veya --palette-1, --palette-2 gibi CSS değişkenlerini kopyalayın.

Doğru şemayı seçin

Şema Çıktı En uygun kullanım Yayından önce kontrol
Monokromatik Tek rengin 5 açık ve koyu varyasyonu Marka ölçekleri, kartlar, arka planlar Her şey fazla düz görünüyorsa vurgu veya nötr renk ekleyin
Analog 5 komşu renk tonu Geçişler, illüstrasyonlar, sakin ürün ekranları Yan yana renklerin ayırt edilebilir kaldığını kontrol edin
Tamamlayıcı Temel renkler ve karşıt renk tonu CTA vurguları, rozetler, enerjik görseller Metin ve ikon kontrastını dikkatle test edin
Triadik Eşit aralıklı 3 renk tonu Eğlenceli markalama, grafikler, kategori renkleri UI kalabalık görünmesin diye bir baskın renk seçin
Tetradik Renk çemberi etrafında 4 ton Panolar, etiketler, geniş görsel sistemler Palet büyük alanları kaplıyorsa doygunluğu azaltın

Pratik palet yapısı

Oluşturulan uyum, eksiksiz bir tasarım sistemi değil, başlangıç noktasıdır. Üretim arayüzlerinde renkleri görünüme göre değil role göre adlandırın: primary, secondary, accent, surface, border, text, success, warning ve error. Nötr grileri ayrı ekleyin, çünkü nötrler genellikle renk tonuna dayalı bir oluşturucudan daha hassas kontrol ister.

Üretilen HEX renklerini önce prototipte doğrudan kullanın. Gerçek ekranlarda, açık ve koyu arka planlarda, hover ve disabled durumlarında çalışan renkleri kalıcı hale getirin.

CSS değişkeni olarak dışa aktarım

Dışa aktarma adımı basit özel özellikler kullanır:

:root {
  --palette-1: #6366F1;
  --palette-2: #818CF8;
  --palette-3: #4F46E5;
}

Bu değişkenleri CSS, Tailwind tema tokenları veya design tokens dosyasına yapıştırırken kendi sistem adlarınızla yeniden adlandırın.

HEX, RGB ve HSL

Giriş ve görünür çıktı HEX formatındadır, çünkü CSS, tasarım araçları ve iş yorumları arasında en hızlı kopyalanan format budur. Araç içeride temel rengi HSL değerine dönüştürür, renk tonunu veya açıklığı kaydırır ve sonucu tekrar HEX olarak verir. RGB ya da HSL gösterimi gerekiyorsa üretilen HEX değerlerini bir renk kodu dönüştürücüden geçirin.

Kontrast ve erişilebilirlik

Uyum şemaları erişilebilirliği garanti etmez. Bir renk çiftini metin, kontrol veya grafiklerde kullanmadan önce kontrast denetleyiciyle kontrol edin:

  • Normal metin ve arka plan: WCAG AA için en az 4,5:1.
  • Büyük metin: en az 3:1.
  • Düğme kenarları, ikonlar, odak halkaları ve grafik sınırları gibi önemli metin dışı UI parçaları: bitişik renklere karşı en az 3:1.

Yalnızca renk tonuna da güvenmeyin. İki renk örnekte farklı görünebilir ama küçük metinde, ince ikonlarda veya durum etiketlerinde başarısız olabilir.

İpuçları

  • Anlamlı bir temel renkle başlayın, örneğin mevcut marka, ürün veya kampanya rengi.
  • Bir baskın renk seçin ve diğerlerini destekleyici kullanın. Tüm renklere eşit ağırlık vermek çoğu arayüzü kalabalık gösterir.
  • Büyük yüzeylerde doygunluğu azaltın, özellikle uygulama arka planları, paneller ve hero bölümleri için.
  • Tema uygulandıktan sonra tekrar test edin. Beyaz zeminde çalışan bir palet, koyu modda veya yoğun grafiklerde başarısız olabilir.

Sık Sorulan Sorular

Hayır. Renk uyumları oluşturur. Yayından önce önemli ön plan ve arka plan çiftlerini bir kontrast denetleyicide test etmelisiniz.

Her şema renk çemberinde farklı bir ilişki izler. Triadik üç ton, tetradik dört ton verir. Monokromatik, analog ve tamamlayıcı şemalar ise daha kullanışlı bir çalışma seti için beş örnek üretir.

Geçerli giriş HEX formatındadır. Önce RGB veya HSL değerini HEX’e dönüştürün, sonra bu sonucu temel renk olarak kullanın.

Monokromatik ve analog paletler sakin UI yüzeyleri için genellikle daha kolaydır. Tamamlayıcı, triadik ve tetradik paletler vurgu, kategori rengi ve görsel kampanyalar için daha uygundur.

İlgili Araçlar

HEX Renk Seçici

HEX rengi seçin veya girin; RGB, HSL, yaklaşık CMYK, bağıl parlaklık ve beyaz-siyah kontrast oranlarını görün.

ASCII İkili Dönüştürücü

Herhangi bir ASCII dizesini ikili gösterimine dönüştürün. Her karakter sekiz bite dönüşür, boşlukla ayrılır ve protokol izine ya da ödeve yapıştırmaya hazırdır.

İkilik Tabandan ASCII'ye Dönüştürücü

İkilik veri yapıştırın (boşlukla ayrılmış baytlar veya uzun bir bit dizisi) ve temsil ettiği ASCII metni alın. 7 bit ve 8 bit kodlamaları destekler.

Binary'den Hex'e Dönüştürücü

Binary girdiyi sade büyük harfli hexadecimal değere dönüştürün. Binary olmayan karakterler yok sayılır ve baştaki sıfırlar korunmaz.

Boolean Cebiri Sadeleştirici

Karnaugh haritaları ve Quine-McCluskey algoritmasıyla Boolean ifadelerini sadeleştirin. Her minimisation adımını ve nihai SOP/POS formunu gösterir.

Base64 → Hex Dönüştürücü

Base64 stringini, alttaki byte'ları hexadecimal olarak ifade edecek biçime dönüştürün. Token, anahtar, sertifika ve JWT incelemek için kullanışlıdır.