Renk Paleti Çıkarıcı

Baskın renk paletini herhangi bir görüntüden çıkarın. Onaltılık kodları alın, WCAG erişilebilirlik kontrast oranlarını kontrol edin ve Tailwind CSS değişkenlerini anında dışa aktarın.

Shehzad Munir tarafından oluşturulmuş ve bakımı yapılmıştır ·

Renk Paleti Çıkarıcı
Loading Color Architect
Share

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

Baskın renklerini yakalamak için herhangi bir görseli yükleyin veya tam bir pikseli örneklemek için fotoğrafın herhangi bir yerine tıklayın. Her renk örneği için HEX, RGB ve HSL alın, çıkarılacak renk sayısını ayarlayın, benzer / üçlü / tamamlayıcı armoniler oluşturun, WCAG kontrastını kontrol edin (tek tıklamayla otomatik düzeltme ile) ve paleti CSS değişkenleri, SCSS, Tailwind yapılandırması, JSON veya bir SVG renk örneği sayfası olarak dışa aktarın.

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.

Özellikler

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

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

  1. 1

    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.

  2. 2

    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.

  3. 3

    İ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.

  4. 4

    İ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.

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

Ayrıntılı kılavuz

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.

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 renge 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?

Siz kontrol edersiniz, 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 renk arasından herhangi bir yeri çı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 görüntüden renk paletini nasıl çıkarabilirim?

Bir fotoğraf yüklediğinizde araç, baskın renklerini çıkarır ve her birini tasarımlarınız için kopyalayabileceğiniz HEX, RGB ve HSL değerlerine sahip bir renk örneği olarak gösterir.

Bir resimdeki renklerin HEX kodlarını nasıl alabilirim?

Çıkarılan palet, her baskın renk için HEX (ve RGB/HSL) kodunu listeler; böylece tam değerleri CSS'nize veya tasarım aracınıza kopyalayabilirsiniz.

Bir logodan marka renklerini çıkarabilir miyim?

Evet. Bir logo yükleyin ve bu, ana renkleri tanımlar, böylece bir marka paletini yeniden oluşturabilirsiniz. Çıkarma tarayıcınızda çalışarak görüntüyü gizli tutar.

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.

Günlükten

All articles →
How to Remove EXIF Metadata From Your PhotosTool Guides

How to Remove EXIF Metadata From Your Photos

Photos carry hidden data like GPS location and camera details. Here's why that matters for privacy and how to strip it before sharing.

SM
Shehzad Munir
Aug 19, 2026 · 3 min
What Is CPS? How to Test and Improve Your Click SpeedTool Guides

What Is CPS? How to Test and Improve Your Click Speed

CPS means clicks per second. Here's how it's measured, what a good score looks like, and how to test your own click speed for free.

SM
Shehzad Munir
Aug 17, 2026 · 3 min
How to Merge PDF Files for Free (Without Uploading Them)Tool Guides

How to Merge PDF Files for Free (Without Uploading Them)

Combine several PDFs into one document, reorder the pages, and keep everything private — no software and no server upload.

SM
Shehzad Munir
Aug 14, 2026 · 2 min