HEX'ten RGB'ye Dönüştürücü

Herhangi bir HEX renk kodunu tarayıcınızda RGB'ye dönüştürün — 3 haneli, 6 haneli ve alpha içeren 8 haneli HEX desteklenir. Ücretsiz, anında, kayıt yok, renkleriniz sayfadan asla çıkmaz.

Takip Yok Tarayıcıda Çalışır Ücretsiz

Tüm renk dönüşümü tarayıcınızda yerel olarak gerçekleşir. Hiçbir veri herhangi bir sunucuya gönderilmez.

HEX

RGB

HSL

HSV

HWB

CMYK

OKLCH

OKLAB

Adlandırılmış

Renk gamı: sRGB Display P3 Rec2020

Karşı kontrast: —

AA AA-Lg AAA AAA-Lg · APCA Lc —

Renk körlüğü simülasyonu (8 tür)

Protanopi (kırmızı-kör) —

Döteranopi (yeşil-kör) —

Tritanopi (mavi-kör) —

Akromatopsi (tam) —

Protanomali (kırmızı-zayıf) —

Döteranomali (yeşil-zayıf) —

Tritanomali (mavi-zayıf) —

Akromatomali (kısmi) —

Açık Tonlar / Koyu Tonlar / Gri Tonlar / Uyumlar

Açık Tonlar

Koyu Tonlar

Gri Tonlar

Uyumlar

Kod olarak kopyala

CSS Custom Property —

Tailwind v4 —

SwiftUI —

Android Compose —

Flutter Dart —

Yaygın renkler referansı

CSS Color 4 uyumluluğu, 3/4/6/8 haneli HEX şekil desteği, alpha çifti çözme doğruluğu ve 0-255 aralığında HEX ile RGB arasında gidiş-dönüş bit-doğruluğu için incelendi. — Go Tools Engineering Team · May 27, 2026

HEX'ten RGB'ye Dönüştürücü Nedir?

HEX'ten RGB'ye dönüştürücü, bir HEX renk kodunu (`#FF5733`) temsil ettiği üç tamsayı kanal değerine (`rgb(255 87 51)`) çeviren küçük bir yardımcı programdır. HEX ve RGB, 1990'ların sonundan beri her web stil sayfasının, tasarım aracının ve görüntü-piksel boru hattının üzerine inşa edildiği iki biçimdir ve aralarındaki dönüşüm, renk araç setindeki tek en yaygın işlemdir. HEX, Figma, Sketch, Photoshop ve her marka kılavuzu PDF'inin varsayılan olarak dışa aktardığı kısa kopyala-yapıştır biçimidir — bir CSS özel özelliğine rahatlıkla sığan ve gözleriniz desenleri öğrendikten sonra bir bakışta okunabilen 6 karakterlik bir taban-16 dizgesidir. RGB, donanım API'lerinin, canvas çizim çağrılarının, görüntü tamponu manipülasyonunun, OpenGL renk özniteliklerinin ve çoğu grafik SDK'sının beklediği kanal adresli biçimdir — bir LCD'nin kırmızı, yeşil ve mavi alt piksellerine veya bir CRT'nin fosforlarına doğrudan haritalanan üç ayrı 0-255 tamsayısı (veya 0-1 normalleştirilmiş float). Aralarında dönüştürme mekaniktir: HEX'i üç 2 haneli çifte bölün ve her çifti bir taban-16 sayı olarak okuyun. Bu araç, tıklanacak bir "Dönüştür" düğmesi olmadan dönüşümü siz yazarken canlı yapar ve diğer her yaygın renk biçimini (HSL, OKLCH, OKLAB, HSV, HWB, CMYK, artı 148 CSS adlandırılmış rengi) RGB çıktısının yanında ücretsiz olarak yüzeyleştirir.

**RGB biçiminin kendisi daha yakından bakmayı hak eder.** Standart 24-bit sRGB, her kanalı 0'dan 255'e 8-bit'lik bir işaretsiz tamsayı olarak kodlar — kanal başına 256 değer, toplam 16.777.216 renk (256³). Referans standart, o dönemde ekranlara hâkim olan CRT fosfor primerlerine bağlanan 1996 sRGB spesifikasyonu IEC 61966-2-1'dir. CSS, RGB'yi üç sözdizimsel biçimde `rgb()` işlevi aracılığıyla ifşa eder. Orijinal CSS 1 biçimi virgül ayırıcı kullanır: `rgb(255, 87, 51)`. CSS Color 4 (2022'den beri W3C Aday Önerisi) modern boşlukla ayrılmış bir biçim ekledi: `rgb(255 87 51)`, bir eğik çizgiden sonra isteğe bağlı bir alpha kanalıyla: `rgb(255 87 51 / 0.5)`. Her iki biçim de birbirinin yerine geçer ve her yaşayan tarayıcıda gönderilir. RGB ayrıca yüzde kanallarını kabul eder: `rgb(100% 33% 20%)`, `rgb(255 87 51)` ile eşdeğerdir ve bazen elle yazılmış stil sayfalarında okunabilirlik için tercih edilir. Alpha'nın özel olarak eski destek için ayrı bir `rgba()` işlevi vardır — `rgba(255, 87, 51, 0.5)`, IE 9'a kadar her yerde çalışan kanonik biçimdir. CSS Color 4 ayrıca açık sRGB adreslemesi için `color(srgb 1 0.341 0.2)` sözdizimini ve HEX'in kodlayamayacağı geniş gamlı değerler için paralel `color(display-p3 ...)` ve `color(rec2020 ...)` işlevlerini ekledi.

Dönüşüm matematiği her iki yönde de temiz çalışır. **HEX'ten RGB'ye**: 6 haneli HEX `#RRGGBB`'yi `parseInt(hex.slice(1, 3), 16)`, `parseInt(hex.slice(3, 5), 16)`, `parseInt(hex.slice(5, 7), 16)` aracılığıyla üç 2 haneli taban-16 sayı olarak ayrıştırın. 3 haneli kısa biçim `#RGB` için, ayrıştırmadan önce her haneyi ikiye katlayarak genişletin (`#F73` → `#FF7733`) — bu bir sol-doldurma *değildir*. 8 haneli alpha `#RRGGBBAA` için, sondaki çifti aynı şekilde ayrıştırın ve 0-1 alpha float değerini almak için 255'e bölün. 4 haneli alpha kısa biçimi `#RGBA` için, önce her haneyi genişletin (`#F738` → `#FF773388`). **RGB'den HEX'e** tersidir: her kanal için 2 haneli HEX çiftini almak için `value.toString(16).padStart(2, '0')` çağırın (`padStart` önemlidir — onsuz, 5 kanal değeri `'05'` yerine `'5'` olarak serileştirilir ve geçersiz HEX üretir), ardından birleştirin. Her iki yön de bit-hassasiyetindedir: 16² = 256, her kanalın kapladığı 0-255 bayt aralığıyla tam olarak eşleşir, böylece bir HEX → RGB → HEX gidiş-dönüşü orijinal girdiyi float sapması olmadan aynen üretir.

**Neden HEX'e karşı RGB?** HEX daha kısadır, tasarım-araç-yerellidir ve gözünüzün zamanla öğrendiği biçimdir — çoğu ön uç geliştirici `#3b82f6`'yı bir bakışta Tailwind blue-500 olarak tanıyabilir. RGB açık-kanal-adreslemedir, JavaScript'te karşı hesaplama yapmak daha kolaydır ve ikisinden alpha ve yüzdeleri temiz olarak kabul eden tek biçimdir. İki biçim, farklı sorunları çözdükleri için bir arada bulunur. Web stil sayfaları ve marka kılavuzları HEX'e yatkındır çünkü kopyala-yapıştır maliyeti baskındır. Canvas çizim çağrıları, görüntü işleme, donanım LED API'leri ve kanal başına aritmetik yapan herhangi bir kod RGB'ye yatkındır çünkü bir demete dizinleme bir dizgeyi bölmekten hızlıdır. Aralarındaki geçiş, tipik bir web projesinde onlarca kez gerçekleşir — Figma'dan bir HEX yapıştırın, bir `ctx.fillStyle = ...` çağrısı için RGB tamsayılarına dönüştürün, bir CSS değişken tanımı için HEX'e geri dönün.

Bu aracın HEX → RGB iş akışı, hepsi aynı altyapıdaki birleşik renk dönüştürücüyü paylaşan 5 maçalı bir ailenin bir yönüdür. Özel birleşik renk dönüştürücü merkezdir — 9 biçimin tümünü eşzamanlı olarak düzenlenebilir gösterir ve iş akışınız yalnızca HEX ve RGB'den fazlasına ihtiyaç duyduğunda doğru araçtır. Tek yönlü maçalar belirli Google arama amaçlarını hedefler: ters yön için RGB'den HEX'e dönüştürücü, eski tasarımcı-bilişsel uzay için HEX'ten HSL'ye dönüştürücü, modern algısal olarak tek tip tasarım sistemleri için HEX'ten OKLCH'ye dönüştürücü (Tailwind v4 ve shadcn ikisi de artık varsayılan olarak OKLCH'dir) ve baskı hazırlık yaklaşımları için HEX'ten CMYK'ya dönüştürücü. Beş maça ve merkez aynı ayrıştırma motorunu ve aynı dönüşüm matematiğini paylaşır, böylece sonuçların aile genelinde aynı olması garanti edilir. Her dönüşüm tarayıcınızda yerel olarak çalışır — HEX kodlarınız asla yüklenmez, asla kaydedilmez ve siz yazarken sıfır ağ isteği tetiklenir. DevTools'ta doğrulayın.

// Parse any hex shape (3/4/6/8-digit) into an RGB tuple [r, g, b, a]
// All channels in 0-255 range; alpha in 0-1.
function parseHex(input) {
  let h = input.trim().replace(/^#/, '');
  // Expand 3-digit and 4-digit shorthand by duplicating each digit
  if (h.length === 3 || h.length === 4) {
    h = h.split('').map(c => c + c).join('');
  }
  if (!/^[0-9a-fA-F]+$/.test(h) || (h.length !== 6 && h.length !== 8)) {
    throw new Error(`Invalid hex: ${input}`);
  }
  const r = parseInt(h.slice(0, 2), 16);
  const g = parseInt(h.slice(2, 4), 16);
  const b = parseInt(h.slice(4, 6), 16);
  const a = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
  return [r, g, b, a];
}

console.log(parseHex('#FF5733'));   // [255, 87, 51, 1]
console.log(parseHex('#F73'));       // [255, 119, 51, 1]
console.log(parseHex('#FF573380'));  // [255, 87, 51, 0.5019607843137255]

Temel Özellikler

Beş HEX Şeklinin Tümü Aynı Şekilde Ayrıştırılır

3 haneli `#F73`, 4 haneli alpha `#F738`, 6 haneli `#FF5733`, 8 haneli alpha `#FF5733CC`, artı her biri için `#` olmadan varyant (`F73`, `FF5733`, vb.). Ayrıştırıcı, görüntülemeden önce hepsini aynı dahili RGB demetine normalleştirir, böylece kısa biçimi önce elle genişletmek zorunda kalmadan kaynağınızın kullandığı şekli yapıştırabilirsiniz. Büyük/küçük harf de normalleştirilir — `#ff5733` ve `#FF5733` aynı çıktıyı üretir.

Modern Boşlukla Ayrılmış Sözdiziminde RGB Çıktısı

RGB alanı, değeri CSS Color 4'ün modern biçiminde yüzeyleştirir: opak renkler için `rgb(255 87 51)`, alpha taşıyanlar için `rgb(255 87 51 / 0.5)`. Her iki şekil de tüm yaşayan tarayıcılarda çalışır (Chrome 65+, Safari 13+, Firefox 52+). Eski virgül biçimi `rgb(255, 87, 51)`, hedefinizin gerektirmesi durumunda tek bir mekanik değiştirme uzaklıktadır; modern sözdizimi yeni kodda tercih edilir çünkü CSS Color 4'ün diğer işlevsel sözdizimleriyle hizalanır.

Bit-Mükemmel, Float Sapması Yok

HEX → RGB tamsayıdan tamsayıya matematiktir: `parseInt(hex, 16)` sıfır float katılımıyla tam bir 0-255 değeri döndürür. Ters yön (`.toString(16).padStart(2, '0')`) aynı derecede tamdır. Bir HEX → RGB → HEX → RGB → HEX gidiş-dönüşü orijinal girdiyi aynen, süresiz olarak üretir. OKLCH dahili kaynak-doğru, HEX → RGB → HSL → OKLAB → HEX gibi daha uzun zincirin bile bit kararlı kalması anlamına gelir; bu, HSL üzerinden yönlendirilen eski dönüştürücülerin garanti edemediği bir şeydir.

Alpha Kanalı Temiz Çözülür

Alpha ile 8 haneli ve 4 haneli HEX (`#RRGGBBAA` ve `#RGBA`) doğru ayrıştırılır. Sondaki çift bir 0-1 alpha float'una eşler: `00` → 0, `80` → 0.502, `FF` → 1. Çıktı varsayılan olarak CSS Color 4'ün eğik çizgi sözdizimini (`rgb(255 87 51 / 0.5)`) kullanır; eski `rgba(255, 87, 51, 0.5)` biçimi tek bir değiştirme uzaklıktadır. Alpha değerlerinin 8 haneli HEX kodlarına gömülmüş olabileceği tasarım belirteci geçişi için kullanışlıdır.

Eşzamanlı Olarak Görünen Sekiz Diğer Biçim

Yapıştırdığınız aynı HEX ayrıca HSL, HSV, HWB, OKLCH, OKLAB, CMYK ve en yakın CSS adlandırılmış rengini de sürer — hepsi aynı sayfada bir bakışta görünür. Yalnızca HEX → RGB ile sınırlı değilsiniz. Bir takım arkadaşı bir Tailwind v4 belirteci için OKLCH üçlüsüne, düz yazı belgelendirmesi için en yakın adlandırılmış renge veya bir baskı teklifi için CMYK yaklaşımına ihtiyaç duyduğunda, değerler kendi Kopyala düğmeleriyle zaten oradadır.

WCAG + APCA Kontrastı Yerleşik

Bir HEX'i geçirin ve kontrast satırı onu hem WCAG 2.1 (düzenleyici taban: gövde metni için 4.5:1, AAA için 7:1) hem de APCA Lc (önerilen WCAG 3 ardılı: gövde metni için `|Lc| ≥ 75` hedef) kullanarak hem beyaza hem de siyaha karşı anında puanlar. Bir marka HEX'ini RGB'ye dönüştürdüğünüzde ve onu göndermeden önce bir gövde metni rengi olarak gerçekten okunabilir olduğunu doğrulamak istediğinizde kullanışlıdır.

CSS / Tailwind v4 / SwiftUI / Compose / Flutter Olarak Kopyala

Seçicinin altındaki Kod olarak kopyala bölümü, geçerli rengi beş platform için yapıştırmaya hazır parçacıklara çevirir: CSS özel özelliği (`--color-brand: rgb(255 87 51)`), Tailwind v4 `@theme` belirteci, SwiftUI `Color(red:green:blue:)` literal'i, Jetpack Compose `Color(0xFFFF5733)` sabiti, Flutter `Color(0xFFFF5733)`. Her platformun beklediği tam sözdizimi, bir iOS varlık kataloğuna, Android tema dosyasına veya Flutter `ThemeData` içine bırakmaya hazır.

%100 Tarayıcı İçi — Yükleme Yok, İzleme Yok

Tüm HEX ayrıştırma, RGB dönüşümü, kontrast puanlaması ve palet üretimi tarayıcınızda yerel olarak çalışır. HEX kodlarınız asla iletilmez, hiçbir sunucuda asla kaydedilmez, asla analiz edilmez. Siz yazarken sıfır ağ isteği — DevTools'ta doğrulayın. Duyurulmamış marka paletleri, dahili tasarım belirteçleri, NDA altındaki taslak mock'lar ve diğer gizli renk çalışmaları için güvenli.

Tam Renk için Paylaşılabilir URL Hash'i

Geçerli renk her değişiklikte URL hash'ine otomatik olarak `#hex=ff5733` olarak kodlanır. URL'yi kopyalayın, bir Slack iş parçacığına veya bir GitHub sorununa yapıştırın ve onu açan herkes aynı HEX ile aynı RGB sonucuna düşer. Hash yalnızca adres çubuğunuzda yaşar ve sunucuya asla iletilmez (tarayıcılar URL parçalarını HTTP isteklerine dahil etmez), bu yüzden bağlantıyı paylaşmak bile rengi herhangi bir üçüncü tarafa sızdırmaz.

HEX'ten RGB'ye Dönüştürücü Alternatifleri

RapidTables Hex to RGB

tarayıcı aracı

"hex to rgb" için varsayılan Google sonucu — HEX girişi, RGB çıkışı olan tek yönlü bir form, başka biçim görünmez. Aramadan gelirken tek seferlik aramalar için yararlı. OKLCH, kontrast denetimi, renk gamı algılama, alpha işleme ve çoklu biçim eşzamanlı görünümünden yoksun. Bu araç, sade tek-dönüşüm durumu dışında her eksende kazanır.

ColorHexa

tarayıcı aracı

Derin meta verilerle uzun süredir devam eden renk başına SEO sayfaları: sorguladığınız herhangi bir HEX için dönüşümler, paletler, uyumlar, gradyanlar. Arayüz eskimiş (2010 başı), OKLCH desteği yok, APCA kontrast yok, geniş gamlı işleme yok. Belirli bir HEX'in Google üzerinden SEO keşfi için güçlü; birleşik alan kullanıcı deneyimine yazmanın daha hızlı olduğu aktif dönüşüm iş akışları için daha zayıf.

W3Schools Hex Calculator

tarayıcı aracı

Öğretime odaklı bir sayfada yeni başlayanlar için uygun HEX/RGB/HSL geçişi, arama sonuçlarında her yerde. OKLCH yok, rgba ötesinde alpha işleme yok, gelişmiş özellik yok. W3Schools'un açıklayıcı içeriğinin yanında referans olarak yararlı. Bu araç diğer her eksende kazanır: daha fazla biçim, algısal matematik, renk gamı + kontrast + renk körlüğü özellikleri, Tailwind v4 / SwiftUI / Compose / Flutter için modern kod dışa aktarımı.

Browser DevTools Renk Seçici

yerleşik tarayıcı özelliği

Chrome, Firefox ve Safari DevTools'un tümü, CSS bölmesinde bir renk örneğine tıkladığınızda HEX'i RGB'ye satır içi dönüştüren bir renk seçici gönderir. Ücretsiz, kurulum yok, her zaman kullanılabilir. OKLCH'den, paylaşılabilir URL'lerden, web olmayan platformlar için kod dışa aktarımından (SwiftUI, Compose) yoksun. Zaten CSS hata ayıklıyorsanız DevTools'a uzanın; çapraz platform çıktıya ihtiyacınız olduğunda bu araca uzanın.

macOS Digital Color Meter

yerel macOS uygulaması

OS X'ten beri her Mac ile birlikte gelir — herhangi bir pikselin üzerine gelin ve RGB / HEX / doğrusal değerleri okuyun. Ekrandaki herhangi bir uygulamadan piksel renklerini örneklemek için mükemmel. Yapıştırılan HEX değerlerini dönüştürmez; bir dönüştürücü değil, ekran örnekleyicidir. Aynı ekran örnekleme yeteneği için tarayıcı içinde bu aracın seçicisindeki Damlalık düğmesini (yalnızca Chromium tarayıcılar) kullanın.

ConvertingColors

tarayıcı aracı

Birçok uzayı (HEX, RGB, HSL, HSV, CMYK, XYZ, CIELAB) kapsayan renk başına SEO sayfaları. Modern OKLCH desteğinden ve birleşik alan düzenleme kullanıcı deneyiminden yoksun. Otomatik üretilen içerik sayfaları içerik-çiftliği hissi verir ancak dönüşüm verileri doğrudur. Google üzerinden bireysel renk meta verilerini incelemek için iyi; bu araç aktif iş akışları için daha hızlıdır.

HEX'ten RGB'ye Örnekleri

Bir ekran görüntüsünden HEX yapıştırın → RGB demeti

#FF5733

RGB çıktısı: `rgb(255 87 51)`. Klasik kullanım durumu — bir tasarımcı Figma'ya bir marka rengi bıraktı, ekran görüntüsü aldınız, bir damlalık size HEX'i verdi ve şimdi bir canvas çizim çağrısı, bir donanım LED şeridi veya bir görüntü tamponuna karşı piksel matematiği için kanal tamsayılarına ihtiyacınız var. Gösterilen CSS Color 4 boşlukla ayrılmış sözdizimi modern biçimdir; eski virgüllü biçim `rgb(255, 87, 51)` anlamca aynıdır ve IE 3'ten bu yana her tarayıcıda desteklenir.

Photoshop için Tailwind marka HEX'ini RGB'ye dönüştürün

#3b82f6

RGB çıktısı: `rgb(59 130 246)`. Adobe'nin renk seçicisi (Photoshop, Illustrator ve InDesign'da) 0-255 aralığında RGB tamsayılarını yerel girdi olarak kabul eder — 59 / 130 / 246'yı üç kanal kutusuna yapıştırın ve Tailwind'in `blue-500`'üyle tam olarak eşleştirin. Bir tasarımcının baskı bilincine sahip bir mizanpaj uygulamasında bir web rengini taslaklaması veya görüntü düzenlemeleri için bir renk örneği kitaplığına marka renklerini örneklemeniz gerektiğinde yararlıdır.

Alpha ile 8 haneli HEX → rgba

#FF573380

RGB çıktısı: `rgb(255 87 51 / 0.5)`. Son çift (`80`), `128/255 ≈ 0.502` olarak çözülür ve CSS Color 4'ün eğik çizgi sözdizimi aracılığıyla alpha kanalı olarak yüzeyleştirilir. Eşdeğer eski biçim `rgba(255, 87, 51, 0.5)`'tir; her yerde hâlâ desteklenir ve eski ön işlemcilerin beklediği şeydir. Alpha ile 8 haneli HEX, 2018'de tüm yaşayan tarayıcılarda yerel olarak gönderildi; ondan önce alpha, `rgba()` işlevi aracılığıyla ifade edilmek zorundaydı.

Kısa 3 haneli HEX genişletmesi

#F73

RGB çıktısı: `rgb(255 119 51)`. CSS spesifikasyonu 3 haneli HEX'i, her hanenin 6 haneli eşdeğeri oluşturmak için ikiye katlandığı bir kısa biçim olarak tanımlar: `#F73`, `#FF7733` olarak genişler, böylece R = `FF` = 255, G = `77` = 119, B = `33` = 51. Bu *bir sol-doldurma değildir* — `#F73`, `#000F73` **değildir**. Birçok yeni başlayan bunu yanlış anlar; aracın genişletme davranışı kuralı bir bakışta görünür kılar.

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

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

Siyah

#000000 → rgb(0 0 0)

Saf siyah. Üç kanal da sıfırda — yayılan ışığın yokluğu. RGB üçlüsü (0, 0, 0).

#000000 → rgb(0 0 0)

Bir ekranda saf siyah nadiren doğru tasarım seçimidir — daha yumuşak gövde metni için `#111` veya OKLCH algısal açıklık 0.1-0.15 deneyin.