Renk Paleti Çıkarıcı

Nasıl kullanılır

Renk Paleti Çıkarıcı nasıl kullanılır?

01
Bir resim yükle
Herhangi bir fotoğrafı, logoyu veya ekran görüntüsünü sürükleyip bırakın veya seçin. Palet tamamen tarayıcınızda anında çıkarılır.
02
Paleti hassaslaştırın
3-12 renk çıkarmak için sayım kontrolünü kaydırın veya 'Görüntüden seç'i açın ve tam bir pikseli örneklemek için herhangi bir noktayı tıklayın.
03
İnceleyin ve ayarlayın
HEX/RGB/HSL'yi görmek, hafiflikte ince ayar yapmak ve beyaz ve siyah üzerinde WCAG kontrastını kontrol etmek için bir renk örneği seçin; arızalı bir rengi otomatik olarak düzeltmek için çubuğa basın.
04
İhracat
CSS, SCSS, Tailwind, JSON veya SVG'yi seçin ve kodu kopyalayın veya tasarım belgeleriniz için bir SVG renk örneği sayfası indirin.

Kullanım örnekleri

Yaygın kullanım durumları

—Bir logo veya moodboard görüntüsünden marka paleti oluşturun
—Ekran görüntüsündeki veya fotoğraftaki rengin tam onaltılık değerini yakalayın
—Erişilebilir, WCAG uyumlu bir kullanıcı arayüzü renk şeması oluşturun
—Tailwind veya CSS değişkenlerini doğrudan bir projeye aktarın
—Bir fotoğraftan uyumlu degradeler ve vurgu renkleri oluşturun

Genel Bakış

Herhangi bir görüntüden renk paleti çekin

Bir görüntü yüklediğinizde çıkarıcı, baskın renkleri tanımlayarak kullanıma hazır HEX ve RGB değerlerini döndürür. Bir tasarım uygulaması olmadan, bir fotoğraftan palet oluşturmanın, marka rengini eşleştirmenin veya ekran görüntüsündeki tam rengi bulmanın en hızlı yoludur.

Tasarımcılar, geliştiriciler ve marka çalışmaları için

İlhamı kullanılabilir değerlere dönüştürün; bir degrade için gün batımını örnekleyin, bir rakibin vurgu rengini kaldırın veya bir kahraman görüntüsünden tutarlı bir tema oluşturun. İşleme tarayıcınızda gerçekleşir, dolayısıyla resimleriniz hiçbir zaman bir sunucuya yüklenmez.

Özellikler

01: Ayarlanabilir 3-12 sayımla baskın renk çıkarımı
02: Tam pikselleri seçmek için tıklayın + yerel damlalık
03: Tek dokunuşla kopyalamayla HEX, RGB ve HSL değerleri
04: Benzer, üçlü ve tamamlayıcı armoniler
05: Otomatik düzeltmeli WCAG 2.1 AA/AAA kontrast denetleyicisi
06: CSS, SCSS, Tailwind, JSON veya SVG renk örneklerini dışa aktarın

SSS

Sık sorulan sorular

Bir görüntüden onaltılık renk kodlarını nasıl alabilirim?+

Görüntünüzü yükleyin; araç, K-Means kümelemesini kullanarak baskın renkleri çıkarmak için görüntüyü otomatik olarak analiz eder. Her renk HEX, RGB ve HSL değerleriyle gösterilir; kopyalamak için herhangi bir rengi tıklayın.

Bir logodan marka renklerini çıkarabilir miyim?+

Evet. Herhangi bir logo görseli yüklediğinizde araç, birincil ve ikincil marka renklerini tanımlayarak size CSS, Tailwind veya Figma gibi tasarım araçlarında kullanmanız için tam onaltılık kodlar verir.

WCAG kontrast kontrolü nedir?+

WCAG (Web İçeriği Erişilebilirlik Yönergeleri), metin ve arka plan renkleri arasındaki kontrast oranlarını tanımlar. Normal metnin (AA standardı) görme engelli kullanıcılar tarafından okunabilmesi için en az 4,5:1 oranı gereklidir.

Çıkarıcı kaç rengi tanımlıyor?+

Kontrol sizde; bir kaydırıcı, görüntüde taşıdıkları görsel alan ve canlılığa göre sıralanan 3 ila 12 baskın rengi istediğiniz yerden çıkarmanıza olanak tanır. Herhangi bir piksel rengini tam olarak örneklemek için doğrudan fotoğrafa da tıklayabilirsiniz.

Paleti CSS veya Tailwind'de kullanmak üzere dışa aktarabilir miyim?+

Evet. Araç, kullanıma hazır CSS özel özellik değişkenleri (--color-primary: #hex) ve doğrudan projenize yapıştırabileceğiniz Tailwind yapılandırma parçacıkları oluşturur.

Bir logodan tam hex kodları alabilir miyim?+

Evet — çıkarıcı, baskın renkleri doğrudan tasarım araçlarınıza kopyalayabileceğiniz onaltılık değerler olarak döndürür.