Hex RGB HSL Renk Dönüştürücü

Ücretsiz renk dönüştürücü: HEX'ten RGB'ye, RGB'den HEX'e artı HSL, HSV, CMYK ve alfa. Canlı kaydırıcılar, renk seçici, EyeDropper, kayıtlı renk örnekleri, armoniler, WCAG kontrastı, renk körlüğü önizlemesi ve kodu dışa aktarma, kayıt gerektirmez, yerel olarak çalışır.

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

Hex RGB HSL Renk Dönüştürücü
Loading Color Converter
Share

Renkleri her yöne anında dönüştürün

Yazdığınız anda herhangi bir rengi HEX, RGB, HSL, HSV/HSB ve CMYK arasında her iki yönde dönüştürün. Tasarımcılar ve geliştiriciler için tasarlanan bu ürün, canlı degrade parçaları, bir renk seçici, bir ekran EyeDropper, kaydedilmiş ve en son renk örnekleri, hazır renk armonileri, renk tonu/gölge rampası, iki renkli karıştırıcı, renk körlüğü önizlemesi, canlı WCAG kontrast kontrolleri ve CSS, Tailwind, SCSS, Swift ve Android için kopyalamaya hazır kod parçacıkları içeren etkileşimli RGB/HSL/alfa kaydırıcılarını hiçbir şey yüklenmeden tarayıcınıza ekler.

Bir renk dönüştürücü yalnızca yaptığınız her notasyonu söylüyorsa kullanışlıdır. Bu araç, HEX'i RGB'ye ve geriye dönüştürür ve ayrıca HSL, HSV (HSB olarak da bilinir) ve CMYK arasında köprü kurar ve bunların hepsini aynı anda ve gerçek zamanlı olarak yapar. #3b82f6 gibi bir HEX yazdığınızda hemen rgb(59, 130, 246), hsl(217, %91, %60), hsv(217, %97, %96) ve cmyk(76%, %47, %0, %4) elde edersiniz. Herhangi bir alanı değiştirdiğinizde diğerleri de onu takip eder, böylece işe uygun modeli seçebilirsiniz: İşaretleme için HEX, tuval ve degradeler için RGB, sezgisel hafiflik ve doygunluk ayarları için HSL/HSV ve tasarım baskıya girdiğinde CMYK.

Özellikler

  • Çift yönlü HEX ↔ RGB ↔ HSL ↔ HSV ↔ CMYK, alfa ile
  • Canlı degrade parçalarına sahip etkileşimli RGB, HSL ve alfa kaydırıcıları
  • Yerel renk seçici + tarayıcı
  • Yakın geçmiş + kayıtlı renk örnekleri (tarayıcınızda tutulur)
  • CSS adlandırılmış renk desteği (kırmızı, turkuaz, altın…)
  • Armoniler, renk tonu/gölge rampası + iki renkli karıştırıcı
  • Renk körlüğü önizlemesi (protanopi, döteranopi, tritanopi)
  • Canlı WCAG AA/AAA kontrast rozetleri
  • CSS, Tailwind, SCSS, Swift ve Android için kopyalamaya hazır dışa aktarma

Hex RGB HSL Renk Dönüştürücü nasıl kullanılır?

  1. 1

    Bir renk seçin veya yazın

    Renk seçiciyi veya EyeDropper'ı kullanın veya bir HEX, rgb(), hsl(), hsv()/hsb(), cmyk() değeri veya 'teal' gibi bir CSS renk adı yazın. Diğer tüm formatlar anında güncellenir.

  2. 2

    Dönüşümleri okuyun

    HEX, RGB, HSL, HSV ve CMYK alanlarının tümü senkronize kalır. Bunlardan herhangi birini düzenleyin ve geri kalanı canlı olarak yeniden hesaplayın, böylece tercih ettiğiniz notasyonda çalışabilirsiniz.

  3. 3

    Paletleri ve armonileri keşfedin

    Tamamlayıcı, benzer, üçlü veya tetradik renk örneklerini tıklayın, renk tonu/gölge açıklık rampasında yürüyün veya ihtiyacınız olan tam gölgeye ulaşmak için iki rengi karıştırıcıyla karıştırın.

  4. 4

    Kontrastı kopyalayın ve kontrol edin

    Tek tıklamayla herhangi bir formatı kopyalayın ve göndermeden önce renginizin beyaz veya siyah üzerinde okunabilir durumda kaldığını doğrulamak için WCAG AA/AAA etiketlerini okuyun.

Yaygın kullanım durumları

  • CSS veya JSX yazarken HEX'i RGB'ye (veya RGB'yi HEX'e) dönüştürün.
  • Tema ve alfa ince ayarları için bir marka HEX'i HSL/HSV'ye çevirin.
  • Baskı ve baskı öncesi iş akışları için bir rengi CMYK'ye dönüştürün.
  • Anında WCAG kontrast geri bildirimiyle erişilebilir paletler oluşturun.
  • Kullanıcı arayüzü ve resimler için tamamlayıcı ve benzer şemalar oluşturun.
  • EyeDropper ile doğrudan ekrandan bir renk yakalayın.

Ayrıntılı kılavuz

Matematik olmadan HEX'ten RGB, HSL, HSV ve CMYK'ye

Temelde dönüştürücü her girişi tek bir RGB üçlüsüne normalleştirir, ardından diğer alanları türetmek için standart sRGB formüllerini uygular, aynı matematik tarayıcıları ve tasarım araçları kullanır, böylece sayılar Figma, Photoshop veya Chrome DevTools'ta gördüklerinizle eşleşir. Aynı zamanda kısayol HEX'i (#fff), alfa ile 8 basamaklı HEX'i (#3b82f6aa), rgb()/rgba(), hsl()/hsla() ve koyu kırmızı, deniz mavisi ve altın gibi yaygın CSS adlı renkleri anlar; böylece hiçbir zaman bir formülü ezberlemenize veya sekmeleri değiştirmenize gerek kalmaz. Her formatta bir kopyalama düğmesi bulunur ve büyük önizleme renk örneği, renginizi gerçek bir arka planda gösterir, böylece bir bakışta sağlığını kontrol edebilirsiniz.

Armoniler ve rampalarla daha iyi paletler tasarlayın

Tek bir renk seçmek kolaydır; Tutarlı bir palet oluşturmak zor kısımdır. Dönüştürücü, doğrudan projenize bırakabileceğiniz tıklanabilir renk örnekleri olarak renk teorisi kurallarından tamamlayıcı (tekerlek üzerinde zıt), analog (komşular), üçlü ve tetradik (eşit aralıklı) renk armonileri üretir. Açıklık rampası, aynı ton ve doygunlukta siyaha yakından beyaza yakına doğru yürür ve size tasarımcıların fareyle üzerine gelme, kenarlık ve devre dışı durumlarına ihtiyaç duyduklarında ulaşabilecekleri renk tonlarını ve gölgeleri verir. İki renkli bir karıştırıcı, aralar oluşturmak için herhangi bir renk çiftini seçilen bir oranda karıştırmanıza olanak tanır ve ince ayar satırı, tek tıklamayla tonu açmanıza, koyulaştırmanıza, doygunlaştırmanıza, doygunluğunu azaltmanıza veya döndürmenize olanak tanır.

Erişilebilirlik ve gizlilik yerleşik

İyi renk okunabilir renktir. Dönüştürücü, renginizin hem beyaza hem de siyaha karşı WCAG kontrast oranını gösterir ve AA (4,5:1) ve AAA (7:1) uyumluluğunu işaretler, böylece düşük kontrastlı metni gönderilmeden önce yakalayabilirsiniz, bu da özel kontrast denetleyicinin doğal bir tamamlayıcısıdır. Ve her şey tarayıcınızda yerel olarak çalıştığından, renkleriniz asla cihazınızdan ayrılmaz: yükleme, hesap ve izleme yoktur; bu, araç anında kalırken markanın ve müşterinin çalışmasının gizli kalmasını sağlar.

Sık sorulan sorular

HEX'i RGB'ye nasıl dönüştürebilirim?

HEX alanına bir HEX değeri yazın veya yapıştırın (#3b82f6 veya #fff gibi) veya renk seçiciyi kullanın. RGB değeri anında rgb(r, g, b) olarak görünür ve tek tıklamayla kopyalayabilirsiniz. Dönüşüm diğer şekilde de çalışır; bir rgb() değeri yazın ve HEX güncellemeleri yayınlanır.

Aynı anda HSL, HSV ve CMYK'ye dönüştürebilir miyim?

Evet. Her alan: HEX, RGB, HSL, HSV/HSB ve CMYK senkronize kalır. Herhangi birini düzenleyin ve diğerleri hemen yeniden hesaplansın, böylece ayrı araçları çalıştırmadan aynı renk için beş notasyonun tamamını okuyabilirsiniz.

HSL ve HSV arasındaki fark nedir?

Her ikisi de rengi tona göre tanımlar, ancak HSL (Açıklık) ve HSV/HSB (Değer/Parlaklık) doygunluğu farklı şekilde modeller. HSL, saf renkleri %50 açıklığa yerleştirirken, HSV bunları %100 değere yerleştirir, böylece ikisi arasında aynı yüzde daha açık veya daha koyu görünebilir. Bu araç her ikisini de gösterir, böylece çerçevenizin beklediğini seçebilirsiniz.

Yazdırma için CMYK değerini nasıl alabilirim?

Renginizi herhangi bir biçimde yazın ve CMYK alanını okuyun; örneğin #3b82f6 cmyk'ye (%76, %47, %0, %4) dönüşür. CMYK, yazıcılar tarafından kullanılan çıkarmalı model olduğundan, bir broşür veya ambalajda bir web renginin eşleştirilmesi gerektiğinde bu kullanışlıdır.

Ekranımdan bir renk seçebilir miyim?

Evet, desteklenen tarayıcılarda (Chrome, Edge ve EyeDropper API'sine sahip diğerleri) 'Seç' düğmesi bir ekran damlalığı açar; böylece bir görüntüden, bir web sitesinden veya masaüstünüzden herhangi bir pikseli, bir rengi örnekleyebilir ve bunu doğrudan dönüştürücüye yükleyebilirsiniz.

Renkleri kaydırıcılarla ayarlayabilir ve şeffaflık ekleyebilir miyim?

Evet. Etkileşimli R, G, B, H, S, L ve alfa kaydırıcılarının her biri canlı bir degrade izi gösterir; böylece tam bir değeri sürükleyerek veya yazarak bir gölgeye ince ayar yapabilirsiniz. Alfa kaydırıcı, şeffaflık için 8 basamaklı HEX ve rgba()/hsla() çıktısı üretir.

Renk körü kullanıcılara bir rengin nasıl göründüğünü gösteriyor mu?

Evet. Renk körlüğü önizlemesi, renginizin protanopi, döteranopi, tritanopsi ve tam akromatopsi altında nasıl göründüğünü simüle eder; böylece renk görme eksikliği olan yaklaşık 12 erkekten 1'i ve 200 kadından 1'i için bir paletin hâlâ iletişim kurabildiğini kontrol edebilirsiniz.

Rengi CSS, Tailwind veya uygulama kodu olarak dışa aktarabilir miyim?

Evet. Dışa aktarma paneli, CSS değişkenleri, rgb(), SCSS, Tailwind yapılandırma girişi, Swift UIColor, Android Color.parseColor ve JSON için kopyalamaya hazır parçacıkların yanı sıra tarayıcınızda yerel olarak depolanan en son ve kaydedilmiş renk örneklerini sağlar.

Renk dönüştürücü ücretsiz ve özel mi?

Evet. Hiçbir kayıt olmadan tamamen ücretsizdir ve tüm dönüşümler tarayıcınızda yerel olarak gerçekleşir. Renkleriniz hiçbir zaman bir sunucuya yüklenmez, dolayısıyla marka ve müşteri çalışmaları gizli kalır.

RGB veya HEX'i HSL ve OKLCH'ye dönüştürebilir miyim?

Evet. HEX, RGB(A), HSL ve modern OKLCH arasında dönüşüm yapar, böylece CSS'nizin veya tasarım aracınızın ihtiyaç duyduğu tam formatı kopyalayabilirsiniz.

Şeffaflığı yönetiyor mu (alfa ile RGBA/HEX)?

Evet. Bir alfa değeri ekleyin; RGBA ve 8 basamaklı onaltılık üretir, böylece rengi stillerinize kopyaladığınızda opaklık korunur.

Günlükten

All articles →