Renk Paleti Oluşturucu

Önce marka renginin açıktan koyuya tonları çıkarılır; araç bunu algısal açıklığı ölçen OKLCH renk uzayında 50–950 arası 11 adımda yapar ve marka renginizi en yakın adıma aynen yerleştirir. Sonra markanın tonuna çalan nötrlerden zemin, yüzey, kenarlık ve metin renkleri, seçtiğiniz renk uyumundan ikincil ve aksan renkleri, sabit tonlardan hata, başarı ve uyarı renkleri seçilir. Son adımda her yazı ve zemin çiftinin kontrast oranı denetlenir.

İki rengin göreli parlaklıkları arasındaki orandır; 1:1 (aynı renk) ile 21:1 (siyah-beyaz) arasında değişir. WCAG 2.2'ye göre normal metin en az 4,5:1 (AA), gelişmiş seviyede 7:1 (AAA) ister. En az 18 punto ya da 14 punto kalın büyük metin ile düğme kenarı, simge gibi arayüz öğeleri için 3:1 yeterlidir. Logolardaki yazı ve pasif (tıklanamaz) öğeler bu şartın dışındadır.

Açık turuncu, sarı ve açık yeşil gibi renkler beyaz zeminde bağlantı ve küçük yazı için yeterli kontrastı vermez: #F97316 turuncu beyazda 2,8:1'dir. Aracın "Okunurluğu düzelt" seçeneği aynı tonu koruyup rengi 4,5:1'i sağlayan en yakın koyuluğa kaydırır; turuncu için #BB5200 (4,8:1) çıkar. Logonuzda ve görsellerinizde marka renginizi aynen kullanmaya devam edebilirsiniz; ayar yalnız sitedeki yazı ve bağlantılar içindir.

Renk çemberindeki konuma göre seçilen renk gruplarıdır. Tamamlayıcı renk çemberde tam karşıdaki (180°) renktir ve en güçlü zıtlığı verir; analog renkler markanın 30° iki yanındaki komşu renklerdir ve sakin bir görünüm verir; üçlü uyum çemberi 120° aralıkla üçe böler. Ayrık tamamlayıcı karşıt rengin iki yanını, tek renk uyumu markanın kendi tonlarını kullanır.

Tonun açıklık sırasını gösterir: 50 en açık, 950 en koyu tondur; 500 civarı orta tonlardır. Tailwind CSS gibi arayüz kütüphanelerinde de kullanılan bu adlandırma, tasarımcı ile geliştiricinin aynı tonu aynı numarayla konuşmasını sağlar. Açık tonlar (50–200) arka plan ve rozet zemini, orta tonlar buton, koyu tonlar (700–950) başlık ve metin için uygundur.

HSL'deki açıklık değeri gözün algıladığı açıklığı yansıtmaz: HSL'de aynı %50 açıklıktaki saf sarı (#FFFF00) beyaz zeminde 1,07:1, saf mavi (#0000FF) 8,59:1 kontrast verir. OKLCH ise algısal açıklığı ölçer; aynı açıklık adımındaki tonlar farklı renklerde de benzer koyulukta görünür. Bu yüzden farklı marka renklerinden üretilen skalalar tutarlı olur ve kontrast sonucu önceden kestirilebilir.

Evet, koyu zeminde aynı renkler farklı davranır: açık temada okunan koyu lacivert koyu zeminde neredeyse kaybolur. Araç koyu tema seçildiğinde zemini ve yüzeyi koyu nötrlerden, metni açık tonlardan seçer; ana, aksan ve durum renklerini koyu zeminde okunacak açıklığa göre denetler. ESOLTEC temasında tek bir renk seti bulunur; mağazanız için açık ya da koyu temadan birini seçip o seti uygularsınız.

Web Sitesi › Site Yönetimi sayfasında temanızın kartındaki "Düzenle" düğmesine basın, üstteki "Tema & Ayarlar" düğmesiyle Genel Ayarlar panelini açın ve "Tasarım" sekmesindeki Renkler — Marka, Arayüz ve Durum bölümlerindeki her alana araçtaki HEX değerini yazın. Önizlemeyi kontrol edip "Kaydet" düğmesine basın. Bileşen ayarlarındaki temaya bağlı renk alanları boş bırakıldığında bu renkleri kullanır.

Üzerine gelince (hover) rengi açık temada ana rengin biraz koyusu, basılı hâli bir adım daha koyusudur; koyu temada tonlar açılır. Pasif buton için ana renk zemine karıştırılarak soluklaştırılır. WCAG pasif öğeleri kontrast şartından muaf tutar, ama pasif butonun tıklanamaz olduğu yine anlaşılmalıdır. ESOLTEC tema renklerinde hover alanı yoktur; ayarlarında "Buton Hover Arkaplan" bulunan bileşenlerde araçtaki tonu kullanabilirsiniz.

Hayır. Logo marka rengini aynen taşır; sitede ise aynı renk bağlantı, buton ve metin gibi farklı işlerde kullanılır ve her birinde okunur olmalıdır. Bu yüzden sitede ana renk olarak marka renginizin biraz koyu ya da açık bir tonunu kullanmak marka tutarlılığını bozmaz. Logonuz henüz yoksa logo oluşturucuyla seçtiğiniz renklerden logo tasarlayabilirsiniz.