Renk Seçici - HEX, RGB ve HSL Kodları Alın | Morph

Renk seçin, kodu alın

Morph'un renk seçici aracıyla istediğiniz rengi görsel olarak seçebilir ve kodunu anında okuyabilirsiniz: HEX (`#3A7BD5`), RGB (`rgb(58, 123, 213)`) ve HSL (`hsl(214, 64%, 53%)`). Renk alanını sürükleyerek doygunluğu ve parlaklığı ayarlayın, ton kaydırıcıyla temel rengi ayarlayın ve değeri CSS, tasarım dosyanıza veya ihtiyacınız olan her yere kolayca kopyalayın.

Üç format, tek doğru kaynak

Üç kod da aynı rengi tanımlar — sadece farklı yazım şekilleridir ve her biri farklı bir görevi vardır:

Renk herhangi bir şekilde değiştirildiğinde üç kod da senkronize kalır, böylece projeniz için gerekli olanı kolayca seçebilirsiniz.

Gerçek iş akışlarına uygun

Tasarımcılar paleti tam olarak ayarlamak ve bir tasarım dosyasına veya stil rehberine tam değerleri kopyalamak için kullanır. Ön uç geliştiriciler, bir düğme için HEX kodu almak veya tasarımcının RGB kodunu HSL'ye dönüştürerek hover durumu oluşturmak için kullanır. Tema, grafik rengi veya e-posta şablonu ayarlayan herkes, doğru tonu bulup tek tıkla kopyalayabilir. HSL, HEX'in yanında olduğu için temel renkten daha açık veya daha koyu varyantlar oluşturmak, hex rakamlarını tahmin etmekten çok daha kolaydır.

Tarayıcıda çalışır, gizlilik korunur

Renk seçici tamamen tarayıcı kodudur — renk matematiği ve arayüz her ikisi de cihazınızda çalışır. Yüklenme yok, hesap yok ve hiçbir şey sunucuya gönderilmez. Sayfa açıldığında hızlı yüklenir ve ağ bağlantısı gerektirmeyen renk seçimi ve kod hesaplaması nedeniyle çevrimdışı olarak çalışmaya devam eder.

Pratik notlar

HEX değerini kopyaladığınızda, CSS'ye doğrudan yapıştırabilirsiniz. Şeffaflık istiyorsanız, RGB'ye dönüştürün ve kodunuzda `rgba(...)` olarak alpha kanalını ekleyin. Tutarlı bir palet oluşturmak için temel bir renk seçin ve HSL parlaklık değerini kullanarak parlaklığı artırarak veya azaltarak ton ve doygunluğu sabit tutarak tonlar ve gölgeler oluşturun — bu, renk setinin bir aile gibi değil de rastgele bir dizi gibi hissetmemesini sağlar.

Nasıl kullanılır

  1. Bir renk seçin — Renk alanını sürükleyerek doygunluğu ve parlaklığı ayarlayın, ardından ton kaydırıcıyla temel rengi ayarlayın.
  2. Kodları okuyun — Renk hareket ettikçe HEX, RGB ve HSL değerleri birlikte güncellenir, böylece her zaman mevcut renk için üçünü de görürsünüz.
  3. İhtiyacınız olan formatı kopyalayın — HEX'i CSS ve tasarım çalışmalarınız için kopyalayın, RGB'yi kanalları ayarlamak için, HSL'i daha açık ve daha koyu varyantlar oluşturmak için kullanın.
  4. Projenize yapıştırın — Değeri doğrudan stil sayfanıza, tasarım aracıınıza veya tema ayarlarınıza yapıştırın.

Sık sorulan sorular

Hangi renk formatlarını veriyor?

Seçtiğiniz her renk için HEX, RGB ve HSL gösterir, her zaman senkronize tutulur, böylece projeniz için gerekli olan formatı kopyalayabilirsiniz.

HEX yerine HSL neden kullanmalıyım?

HSL, rengi sezgisel olarak ayarlamayı kolaylaştırır — parlaklığı artırarak ton oluşturun, azaltarak gölge oluşturun veya tonu kaydırarak — hex rakamlarını tahmin etmek yerine.

Şeffaf bir renk alabilir miyim?

Renginizi seçin, RGB değerlerini kopyalayın ve kodunuzda `rgba(...)` olarak alpha kanalını ekleyerek istediğiniz şeffaflık seviyesini ayarlayın.

Verilerim herhangi bir yere gönderilir mi?

Hayır. Seçici tamamen tarayıcınızda çalışır. Yüklenme yok ve hiçbir şey sunucuya gönderilmez — sayfa yüklendikten sonra çevrimdışı olarak çalışır.

Uyumlu bir palet nasıl oluştururum?

Temel bir renk seçin ve HSL değerini kullanın, ardından ton ve doygunluğu sabit tutarak parlaklığı artırarak veya azaltarak tonlar ve gölgeler oluşturun, böylece renkler bir aile gibi hissettirir.

İlgili araçlar

Renk Seçici - HEX, RGB ve HSL Kodları Alın | Morph öğesini aç →