Renk Dönüştürücü — HEX’ten RGB’ye ve HSL’ye Çevir (Çevrimiçi)

HEX, RGB veya HSL gibi herhangi bir formatta bir rengi yapıştırın ve anında bu üç formatın tümünü ve canlı önizleme örneğini elde edin. Ayrıca, yerleşik renk seçiciyle rengi görsel olarak da seçebilirsiniz. Renkleri CSS, tasarım araçları ve kod arasında aktarmak için idealdir.

Bu Araç Nedir?

Web’deki renkler, birbirine eşdeğer birkaç farklı biçimde ifade edilir. HEX (#4f46e5), CSS ve tasarım teslimatlarında her yerde kullanılan kısa biçimdir. RGB (rgb(79, 70, 229)), kırmızı, yeşil ve mavi bileşenlerini doğrudan belirtir; bu kod genellikle gereklidir. HSL (hsl(243, 75%, 59%)) ise renk tonu, doygunluk ve açıklığı tanımlar; bu, bir rengi daha koyu hale getirmek veya doygunluğunu azaltmak gibi ayarlamalar için en sezgisel formattır.

Hepsi aynı rengi ifade ediyor; bu araç, bu renkler arasında tam bir dönüştürme yapar ve bir önizleme gösterir, böylece istediğiniz rengin bu olduğunu doğrulayabilirsiniz.

Neden Kullanmalısınız?

HEX (3 veya 6 basamaklı), RGB veya HSL gibi herhangi bir formatı kabul eder ve tüm formatlarda çıktı verir.
Canlı önizleme örneği sayesinde sadece rakamları değil, rengi de görebilirsiniz.
Gözle seçim yapmak istediğinizde kullanabileceğiniz görsel renk seçici.
Her format için tek tıklamayla kopyalama, CSS veya kod için hazır.
Ücretsiz, anında, dosya yüklemeye gerek yok.

Nasıl Kullanılır

Bir renk yazın veya yapıştırın: #4f46e5, rgb(79, 70, 229) veya hsl(243, 75%, 59%); hepsi geçerlidir.
Ya da renk seçiciye tıklayıp görsel olarak seçebilirsiniz.
Sonuçlarda yer alan üç formatı da okuyun ve önizleme örneğini kontrol edin.
İhtiyacınız olan biçimin yanındaki "Kopyala" düğmesine tıklayın.

Örnek

Giriş

#4f46e5

Çıkış

HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)

Üç farklı gösterim, tek bir renk.

Hangi formatı kullanmalısınız?

Üçü de aynı rengi tam olarak tanımlıyor — seçim, doğruluktan ziyade, eldeki görev için hangisiyle çalışmanın daha kolay olacağına bağlıdır.

Biçim	En uygun olan	Neden
Onaltılık renk kodu	CSS, tasarım devri, hızlı kopyala-yapıştır	Yazması ve yapıştırması en kolay olan; Figma gibi tasarım araçlarında kullanılan evrensel biçim.
Kırmızı, Yeşil, Mavi (79, 70, 229)	Kanalları doğrudan işleyen kodlar, tuval/görüntü işlemleri	Grafik API’lerinin ve görüntü piksel verilerinin renkleri gerçekte nasıl depoladığını yansıtmaktadır.
HSL (hsl(243,75%,59%))	Bir rengi ayarlama — daha açık, daha koyu, daha doygun/daha az doygun	Açıklık ve doygunluk, her kanalın birlikte değiştiği HEX/RGB formatından farklı olarak, doğrudan ayarlayabileceğiniz ayrı değerlerdir.

Yaygın kullanım örnekleri

Bir tasarım aracında görsel olarak bir renk seçip, bunu CSS veya kodda gerekli olan tam HEX veya RGB değerine dönüştürmek.
HSL sistemine dönüştürerek, açıklık değerini ayarlayıp tekrar geri dönüştürerek bir dizi ilgili ton (daha açık/daha koyu varyantlar) oluşturmak.
Her biri farklı bir format bekleyen çeşitli araçlar arasında bir marka rengini uyumlu hale getirmek — örneğin, RGB formatında bir logo dosyası, HEX formatında bir stil kılavuzu ve tema oluşturmak için HSL formatına ihtiyaç duyan bir CSS değişkeni.
Bir ekran görüntüsünden veya tasarım dosyasından alınan bir rengin (genellikle RGB olarak verilir) stil sayfasında yer alan HEX değeriyle eşleşip eşleşmediğinin doğrulanması.

Sıkça Sorulan Sorular

HEX veya RGB yerine HSL’yi ne zaman kullanmalıyım?

Bir rengi analiz etmek istediğinizde. HSL sisteminde bir rengi %10 daha koyu hale getirmek, açıklığı 10 puan azaltmak anlamına gelir; HEX veya RGB sistemlerinde ise tüm kanalları yeniden hesaplamanız gerekir. Tasarım sistemleri, tam da bu nedenle paletleri genellikle HSL sisteminde tanımlar.

Bu araç, #fff gibi 3 basamaklı HEX değerlerini destekliyor mu?

Evet. #fff, #ffffff’nin kısaltmasıdır — her rakam iki katına çıkarılmıştır. Her iki biçim de kabul edilir ve çıktıda 6 basamaklı tam biçim gösterilir.

Peki ya alfa (şeffaflık)?

Bu araç, opak renkleri (RGB/HSL değerlerini) dönüştürür. Şeffaflık istiyorsanız, alfa değerini kendiniz ekleyin: rgba(79, 70, 229, 0.5) veya #4f46e580 — renk kısmı aynı kalır.

HSL değerlerim neden başka bir araçtaki değerlerden 1 farklı çıkıyor?

Yuvarlama. HSL↔RGB dönüştürmesi kesirli değerler üretir ve farklı araçlar bu değerleri farklı şekillerde yuvarlar. Ton veya yüzde cinsinden ±1’lik bir fark gözle görülmez ve normaldir.

"Kırmızı" gibi renk adları destekleniyor mu?

1. Aşamada değil — bu araç, geliştiricilerin en sık dönüştürdüğü üç sayısal biçime odaklanmaktadır. Rengin HEX/RGB/HSL değerini girin veya renk seçiciyle görsel olarak seçin.

HEX / RGB / HSL Renk Dönüştürücü