Yeniden kullanmak istediğiniz bir renk görürsünüz — bir fotoğrafta, beğendiğiniz bir sitenin ekran görüntüsünde, kaynak dosyaları çoktan gitmiş eski bir logoda — ve bir tahmin değil, gerçek hex kodunu istersiniz. Gözle kestirmek asla tam olarak işe yaramaz; monitörler yalan söyler ve "o mavi" aslında hafifçe farklı altı mavidir. Paleti doğrudan piksellerden çekmek, size CSS'ye, bir tasarım aracına ya da bir marka belgesine yapıştırabileceğiniz kodlar verir.
İşte bunu nasıl yapacağınız ve rastgele bir piksel yığını yerine gerçekten kullanılabilir bir paleti nasıl elde edeceğiniz.
"Bir palet çıkarmak" aslında ne yapar
Araç görseli tarar ve onu en iyi temsil eden renkleri bulur — baskın tonlar artı dikkat çeken vurgular — sonra size her birini kopyalayabileceğiniz bir hex kodu olarak verir. Bir milyon ayrı piksel rengi yerine, görseli özetleyen düzenli bir set (diyelim 5 ya da 8) elde edersiniz.
Bu birkaç yaygın iş için gerçekten kullanışlıdır:
- Orijinal özelliğe sahip olmadığınızda bir logodan ya da eski bir varlıktan marka renklerini kurtarmak.
- Ruh halini eşleştirmek istediğiniz bir fotoğraftan bir tasarım paleti oluşturmak — bir manzara, bir ürün çekimi, bir sanat eseri.
- Yalnızca ekran görüntüsüne sahip olduğunuz var olan bir siteyi ya da grafiği eşleştirmek.
- Zaten kullandığınız bir görselle uyumlu bir arka plan ya da vurgu seçmek.
Bir görsel bırakın ve kodları okuyun:
Kullanışlı bir palet için sayı kontrolünü kullanın
En önemli tek ayar, kaç renk çektiğinizdir. Yanıtı tamamen değiştirir.
- Daha az renk (3–5) size temel paleti verir — görseli tanımlayan bir avuç ton. Sıkı bir setin bir sınırlama değil bir özellik olduğu markalama ya da bir tasarım sistemi için genellikle bunu istersiniz.
- Daha fazla renk (8–12) ince vurguları ve degradeleri yakalar. Bir görsel zengin ve çeşitli olduğunda ve ikincil tonları da istediğinizde ya da bir fotoğrafın tam olarak nasıl oluşturulduğunu incelerken kullanışlıdır.
İlk sonuç yanlış hissettiriyorsa — bir ton hâkim oluyorsa ya da istediğiniz bir vurgu birleştirilip gittiyse — sayıyı ayarlayın ve yeniden okuyun. %80'i gökyüzü olan bir fotoğraf düşük sayılarda size çok mavi verir; daha küçük renk parlamalarını ortaya çıkarmak için sayıyı artırın.
Kopyalamak için tıklayın — önemli olan iş akışı
Bir hex kodu okumak ve onu yazmak, hataların sızdığı yerdir (#3A7BD5 ile #3A7BD6 ve neden yanlış göründüğünü merak ederek on dakika harcadınız). Renk Paleti aracında, her renk örneği tıklamayla hex kodunu kopyalar, böylece klavyeye dokunmadan görselden panoya, panodan stil sayfanıza doğrudan gidersiniz.
Pratik bir akış:
- Görseli yükleyin.
- Sayıyı işe uyacak şekilde ayarlayın — bir marka paleti için düşük, vurguları yakalamak için daha yüksek.
- İstediğiniz her renk örneğine tıklayın; gideceği yere yapıştırın.
- Yeterli aralık yok mu? Sayıyı hafifçe ayarlayın ve fazlalıkları alın.
Sonuçları bir tasarımcı gözüyle okumak
Paletin iyi oturması için bilmeye değer birkaç şey:
- Baskın renk her zaman kullanışlı olan değildir. Beyaz arka planda bir ürün fotoğrafı çok beyaz ya da neredeyse beyaz bildirir. Bu doğrudur, ama gerçekten önemsediğiniz renk üründür — onu çekmek için sayıyı yükseltin ya da önce özneye kırpın.
- Fotoğrafların göründüğünden daha çok rengi vardır. Ten, gölgeler ve yansımalar bilinçli fark etmediğiniz tonlar ekler. Daha yüksek bir sayı onları ortaya çıkarır; daha düşük bir sayı onları ortalamaların arkasında gizler.
- Hex taşınabilirdir. Kopyaladığınız her kod doğrudan CSS, Figma, Photoshop, Canva ya da bir marka belgesinde çalışır. Dönüştürme gerekmez.
Neden tarayıcınızda kalır
Tüm çıkarma yerel olarak çalışır — görsel Canvas ile tarayıcınızda okunur ve analiz edilir ve asla bir sunucuya yüklenmez. Bu, "görsel" piyasaya sürülmemiş bir maket, bir müşterinin özel marka varlığı ya da rastgele bir web aracına göndermemeniz gereken bir dahili ekran görüntüsü olduğunda önemlidir. Ücretsizdir, kayıt gerektirmez ve ilk ziyaretinizden sonra çevrimdışı çalışır.
Renkleri alın, kopyalamak için tıklayın, onları ait oldukları yere yapıştırın.