İçeriğe geç
Color Palette Extractor

URL'den renkler

Web Sitesi Renk Çıkarıcı

Web Sitesi Renk Çıkarıcı, bir web sitesinin HTML ve CSS kodunu URL'sinden okur ve sitenin renk paletini verir: marka rengi, vurgular, arka planlar, metin ve kenarlıklar, her rengin CSS değişkeni ve kullanım payıyla birlikte.

  • Ücretsiz, kayıt yok
  • Gerçek CSS'i ve değişkenleri okur
  • Hiçbir şey saklanmaz
Kaynak

Site engelliyor mu? HTML veya CSS kodunu yapıştır

Web sitesi renk çıkarıcı nasıl çalışır?

Web sitesi renk çıkarıcı bir sayfayı ve stil dosyalarını indirir, koddaki her renk değerini okur ve renkleri sayfada nerede ve ne sıklıkla kullanıldıklarına göre sıralar.

  1. Adres gir

    example.com gibi bir alan adı yaz ya da herkese açık herhangi bir sayfanın tam URL'sini yapıştır. Çıkarıcı sayfayı ve en fazla 25 stil dosyasını alır.

  2. Stil dosyaları ayrıştırılır

    Her renk sözdizimi okunur: hex, rgb, hsl, hwb, lab, lch, oklab, oklch, color() ve 148 adlandırılmış renk. CSS değişkenleri kendi değerlerine çözümlenir.

  3. Renklere rol atanır

    Her rengin rolünü CSS özelliği belirler: arka plan, metin, kenarlık, dolgu veya gölge. Sayfadaki öğelerle eşleşen kurallar üç kat sayılır.

  4. Paleti kopyala

    Paletin başında marka rengi yer alır, ardından vurgular, arka planlar ve metin renkleri gelir. Paleti CSS, Tailwind veya tasarım token'ları olarak dışa aktar.

Çıkarıcı bir sitenin marka rengini nasıl bulur?

Marka rengi, butonlarda, bağlantılarda veya markaya göre adlandırılmış CSS değişkenlerinde görünen, en çok kullanılan doygun renktir.

  • Doygunluk. Yalnızca OKLCH kroması 0.05 veya üzeri olan renkler marka ya da vurgu rengi sayılır. Griler ve griye yakın renkler nötr sayılır.
  • Konum. .btn, button, a ve .cta gibi seçicilerdeki renkler ağırlık kazanır.
  • Adlandırma. --primary, --brand ve --accent gibi değişkenler ağırlık kazanır.
  • theme-color. Bir CSS rengiyle eşleşen <meta name="theme-color"> değeri güçlü bir marka sinyali ekler.
CSS özelliklerinin renk rollerine eşlenmesi
RolCSS özellikleri
Arka planbackground, background-color, gradyanlar
Metincolor, text-decoration-color, caret-color
Kenarlıkborder, outline, column-rule
Dolgufill, stroke, stop-color, accent-color
Gölgebox-shadow, text-shadow (listelenir, ana palete alınmaz)

Kullanılan renkleri kullanılmayan CSS'ten nasıl ayırır?

Çıkarıcı, seçicileri sayfanın HTML kodundaki öğelerle eşleşen CSS kurallarına üç kat ağırlık verir. CSS framework'leri bir sayfanın hiç kullanmadığı birçok renk içerir ve seçici eşleştirme bu renklerin gerçek tasarımın önüne geçmesini engeller.

  • :hover ve :focus renkleri yalnızca etkileşim sırasında göründüğü için yarım ağırlıkla sayılır.
  • @media print kuralları yok sayılır.
  • Opaklığı %35'in altındaki renkler kaplama ve ton olarak atlanır.
  • Birbirine ΔE_OK 0.02'den daha yakın renkler, varyantlarını listeleyen tek bir renk örneğinde birleşir.

Çıkarıcı koyu mod renklerini bulur mu?

Evet. @media (prefers-color-scheme: dark) içindeki kurallar ve .dark ya da [data-theme="dark"] gibi seçicilerin altındaki kurallar ayrı bir koyu mod paleti oluşturur.

Çıkarıcı bir koyu mod kuralını çözümlediğinde CSS değişkenlerinin koyu değerleri açık değerlerin yerini alır, bu yüzden koyu palet bir ziyaretçinin koyu modda gördüğü renkleri gösterir.

Web sitesi çıkarıcı hangi renkleri okuyamaz?

Web sitesi çıkarıcı sunucunun gönderdiği kodu okur, bu yüzden üç tür renk erişim dışında kalır.

  • Çalışma zamanı stilleri. CSS-in-JS kütüphaneleri stilleri, sayfa tarayıcıda yüklendikten sonra ekler.
  • Görsel renkleri. Fotoğraflardaki, raster logolardaki ve videolardaki renkler CSS değil, pikseldir. Çıkarıcı sitenin logo ve simge renklerini ayrıca okur.
  • Korumalı siteler. Bot koruması arkasındaki siteler otomatik istekleri reddeder.

Bu durumlarda sayfanın HTML veya CSS kodunu kod kutusuna yapıştır ya da bir ekran görüntüsü alıp Renk Paleti Çıkarıcı aracına bırak. Bir web sitesinin kullandığı renkler nasıl bulunur rehberi tarayıcı DevTools yöntemlerini de anlatır.

Web sitesi renk çıkarıcıyı kimler kullanır?

  • Tasarımcılar

    Yeniden tasarımdan önce bir müşterinin mevcut marka renklerini denetle ya da referans bir sitenin paletini incele.

  • Geliştiriciler

    Bir temayı yeniden oluşturmak için sitenin renk token'larını ve değişken adlarını geri kazan.

  • Pazarlamacılar

    Açılış sayfalarını, reklamları ve e-postaları ana web sitesinin renkleriyle eşleştir.

  • Erişilebilirlik denetçileri

    Sitenin metin ve arka plan çiftlerini Kontrast sekmesinde WCAG kontrast eşiklerine göre test et.

Web sitesi renk çıkarıcı: sık sorulan sorular

Sitenin bazı renkleri neden eksik?

JavaScript ile çalışma zamanında uygulanan renkler, görsellerin içindeki renkler ve giriş gerektiren sayfalardaki renkler sunucunun gönderdiği HTML ve CSS kodunda yer almaz.

Botları engelleyen bir siteden renk çıkarabilir miyim?

Evet, alternatif bir yöntemle. Siteyi tarayıcında aç ve HTML kodunu veya bir stil dosyasını kod kutusuna yapıştır ya da görsel çıkarıcıya bir ekran görüntüsü yükle.

Çıkarıcı kontrol ettiğim web sitelerini saklıyor mu?

Hayır. Sunucu sayfayı ve stil dosyalarını isteğin için alır ve kopyasını tutmaz. Renk analizi tarayıcında çalışır.

Bir rengin yanındaki yüzde ne anlama geliyor?

Yüzde, rengin sayfadaki ağırlıklı CSS kullanımı içindeki payıdır. Rengin ekranda ne kadar alan kapladığını değil, kodun rengi ne sıklıkla kullandığını ölçer.

Ana sayfa dışında bir sayfayı kontrol edebilir miyim?

Evet. Herkese açık herhangi bir sayfanın tam URL'sini gir, örneğin example.com/pricing.