CodeKitHubBu Araç Nedir?
Bir renk seçici, görsel bir seçimi — bu mavi tonu, logodaki tam olarak o piksel — yazılımın anlayabileceği sayısal kodlara dönüştürür. Aynı rengin birkaç eşdeğer gösterimi vardır: HEX (#3b82f6) CSS ve tasarım devir teslimlerinde yaygın olarak kullanılır; RGB (59, 130, 246) ekranların ve kodun rengi temsil etme biçimiyle uyumludur; HSL (217°, 91%, 60%) ise ton, doygunluk ve açıklığı insanların kavrayabileceği bir şekilde tanımlar.
Aracın ikinci kısmı ise bir görüntü renk seçicisidir. Bir ekran görüntüsü, logo veya fotoğraf yükleyin ve imlecin altındaki rengi örneklemek için herhangi bir noktaya tıklayın — bu, “bu tam olarak hangi renk?” sorusuna cevap vermenin standart yoludur. Tarayıcı EyeDropper API'sini destekliyorsa, tarayıcının kendi büyütme özelliği kullanılır; diğer tarayıcılarda ise araç, görüntünün bir tuval kopyasından piksel değerini okur. Her iki durumda da işlem yerel olarak gerçekleştirilir: görüntü hiçbir zaman yüklenmez.
Neden Kullanmalısınız?
- Aynı anda üç format: Seçilen her renk, HEX, RGB ve HSL formatlarında eşzamanlı olarak gösterilir; her birinde tek tıklamayla kopyalama düğmesi bulunur — ayrı bir dönüştürme adımına gerek yoktur.
- Bir resimden seçin: İstediğiniz resmi yükleyin ve tıklayarak tam piksel rengini örnekleyin — bir logodan marka renklerini çıkarmak veya bir ekran görüntüsünde görülen bir rengi eşleştirmek için idealdir.
- Mümkün olduğunda tarayıcının kendi büyüteçli renk seçiciyi kullanır; diğer durumlarda ise kanvas piksel değerlerini hassas bir şekilde okur.
- Canlı önizleme örneği, mevcut rengi bir bakışta gösterir; böylece kopyalamadan önce seçtiğiniz rengi doğrulayabilirsiniz.
- Ücretsiz, anında ve tamamen yerel: renkler tarayıcınızda hesaplanır ve görüntüler tarayıcınızda okunur — hiçbir şey yüklenmez, depolanmaz veya kaydedilmez.
Nasıl Kullanılır
- Renk alanını kullanarak bir renk seçin veya bir değeri doğrudan yapıştırın/düzenleyin.
- Bir resimden örnek almak için, bir görsel yükleyin ve rengini seçmek istediğiniz noktaya tıklayın.
- Canlı önizleme örneği ile birlikte gösterilen HEX, RGB ve HSL değerlerini okuyun.
- İhtiyacınız olan formatın yanındaki kopyala düğmesine tıklayın — CSS için HEX, kod için RGB veya HSL.
Örnek
Giriş
Clicking the blue area of an uploaded logoÇıkış
HEX #3b82f6 · RGB rgb(59, 130, 246) · HSL hsl(217, 91%, 60%)Bu üç biçim de aynı rengi tanımlar. Stil sayfalarında ve tasarım araçlarında HEX biçimini, kodun kanal değerleri gerektirdiği durumlarda RGB biçimini ve yalnızca son sayıyı değiştirerek daha açık veya daha koyu varyantlar elde etmek istediğinizde HSL biçimini kullanın.
Hangi iş için hangi renk formatı
Modern CSS, rengin kullanılmasına izin verilen her yerde bu üç formatın hepsini kabul eder; dolayısıyla bu seçim, uyumlulukla değil, iş akışıyla ilgilidir. Ekipler genellikle tasarım belirteçlerinde HEX formatını standart olarak benimser, ardından varyasyonları incelerken HSL kullanır — tonu değiştirmeden kullanışlı bir fareyle üzerine gelme durumu elde etmek için açıklık değerini 10–15 puan değiştirir.
| Biçim | Örnek | En uygun olan |
|---|---|---|
| Altıgen | #3b82f6 | CSS, tasarım araçları, sohbetlerde renk paylaşımı ve teknik özellikler |
| Kırmızı, Yeşil, Mavi | Kırmızı, Yeşil, Mavi (59, 130, 246) | Kanalları işleyen kod, tuval çizimi, rgba() şeffaflığı |
| HSL | hsl(217, %91, %60) | Daha açık/daha koyu/fareyle üzerine gelindiğinde değişen varyantlar oluşturma, paletler oluşturma |
Seçilen renkten bitmiş CSS'ye
Bir rengi seçmek, genellikle stil oluşturma işinin ilk adımıdır. Aynı rengi başka biçimlerde kullanmanız gerekiyorsa — örneğin baskı için CMYK veya geniş renk gamına sahip CSS için OKLCH değeri — Renk Dönüştürücü, bu renk seçicinin işini devralır.
Seçilen renk genellikle doğrudan bir görsel efekte kullanılır: Box Shadow Generator, gerçekçi gölgeler oluşturmak için bir HEX değeri alır ve Border Radius Generator ile oluşturulan yuvarlatılmış kartlar bu görünümü tamamlar.
→ Renk Dönüştürücü · Kutu Gölgesi Oluşturucu · Kenar Yarıçapı Oluşturucu
Sıkça Sorulan Sorular
HEX, RGB ve HSL arasındaki fark nedir?
Bunlar, aynı renk modeli için kullanılan üç farklı gösterim biçimidir. HEX, kırmızı, yeşil ve mavi kanallarını altı onaltılık basamağa (#3b82f6) sığdırır ve CSS ile tasarım araçlarında en yaygın kullanılan biçimdir. RGB, aynı üç kanalı 0 ile 255 arasındaki ondalık sayılarla listeler. HSL ise rengi ton (0–360°), doygunluk ve açıklık olarak ifade eder; bu, "aynı rengi, sadece daha açık" istediğinizde çok daha sezgiseldir. Bu biçimler arasında dönüştürme yapıldığında renk asla değişmez.
Bir görüntüden renk seçme işlemi nasıl gerçekleşir?
Yüklenen resim, tarayıcınızdaki görünmez bir tuval üzerine çizilir. Tıkladığınızda, araç o konumdaki pikselin kırmızı, yeşil ve mavi değerlerini okur ve bunları HEX, RGB ve HSL formatlarına dönüştürür. EyeDropper API'sini destekleyen tarayıcılarda (masaüstü sürümlerinde Chrome ve Edge), bunun yerine yerel bir büyüteç açılır; böylece ekranın herhangi bir yerinden piksel hassasiyetinde seçim yapabilirsiniz.
Resmim herhangi bir yere yüklendi mi?
Hayır. Görüntü doğrudan tarayıcınız tarafından açılır ve bir tuvalden yerel olarak okunur; hiçbir dosya veya renk verisi hiçbir zaman aktarılmaz ya da depolanmaz. Sayfayı yükleyip çevrimdışı duruma geçseniz bile, hem renk seçici hem de görüntü damlalık aracı çalışmaya devam eder — bu da henüz yayınlanmamış tasarımlar ve şirket içi ekran görüntüleri için güvenli bir ortam sağlar.
Seçtiğim renk neden ekranda gördüğüm renkle tam olarak aynı çıkmıyor?
Bunun iki yaygın nedeni vardır. Kenar yumuşatma: Metin ve şekillerin kenarlarındaki pikseller arka planla harmanlanır; bu nedenle, kenardan bir piksel uzakta tıklama yapıldığında ara bir renk elde edilir — bunun yerine, alanın ortasındaki düz renkten örnek alın. Renk yönetimi: Alışılmadık renk profillerine sahip JPG/PNG dosyaları, farklı ekranlarda biraz farklı görüntülenebilir; araç, dosyada depolanan piksel değerini gösterir; bu değer, tasarım çalışmalarınız için istediğiniz değerdir.
CSS için hangi formatı kopyalamalıyım?
HEX en güvenli varsayılan seçenektir — tüm tarayıcılar ve araçlar bunu kabul eder. Fareyle üzerine gelindiğinde değişen veya karanlık mod varyantları oluşturmayı planlıyorsanız HSL’yi kullanın; çünkü yalnızca açıklık bileşenini ayarlamak, renk tonu ve doygunluğu tutarlı tutar. RGB, renklerin sayısal kanallardan oluşturulduğu durumlarda veya şeffaflık eklendiğinde özellikle kullanışlıdır; örneğin, rgba(59, 130, 246, 0.5) ifadesi, sekiz basamaklı bir HEX değerinden daha net okunur.