Renk seçici nasıl çalışır
Bir fotoğraf, ekran görüntüsü veya logo yükleyin ve herhangi bir yere tıklayın. Araç tam o pikseli okur ve rengini HEX (örneğin #1e88e5) ve RGB (rgb(30, 136, 229)) olarak gösterir. Kopyala düğmesi HEX kodunu panoya alır. Görsel yüklenir yüklenmez ortadaki piksel okunur, böylece hemen bir değer görürsünüz.
Tıkladığınız her renk, son seçilenler satırına eklenir (en fazla sekiz). Böylece bir düğme, bir arka plan, bir başlık gibi birkaç noktayı deneyip karar vermeden önce karşılaştırabilirsiniz. Görsel tarayıcınızdaki bir canvas üzerinde okunur ve asla yüklenmez.
HEX, RGB ve HSL basitçe
Üçü de ekrandaki aynı rengi anlatır; yalnızca farklı yazarlar.
- HEX —
#RRGGBB; kırmızı, yeşil ve mavi için00ileffarasında üç çift onaltılık rakam. CSS, Figma, Canva, WordPress temaları ve çoğu "marka rengi" alanı bunu bekler. - RGB — aynı üç kanal, 0–255 arası ondalık sayılarla.
#1e88e5ilergb(30, 136, 229)aynıdır. Kodda, Office'te ve kaydırıcılı programlarda işe yarar. - HSL — ton (renk çemberinde 0–360°), doygunluk ve açıklık yüzde olarak. Seçici HSL göstermez, ama her tasarım aracı ve CSS HEX'i anında çevirir. HSL, seçtiğiniz rengin daha açık veya koyu bir versiyonunu istediğinizde kullanışlıdır: tonu sabit tutup yalnızca açıklığı değiştirirsiniz.
Ekran görüntülerinden renk almak
Bir uygulamadan, siteden veya video karesinden renk kopyalamak için ekran görüntüsü alın (Windows: Win + Shift + S; Mac: Cmd + Shift + 4; telefon: güç + ses kısma, iPhone'da yan tuş + ses açma) ve buraya bırakın.
Doğru sonuç için ipuçları:
- Düz alanlara tıklayın. Bir düğmenin kenarına değil ortasına nişan alın; kenarlar arka planla yumuşatılmıştır (antialiasing) ve ara bir renk verir.
- Fotoğraflarda gren vardır. Bir fotoğraftaki komşu pikseller biraz farklıdır; birkaç nokta deneyip en temsili olanı seçin.
- Ekran görüntüsü rengi değiştirebilir. Gece modu, Night Shift, HDR veya renk yönetimli ekran görüntüyü renklendirebilir. Tam marka rengi önemliyse bunları kapatın.
- Çok sıkıştırılmış JPG'ler sapar. Defalarca kaydedilmiş bir JPG'de kenarlarda lekeler olur. Varsa logonun orijinal PNG veya SVG'sini kullanın.
- Şeffaf alanların gerçek bir rengi yoktur; tıklarsanız siyah (
#000000) çıkar. Logonun görünen kısmına tıklayın.
Rengi kullanmadan önce kontrastı kontrol edin
Güzel görünen bir renk yazı olarak okunaksız olabilir. Erişilebilirlik yönergeleri (WCAG), normal metinle arka plan arasında en az 4,5:1, büyük metin ve simgeler için 3:1 kontrast ister. Beyaz üzerine açık gri veya koyu mavi üzerine orta mavi genellikle geçemez.
Metin ve arka plan renklerini aldıktan sonra iki HEX kodunu herhangi bir kontrast denetleyicisine yapıştırın. Oran düşükse metni koyulaştırın veya arka planı açın; HSL'de açıklığı ayarlamak markanın dışına çıkmadan düzeltmenin en hızlı yoludur.
Tipik kullanımlar
- Görsel olarak gönderilmiş bir logodan marka rengini bulmak.
- Bir sitenin düğme veya arka plan rengini kendi tasarımınızda yeniden oluşturmak.
- Bir fotoğraftan sunum, sosyal medya gönderisi veya dekorasyon panosu için palet çıkarmak.
- Favicon oluşturucuda Apple touch simgesinin arka plan rengini seçmek.
İlgili araçlar
- Önce nesneyi dekupe edin, sonra arka plan olmadan renk alın: Arka plan kaldırma.
- Daha hassas tıklamak için küçük bir alanı ayırın: Görsel kırpma.
- Görselin kendisi CSS için kod olarak mı lazım? Görselden Base64'e.