Renk Seçici ve Resimden Renk Paleti

Renk kodları neden bu kadar çok biçimde yazılır?

Aynı rengi bir tasarımcı HEX ile, bir CSS yazan geliştirici RGB ile, bir ressam HSL mantığıyla, bir matbaa ise CMYK ile anlatır. Hepsi aynı rengi tarif eder ama farklı bir ihtiyaca hizmet eder. HEX, kırmızı-yeşil-mavi üç kanalın onaltılık yazımıdır ve kısalığı sayesinde web'in ortak dilidir; #7b2331 gibi altı karakter yeter. RGB aynı üç kanalı 0 ile 255 arası sayılarla verir ve ekranların ışıkla renk üretme biçimine en yakın modeldir. HSL ise rengi ton, doygunluk ve açıklık olarak ayırır; "biraz daha açık yap" ya da "tonu değiştirmeden soldur" gibi insanca isteklerin matematiğe dönüştüğü yerdir. CMYK, mürekkeple baskının dili olan camgöbeği, eflatun, sarı ve siyahtır. Bu araç dördü arasında çift yönlü çalışır: herhangi birini yazarsanız diğerleri anında güncellenir, geçersiz bir değer yazdığınızda ise nedenini ve doğru biçimi gösteren bir uyarı alırsınız.

Nasıl kullanılır?

1. Renk seçici sekmesinde renk kutusuna tıklayarak tarayıcının renk penceresini açın ya da HEX, RGB, HSL, CMYK alanlarından birine değer yazın. Diğer üç alan kendiliğinden güncellenir.
2. Kontrastı ölçün. Arka plan rengini seçin; metin rengi olarak seçili renginiz kullanılır. Oran ve AA/AAA sonuçları hemen görünür, örnek metin gerçek görünümü gösterir.
3. Ton ve uyum önerilerine bakın. Açık-koyu tonlar, tamamlayıcı ve üçlü uyum renklerinden birine tıklayarak onu seçili renk yapın.
4. Kodu kopyalayın. CSS değişkeni, Tailwind benzeri ölçek ya da düz değerler arasından seçip tek tıkla panoya alın.
5. Resimden palet için ikinci sekmeye geçin, resmi bırakın, renk sayısını seçin. Resmin üstüne tıklayarak tek bir pikselin rengini okuyabilir, paleti PNG şerit, JSON ya da CSS olarak indirebilirsiniz.

Kontrast oranı ve WCAG nedir?

Web Erişilebilirlik Yönergeleri (WCAG), metin ile arka planı arasındaki parlaklık farkını "kontrast oranı" adıyla ölçer. Oran 1:1 ile 21:1 arasındadır; aynı renk 1:1, siyah-beyaz 21:1 verir. Normal boyuttaki metin için AA düzeyi en az 4,5:1, AAA düzeyi 7:1 ister. Büyük metin (yaklaşık 24 piksel ve üstü ya da 19 piksel kalın) için eşikler daha gevşektir: AA için 3:1, AAA için 4,5:1. Hesap, her kanalın doğrusal ışık değerine çevrilip ağırlıklı toplanmasıyla bulunan göreli parlaklığa dayanır. Örneğin bu sitenin bordo tonu #7b2331 beyaz zemin üzerinde yaklaşık 9,9:1 verir; hem AA hem AAA düzeyini rahatça geçer. Düşük kontrast yalnızca görme zorluğu olanları değil; güneş altında telefon kullananları, eski ekranları ve yorgun gözleri de etkiler. Ayrıca erişilebilirlik, arama motorları ve kamu kurumlarının dijital standartları açısından giderek daha önemlidir.

Resimden renk paleti nasıl çıkarılır?

Bir fotoğrafta milyonlarca piksel vardır ve bunların büyük bölümü birbirine çok benzer. Palet çıkarmak, bu kalabalığı birkaç temsilci renge indirgemektir. Araç bunun için "medyan kesme" (median cut) yöntemini kullanır: resim hızlı çalışması için küçültülmüş bir örneğe dönüştürülür, piksellerin oluşturduğu renk kutusu en geniş aralığa sahip kanaldan ikiye bölünür, bu işlem istediğiniz renk sayısına ulaşılana kadar sürer ve her kutunun ortalaması paletin bir rengi olur. Renklerin yanındaki yüzde, o renge düşen piksel oranıdır. Böylece bir logonun ana renklerini, bir ürün fotoğrafına uyacak vurgu tonlarını ya da bir manzaranın atmosferini birkaç tıkla yakalarsınız. Paleti PNG şerit olarak indirip sunuma ekleyebilir, CSS veya JSON olarak tasarım sisteminize aktarabilirsiniz.

Damlalık: tek pikselin rengini okumak

Palet genel resmi özetler, ama bazen tam olarak "şu noktadaki" renk gerekir: bir düğmenin kenarı, bir logonun harfi, bir ürünün gölgesi. Resim yüklendikten sonra tuvale tıklamanız yeterlidir; tıkladığınız pikselin HEX değeri yazılır ve "Renk seçicide aç" ile dönüşüm, kontrast ve uyum araçlarına taşınır. JPEG gibi kayıplı biçimlerde komşu pikseller sıkıştırma yüzünden çok az farklı olabilir; kesin bir sonuç için PNG kaynak kullanın ya da birkaç noktayı deneyip ortalamayı alın. Resim çok büyükse tuvale sığması için ekran çözünürlüğüne yakın bir boyuta küçültülür; bu, renklerin okunuşunu değil yalnızca ayrıntı miktarını etkiler. Tarayıcınız ekran damlalığını destekliyorsa ek bir düğme görünür; bununla ekranınızdaki herhangi bir uygulamadan da renk alabilirsiniz.

Uyumlu renkler nasıl seçilir?

Renk çarkında karşılıklı duran iki ton tamamlayıcıdır; yan yana kullanıldıklarında en güçlü zıtlığı verir ve genellikle bir vurgu rengi aramaya yarar. Çarkı üçe bölen iki ton üçlü uyum oluşturur: canlı, dengeli ama dikkat isteyen bir takımdır. Komşu renkler ise sakin ve bütüncül sonuç verir. Tasarımda iyi bir kural, baskın rengi yüzde 60, ikincil rengi yüzde 30, vurguyu yüzde 10 oranında kullanmaktır. Açık ve koyu tonlar ise aynı rengin zemin, kenarlık ve hover durumları için kolay bir ölçek sağlar. Önerilen her rengin kontrastını da ayrıca ölçmeyi unutmayın; güzel görünen bir kombinasyon her zaman okunur olmayabilir.

Neden Bilişim Ajans aracı?

• Resminiz yüklenmez. Palet çıkarma ve piksel okuma tarayıcınızdaki bir tuvalde yapılır; sayfa çevrimdışı da çalışır.
• Tek sayfada hepsi. Dönüşüm, kontrast, uyum ve palet için dört ayrı siteye gitmezsiniz.
• Geliştirici dostu çıktı. CSS değişkeni ve Tailwind benzeri ölçek hazır gelir.
• Erişilebilirlik odaklı. Her renk için AA ve AAA sonucu anında görünür.
• Gerçekten ücretsiz. Kayıt, filigran ya da sınır yoktur.

Sık sorulan sorular

İlgili araçlar

• Resim Küçült
• Favicon Oluştur
• SVG'den PNG'ye
• QR Kod Oluşturucu

Kurumsal kimlik, logo ve web tasarımı için Bilişim Ajans ekibi yardımcı olur.