RGB'den HEX'e Dönüştürücü

RGB'den HEX'e Dönüştürücü Nedir?

// Serialize {r, g, b, alpha} → canonical hex string
// Emits 6-digit #RRGGBB when alpha === 1, 8-digit #RRGGBBAA otherwise.
function formatHex({ r, g, b, alpha = 1 }) {
  const pair = (v) => Math.round(v).toString(16).padStart(2, '0').toUpperCase();
  const rgb = pair(r) + pair(g) + pair(b);
  if (alpha >= 1) return `#${rgb}`;
  const a = pair(alpha * 255);
  return `#${rgb}${a}`;
}

console.log(formatHex({ r: 255, g: 87, b: 51 }));              // '#FF5733'
console.log(formatHex({ r: 59, g: 130, b: 246 }));             // '#3B82F6'
console.log(formatHex({ r: 255, g: 87, b: 51, alpha: 0.5 })); // '#FF573380'
console.log(formatHex({ r: 5, g: 0, b: 0 }));                  // '#050000' — padStart matters

Temel Özellikler

RGB'den HEX'e Dönüştürücü Alternatifleri

RGB'den HEX'e Örnekleri

rgb(255 87 51)

rgb(59 130 246)

rgb(255 87 51 / 0.5)

rgb(100% 50% 0%)

Yaygın RGB → HEX Dönüşümleri

En çok dönüştürülen 10 RGB demetinin ve HEX eşdeğerlerinin referans tablosu — saf primerler, saf sekonderler ve Tailwind paletinden iki gerçek dünya marka rengi.

RGB'den HEX'e Dönüştürücü Nasıl Kullanılır

1. 1

   RGB alanına bir RGB demeti yazın veya yapıştırın

   Herhangi bir `rgb()` değerini RGB girdisine bırakın — modern boşlukla ayrılmış `rgb(255 87 51)`, eski virgül `rgb(255, 87, 51)`, eğik çizgi aracılığıyla alpha `rgb(255 87 51 / 0.5)` veya `rgba(255, 87, 51, 0.5)` biçimi veya yüzde kanalları `rgb(100% 34% 20%)`. Araç, HEX'i hesaplamadan önce tüm girdi şekillerini aynı dahili RGB demetine normalleştirir. Geçersiz karakterler, aralık dışı tamsayılar veya bozuk sözdizimi sessiz bir satır içi hata üretir; geçerli RGB, diğer her biçim alanını gerçek zamanlı olarak günceller.

2. 2

   HEX kodunu HEX alanından okuyun

   RGB alanının üzerindeki HEX alanı, eşleşen HEX değerini gösterir: opak bir renk için `#FF5733`, alpha taşıyan bir renk için `#FF573380` (8 haneli biçim). Çıktı, çoğu marka kılavuzuyla tutarlılık için varsayılan olarak büyük harfli HEX hanelerini kullanır; küçük harf (`#ff5733`) tek bir mekanik değiştirme uzaklıktadır ve eşit derecede geçerli CSS'tir. Dönüşüm bit-tamdır — bir RGB → HEX → RGB gidiş-dönüşü, orijinal demeti float sapması olmadan aynen kurtarır.

3. 3

   HEX dizgesini almak için Kopyala'ya tıklayın

   Her biçim kartının sağında bir Kopyala düğmesi vardır. Tek tık ve değer panonuza iner — düğme etiketi kısaca "Kopyalandı!" olarak değişir, böylece bilirsiniz. Kopyalanan dizge baştaki `#`'yi içerir, böylece doğrudan bir CSS kuralına, bir Figma renk alanına, bir SwiftUI HEX uzantısına veya bir Android `colors.xml`'ine yapıştırılır. Platforma özgü sözdizimi için (SwiftUI `Color(red:green:blue:)`, Compose `Color(0xFF...)`, Tailwind v4 `@theme` belirteçleri), seçicinin altındaki Kod olarak kopyala bölümünü kullanın.

4. 4

   Ayrıca görünür: HSL, OKLCH, OKLAB, CMYK, adlandırılmış renk

   Yapıştırdığınız aynı RGB, diğer biçim alanlarını da aydınlatır — eski CSS için HSL, algısal olarak tek tip tasarım sistemleri için OKLCH ve OKLAB, tasarımcı renk seçici iş akışları için HSV ve HWB, baskı tahminleri için CMYK ve belgelendirme ve düz yazı için en yakın CSS adlandırılmış rengi. Yalnızca RGB → HEX ile sınırlı değilsiniz; bir Tailwind v4 `@theme` bloğu için OKLCH üçlüsüne de ihtiyacınız varsa, kendi Kopyala düğmesiyle OKLCH alanında orada bekliyor.

5. 5

   Görsel ince ayarlar için seçiciyi kullanın

   Biçim ızgarasının altında, görsel keşif için bir SL karesi + renk tonu kaydırıcısı + alpha kaydırıcısı bulunur. Herhangi bir kontrolü sürükleyin ve başladığınız RGB ve HEX dahil her metin alanı gerçek zamanlı olarak güncellenir. Chromium tabanlı tarayıcılarda (Chrome, Edge, Brave) Damlalık düğmesi yerel `EyeDropper` API'sini etkinleştirir — ekran üzerindeki herhangi bir pikseli, tarayıcı penceresinin dışı dahil örneklemek için yararlıdır; başka bir uygulamanın arayüzünden bir RGB demetini önce ekran görüntüsü almadan yakalamak ve ardından HEX'i hemen okumak istediğinizde işe yarar.

Yaygın RGB / HEX Hataları

padStart'ı atla:
[5, 87, 51].map(v => v.toString(16)).join('') → '55733'
Geçersiz 5 karakterli HEX üretir.

padStart(2, '0') kullanın:
[5, 87, 51].map(v => v.toString(16).padStart(2, '0')).join('') → '055733'
Geçerli 6 karakterli HEX; 0-255 arası tüm kanal değerleri için doğru çalışır.

Yuvarlamayı atla:
(0.5 * 255).toString(16) → '7f.8'
Ondalık nokta içeren geçersiz HEX üretir.

Önce tamsayıya yuvarlayın:
Math.round(0.5 * 255).toString(16).padStart(2, '0') → '80'
Geçerli 2 haneli HEX çifti; CSS Color 4 normalleştirmesiyle eşleşir.

Android baştaki alpha HEX'ini CSS'e yayın:
rgb(255 87 51 / 0.5) → #80FF5733 (Android biçimi)
CSS bunu alpha=128, R=255, G=87, B=51 olarak ayrıştırır — tamamen yanlış renk.

Hedef platformun belgelenmiş biçimini kullanın:
CSS için: #FF573380 (alpha son bayt olarak)
Android Compose için: Color(0x80FF5733) (alpha ilk bayt olarak)
İkisi arasında yeniden sıralamadan çapraz yapıştırmayın.

Gamma kodlu RGB'yi doğrudan ortalayın:
(rgb(255,0,0) + rgb(0,255,0)) / 2 = rgb(128, 128, 0)
Koyu zeytin gibi görünür, parlak sarı değil.

Doğrusal-RGB'de ortalayın:
çöz → doğrusal-RGB → ortala → yeniden kodla → rgb(188, 188, 0)
Fiziksel ışık karışımının ürettiğiyle eşleşen görsel olarak parlak sarı.

RGB'den HEX'e Kimler Kullanır

Canvas RGB'sini CSS HEX'ine Dönüştüren Ön Uç Geliştiriciler

Canvas API çizim işlevleri renkleri RGB demetleri olarak bildirir ve kabul eder (`ctx.fillStyle = 'rgb(255 87 51)'`), ancak çevreleyen CSS stil sayfası HEX değişkenleri ister (`--color-fill: #FF5733`). RGB'yi bir kez yapıştırmak, bir CSS özel özelliğine bırakmaya hazır eşleşen HEX'i üretir. Canvas ile işlenmiş bir grafik veya veri görselleştirmesinden marka renklerini statik arayüzde yeniden kullanmak üzere çıkarırken yararlıdır.

Photoshop RGB'sini Figma HEX'ine Dönüştüren Tasarımcılar

Adobe'nin renk seçicisi (Photoshop, Illustrator ve InDesign'da) üç kanal kutusunda RGB'yi üç 0-255 tamsayısı olarak bildirir. Aksine Figma, tasarım panellerinde renk değerlerini varsayılan olarak HEX olarak görüntüler. Üç Photoshop tamsayısını burada `rgb(...)` olarak yapıştırın, HEX çıktısını kopyalayın, Figma'nın renk alanına bırakın. Bir ekran görüntüsü ve damlalık dolaşmasına gerek kalmadan orijinal Photoshop rengiyle tam olarak eşleşir.

LED Sensör RGB'sini Web HEX'ine Dönüştüren Donanım Geliştiricileri

Adreslenebilir LED şeritleri, renk sensörleri ve donanım RGB kameraları, kanal değerlerini 0-255 tamsayıları olarak bildirir. Okumalar bir web panosunu yönlendirmesi gerektiğinde ("lamba şu anda bu renkte parlıyor"), CSS `style="background: ..."` özniteliğinin beklediği eşleşen HEX kodudur. Sensörün RGB üçlüsünü yapıştırın, HEX'i kopyalayın, pano işaretlemesine takın.

Unity Rengini Web Mockup'una Dışa Aktaran Oyun Geliştiricileri

Unity'nin `Color`'ı ve Unreal'in `FLinearColor` yapıcıları normalleştirilmiş 0-1 float'lar alır; her birini 255 ile çarpmak eşleşen RGB tamsayılarını verir. Elde edilen `rgb(...)`'yi burada yapıştırın, HEX'i kopyalayın, oyun içi vurgu renkleriyle tam olarak eşleşmesi gereken web mockup veya pazarlama sitesine bırakın. Eşzamanlı OKLCH görünümü, algısal açıklığı da yüzeyleştirir, böylece mockup paleti oyunun parlaklık seviyelerine uyacak şekilde elle ayarlanabilir.

Photoshop Marka Renklerini Denetleyen Erişilebilirlik Mühendisleri

Marka stil kılavuzu renkleri RGB tamsayı üçlüleri olarak bildirdiğinde ("marka turuncusu RGB 255 / 87 / 51'dir") ancak WCAG denetim aracı HEX kodları istediğinde, bu dönüştürücü köprüdür. RGB üçlüsünü yapıştırın, HEX'i kopyalayın, denetimden geçirin. Bu araçtaki WCAG ve APCA kontrast rozetleri de kararı tek adımda yüzeyleştirir, böylece üç ayrı araç arasında zıplamanız gerekmez.

rgba()'yı 8 Haneli HEX'e Taşıyan E-posta Geliştiricileri

Modern e-posta istemcisi HTML'i, alpha taşıyan renkler için 8 haneli HEX'i (`#FF573380`) destekler, ancak eski şablonlar genellikle aynı değeri `rgba(255, 87, 51, 0.5)` olarak saklar. rgba()'yı burada yapıştırmak ve 8 haneli HEX çıktısını okumak, geçişi mekanik hale getirir. HEX alanı, %50 alpha durumu için `#FF573380` gösterir; eski `rgba()` biçimi, hâlâ ihtiyaç duyan geri dönüş bağlamları için RGB alanında kalır.

Marka Belirteçlerini Her İki Biçimle Belgeleyen Geliştiriciler

Tasarım belirteci belgelendirmesi genellikle aynı rengi hem RGB hem de HEX biçimlerinde gösterir: CSS kod bloğu için HEX, düz yazı açıklaması için RGB ("marka turuncusu `#FF5733`'tür, RGB 255 / 87 / 51'e eşdeğer"). İkisini yan yana görünür olarak bulundurmak, bir belge yazarının iki ayrı araç çalıştırmak yerine her birini tek geçişte kopyalamasına olanak tanır. Paylaşılabilir URL hash'i ayrıca okuyucuların tartışılan tam renge tıklamasına olanak tanır.

Piksel Renklerini HEX Spesifikasyonlarına Karşı Doğrulayan QA Mühendisleri

Görsel regresyon testleri bazen piksel renklerini RGB tamsayıları olarak yakalar (`expect(pixel).toMatchRgb([255, 87, 51])`), oysa altta yatan spesifikasyon HEX olarak verilir ("düğmeler `#FF5733` olarak işlenmelidir"). Yakalanan RGB'yi burada yapıştırmak, QA mühendisinin doğrudan spesifikasyonla karşılaştırabileceği eşleşen HEX'i üretir. Dönüşümün bit-tamlığı, karşılaştırmanın float sapma farklarında titremeyeceği anlamına gelir.

RGB'den HEX'e Matematik ve Serileştirme

toString(16).padStart(2, '0') Tek Satırlık Uygulamadır

Tüm RGB'den HEX'e dönüşüm, kanal başına tek bir ifadeye sığar: `value.toString(16).padStart(2, '0')`. JavaScript'in `toString(16)`'si, bir ondalık tamsayıyı taban-16 dizge gösterimine dönüştürür. `padStart(2, '0')`, unutması kolay ayrıntıdır — onsuz, kanal değeri 5 `'05'` yerine `'5'` olarak serileştirilir ve diğer kanallarla birleştirildiğinde `#55733` gibi geçersiz 5 karakterli bir HEX üretir. Standart deyim, `'#'` ön ekiyle takip edilen `[r, g, b].map(v => v.toString(16).padStart(2, '0')).join('')`'dir.

Yüzde Normalleştirmesi: × 255 / 100, Ardından Yuvarla

CSS Color 4 `rgb()`'de yüzde kanallarına izin verir: `rgb(100% 34% 20%)`, `rgb(255 87 51)`'e eşdeğerdir. Normalleştirme kuralı `Math.round(percent × 255 / 100)`'dür. `50% × 255 / 100 = 127.5`, 128'e yuvarlanır (bankacı yuvarlaması .5'ten uzağa). Aynı kural, yüzde olarak ifade edildiğinde alpha için de geçerlidir (`rgb(255 87 51 / 50%)` ↔ `rgb(255 87 51 / 0.5)`). Tamsayı ve yüzde biçimleri, normalleştirmeden sonra aynı HEX çıktısını üretir; araç, yeniden normalleştirmeden sonra kanonik tamsayı biçimini RGB alanında yüzeyleştirir.

Alpha'dan HEX'e: 255 ile Çarp, Yuvarla, Sondaki Çift Olarak Kodla

Alpha taşıyan RGB (`rgb(255 87 51 / 0.5)`), alpha'yı 255 ile çarparak, en yakın tamsayıya yuvarlayarak ve RGB'nin ardına eklenen 4. bir HEX çifti olarak kodlayarak 8 haneli HEX yayar. `0.5 × 255 = 127.5`, 128 = `0x80` olarak yuvarlanır, çıktı `#FF573380`. CSS Color 4 spesifikasyonu bu dönüşüm için bankacı yuvarlamasını (yuvarlamayı çifte yuvarla) kullanır; araç bu kuralı izler. 8 haneli biçim, alpha tam olarak 1 olduğunda 6 haneli biçime geri döner; böylece stil sayfalarına sondaki `FF` çiftleri sızdırılmaz.

RGB Girdisi: CSS Color 4 Boşlukla Ayrılmış ve Eski Virgül Kabul Edilir

Ayrıştırıcı, hem modern CSS Color 4 biçimi `rgb(255 87 51)` hem de eski CSS 1 biçimi `rgb(255, 87, 51)` kabul eder. Modern biçim, hepsi boşluk ayırma ve alpha için eğik çizgi kullanan diğer CSS Color 4 işlevsel gösterimleri (`hsl()`, `lab()`, `oklch()`, `color()`) ile hizalanır. Eski virgül biçimi, her yaşayan tarayıcıda hâlâ desteklenir ve eski kod tabanlarında yaygın olarak kalır. Her ikisi de aynı HEX çıktısını üretir; aracın HEX serileştiricisi hangi girdi şeklinin geldiğini umursamaz.

Gidiş-Dönüş Kararlılığı için OKLCH Dahili Kaynak-Doğru

Bu maça özellikle RGB → HEX'i hedeflese de, paylaşılan altyapı dönüştürücüsü kanonik rengi dahili olarak bir OKLCH üçlüsü olarak tutar. Bu, RGB → HEX → HSL → OKLAB → CMYK → RGB gidiş-dönüşlerinin adım başına float sapması olmadan gerçekleştiği anlamına gelir; HSL veya sRGB'yi merkez olarak yönlendiren eski dönüştürücüler her dönüşümde yuvarlama hatası biriktirir. OKLCH'nin seçimi (OKLAB yerine) Hue'yu kararlı bir eksen olarak korur, böylece renk tonu kaydırıcısını sürüklemek yanlışlıkla gri üzerinden çapraz geçiş yapmaz. Björn Ottosson'un 2020 OKLAB makalesine göre.

Kanal Kodlaması: 8-Bit İşaretsiz, sRGB Gamma Kodlanmış

Her RGB kanalı, IEC 61966-2-1 (1996) tarafından tanımlanan sRGB renk uzayında kodlanmış 8-bit'lik bir işaretsiz tamsayıdır (0-255). Değerler *gamma kodludur* — yani kanal değeri ile algılanan parlaklık arasındaki ilişki doğrusal değildir, parçalı sRGB transfer işlevini izler (sıfır yakınında küçük bir doğrusal segmentle yaklaşık 2.4 üs). Bu, renk matematiği yaparken önemlidir: iki RGB değerini gamma kodlu biçimlerinde ortalamak yanlış algısal orta noktayı verir. Doğru renk harmanlaması için önce doğrusal-RGB'ye çözün (CSS Color 4 §11.2), ardından ortalayın, ardından yeniden kodlayın. Aracın OKLCH dahili modeli bunu şeffaf hale getirir.

RGB / HEX İş Akışları için En İyi Uygulamalar

Marka Kılavuzlarında Büyük Harfli, Kodda Küçük Harfli HEX'i Tercih Edin

Marka kılavuzları, pazarlama PDF'leri ve tasarımcıya yönelik belgelendirme görsel tutarlılık için genellikle büyük harfli HEX (`#FF5733`) kullanır — tamamı büyük harfli görünüm bir marka kimliği olarak okunur. Kod (CSS, JSON, JavaScript kaynağı) gelenek gereği genellikle küçük harfi (`#ff5733`) kullanır çünkü küçük harf daha hızlı yazılır ve otomatik üretilen linter çıktısında daha yaygındır. Her ikisi de geçerli CSS'tir ve aynı şekilde ayrıştırılır; her bağlam için birini seçin ve tutarlı kalın. Araç varsayılan olarak büyük harf yayar; tek mekanik değiştirme küçük harfe çevirir.

Yalnızca Alpha < 1 Olduğunda 8 Haneli HEX Yayın

Alpha 1'e eşit olduğunda (tamamen opak), 6 haneli biçime geri dönün. Sondaki bir `FF` çifti (`#FF5733FF`) yasal CSS'tir ancak stil sayfalarını görsel olarak kalabalıklaştırır ve bazı eski ayrıştırıcıları yanlış işlemeye yönelik karıştırır. 8 haneli biçim yalnızca alpha anlamlı olarak şeffaf olduğunda görünmelidir. Bu araç bu kuralı otomatik olarak izler — opak renkler 6 haneli HEX yayar, alpha taşıyan renkler 8 haneli HEX yayar ve kesinti noktası tamdır (alpha = 1.0 6 hane yayar; alpha = 0.9999 verileri korumak için 8 hane yayar).

Renk Matematiği için RGB Kanallarını Doğrudan Ortalamayın

RGB kanalları gamma kodludur — iki RGB değerini ortalamak yanlış algısal orta noktayı verir. `(255, 0, 0)` ile `(0, 255, 0)` ortalaması `(127, 127, 0)` üretir; beklediğiniz görsel olarak parlak sarı orta nokta değil, çamurlu koyu zeytindir. Doğru renk harmanlaması için önce doğrusal-RGB'ye çözün (CSS Color 4 §11.2), ardından ortalayın, ardından yeniden kodlayın. Veya, daha iyisi, algısal mesafenin tek tip olduğu OKLAB veya OKLCH'de çalışın — tam olarak tasarım sistemi palet üreticilerinin yaptığı budur.

CSS Değişkenleri için HEX'i, Donanım için RGB'yi Tercih Edin

Bir CSS özel özelliği veya bir Tailwind yapılandırma belirteci yazarken, HEX'i tercih edin — daha kısadır ve JSON veya YAML'a temiz olarak sığar. Tüketen kod kanal başına aritmetik yaptığında (canvas çağrıları, görüntü manipülasyonu, donanım LED sürücüleri, OpenGL renk öznitelikleri), RGB tamsayı biçimi tüketmesi daha hızlıdır. İki biçim aynı rengi tanımlar; seçim, doğruluk hakkında değil, tamamen kimin okuduğu ve yazdığı hakkındadır. Bu aracın eşzamanlı alan görünümü ikisini de eşit derecede ucuza yapar.

255 ile Çarpmadan Önce Alpha Aralığını Doğrulayın

Kendi RGB → 8 haneli HEX dönüştürücünüzü uygularken, `× 255` adımından önce alpha float'unun `[0, 1]` içine düştüğünü doğrulayın. Aralık dışı alpha (negatif veya > 1), bazı ayrıştırıcıların kabul ettiği ve bazılarının reddettiği geçersiz HEX çiftlerini sessizce üretir — kırılgan bir başarısızlık modu. Önce kırpın (`Math.max(0, Math.min(1, alpha))`), ardından çarpın, ardından yuvarlayın, ardından HEX olarak kodlayın. Araç, bozuk bir HEX dizgesi yaymak yerine aralık dışı alpha için sessiz bir satır içi hata yüzeyleştirir.

Canlı Renk Kararlarını Paylaşmak için URL Hash'ini Kullanın

Her renk değişikliği URL hash'ini otomatik olarak `#hex=ff5733` olarak günceller. URL'yi bir Slack iş parçacığına veya GitHub sorununa kopyalayın ve onu açan herkes aynı HEX ile aynı renge düşer. Bu, sohbette bir RGB demeti yapıştırmaktan daha güvenilirdir — alıcılar bazen değeri elle girerken virgüllerde yazım hatası yapar veya bir kanal düşürür — ve bir tasarım inceleme iş parçacığının "Salı günü tartıştığımız turuncu" yerine tam bir renge başvurmasına olanak tanır. Hash sunucuya asla iletilmez.

Sıkça Sorulan Sorular