🧰 BirAraçtaTüm Araçlar →
🎨 Görsel & Dosya

Renk kodu dönüştürücü

HEX, RGB, HSL, HSV/HSB ve CMYK arasında anında çevir. Renk seç, kodu yaz; hepsi senkron. Üstüne WCAG 2.1 kontrast denetimi ve tamamlayıcı/analog/triadic palet üretici — hepsi tarayıcında, ücretsiz.

Kısa cevapBir HEX kodu (ör. #7C3AED) RGB'ye çevirmek için her iki karakterlik bloğu onaltılıktan onluğa çevirirsin: 7C=124, 3A=58, ED=237, yani rgb(124, 58, 237). Aynı renk HSL'de hsl(262, 83%, 58%) olur. Aşağıdan rengi seç; tüm formatlar, kontrast oranı ve palet otomatik çıksın.
HEX · RGB · HSL · HSV · CMYK Alpha desteklenir WCAG 2.1 AA / AAA Güncelleme: 12 Tem 2026
Seçili renk
#7C3AED
—
HEX
#RRGGBB, kısa #RGB veya alfa için #RRGGBBAA yazabilirsin.
RGB
HSL
HSV / HSB
Alpha (opaklık)
100%
Tüm formatlar — tıkla kopyala
Hızlı renkler
HEX
RGB
HSL
Bağıl parlaklık (L)
🎨 Bilgilendirme notu: Tüm dönüşümler standart sRGB renk uzayı matematiğiyle yapılır ve tamamen tarayıcında, hiçbir sunucuya veri gitmeden çalışır. Ekranda gördüğün renk; monitör kalibrasyonu, panel türü ve ışık koşullarına göre değişebilir. CMYK çıktısı basit matematiksel bir yaklaşıktır. Sonuçlar bilgilendirme amaçlıdır; kesin baskı veya marka renkleri için ilgili ICC renk profili, Pantone referansı ya da kurumsal marka kılavuzu esas alınmalıdır.

WCAG kontrast oranı denetimi

Metin (ön plan) ve arka plan rengini gir; WCAG 2.1 kontrast oranını ve AA/AAA sonuçlarını canlı önizlemeyle gör. Erişilebilir tasarım için normal metinde en az 4,5:1 hedeflenir.

—
kontrast oranı
Büyük başlık örneği (24px)
Normal gövde metni böyle görünür. Erişilebilirlik için bu satırın rahatça okunabilmesi gerekir — WCAG AA en az 4,5:1 kontrast ister.

Renk paleti üretici

Yukarıda seçtiğin renkten türetilen uyumlu paletler. Her renk çemberi ilişkisine (tamamlayıcı, analog, triadic) ve açıklık rampasına göre otomatik üretilir. Bir renge dokun, HEX kodu panoya kopyalansın.

Renk kodları nasıl çalışır ve birbirine nasıl çevrilir?

HEX, RGB, HSL ve HSV modellerinin mantığı, dönüşüm matematiği ve WCAG kontrastının tam açıklaması.

Renk kodu dönüştürücü, aynı rengi farklı gösterimlerle (HEX, RGB, HSL, HSV/HSB, CMYK) ifade etmene ve bir formattan diğerine geçmene yarar. Tüm bu modeller ekranların kullandığı sRGB renk uzayını tarif eder; yani bir HEX kodu ile onun RGB veya HSL karşılığı aynı rengi gösterir, sadece yazım biçimi farklıdır. Bu araç dönüşümleri harici bir kütüphane olmadan, standart algoritmalarla yapar.

HEX renk kodu RGB'ye nasıl çevrilir?

Kısa cevapHEX kod #RRGGBB biçimindedir; her iki karakterlik blok bir renk kanalını onaltılık (16'lık) tabanda gösterir. Onluğa çevirmek için: #7C3AED → 7C=124, 3A=58, ED=237, yani rgb(124, 58, 237). Üç haneli kısa yazım (#RGB) her karakteri iki kez tekrar eder: #F0A → #FF00AA.
  • RR — kırmızı kanalı, 00–FF (0–255).
  • GG — yeşil kanalı, 00–FF (0–255).
  • BB — mavi kanalı, 00–FF (0–255).
  • AA (opsiyonel) — 8 haneli HEX'te son blok alpha (opaklık) kanalıdır.

HSL ve HSV nedir? RGB'den farkı ne?

Kısa cevapHSL (Hue-Saturation-Lightness) ve HSV/HSB (Value/Brightness) rengi insana sezgisel gelen ton, doygunluk ve açıklık/parlaklık ekseninde tanımlar. RGB üç ışık kanalıyla çalışır; HSL/HSV ise renk çemberi üzerinden. Farkları üçüncü bileşendedir: HSL'de L=%50 saf rengi, HSV'de V=%100 en canlı rengi verir.

Pratikte, bir markanın rengini alıp daha açık ve koyu tonlarını üretmek istediğinde HSL en kullanışlı modeldir: tonu (H) ve doygunluğu (S) sabit tutup yalnızca açıklığı (L) değiştirirsin. Bu araçtaki "Tonlar ve gölgeler" paleti tam olarak bunu yapar. Tasarım programlarının renk seçicileri genelde HSV kullanır, çünkü "parlaklık" kaydırıcısı görsel olarak daha anlaşılırdır.

WCAG kontrast oranı nasıl hesaplanır?

Kısa cevapÖnce her rengin relative luminance (bağıl parlaklık) değeri bulunur. Her sRGB kanalı 0–1'e bölünür ve doğrusallaştırılır: c ≤ 0,03928 ? c/12,92 : ((c+0,055)/1,055)^2,4. Sonra L = 0,2126·R + 0,7152·G + 0,0722·B. Kontrast oranı ise (L1 + 0,05) / (L2 + 0,05) — L1 açık, L2 koyu rengin parlaklığı. Sonuç 1:1 ile 21:1 arasındadır.

Bu formül insan gözünün yeşile en duyarlı, maviye en az duyarlı olmasını (0,7152 ve 0,0722 katsayıları) hesaba katar. Bu yüzden sarı-beyaz gibi görünüşte "açık" bir çift bile düşük kontrast verebilir. Kontrast aracını yukarıda kullanarak her iki renk için oranı ve AA/AAA sonuçlarını canlı görebilirsin.

Erişilebilir renk kontrastı için hedefler

Kısa cevapNormal metin: AA ≥ 4,5:1, AAA ≥ 7:1. Büyük metin (≈18pt veya 14pt kalın+): AA ≥ 3:1, AAA ≥ 4,5:1. Arayüz bileşenleri ve grafik nesneleri için genelde 3:1 yeterlidir. Metnini bu eşiklerin üstünde tutarsan görme güçlüğü olan kullanıcılar da içeriği rahatça okur.

Referans tabloları

Temel renklerin HEX/RGB/HSL karşılıkları, WCAG kontrast eşikleri, format kullanım alanları ve alpha (opaklık) → HEX dönüşüm tablosu.

Temel renklerin HEX, RGB ve HSL karşılıkları (sRGB)
RenkHEXRGBHSL
Siyah#0000000, 0, 00, 0%, 0%
Beyaz#FFFFFF255, 255, 2550, 0%, 100%
Kırmızı#FF0000255, 0, 00, 100%, 50%
Yeşil (lime)#00FF000, 255, 0120, 100%, 50%
Mavi#0000FF0, 0, 255240, 100%, 50%
Sarı#FFFF00255, 255, 060, 100%, 50%
Camgöbeği (cyan)#00FFFF0, 255, 255180, 100%, 50%
Macenta#FF00FF255, 0, 255300, 100%, 50%
Turuncu#FFA500255, 165, 039, 100%, 50%
Mor (bu araç)#7C3AED124, 58, 237262, 83%, 58%
Gri#808080128, 128, 1280, 0%, 50%

HSL değerleri en yakın tam sayıya yuvarlanmıştır. Yukarıdaki dönüştürücüye herhangi bir HEX yazarak tam karşılığını görebilirsin.

WCAG 2.1 minimum kontrast oranı eşikleri
İçerik türüAA (minimum)AAA (gelişmiş)
Normal metin (< 18pt / 14pt kalın)4,5:17:1
Büyük metin (≥ 18pt veya 14pt kalın)3:14,5:1
Arayüz bileşeni / grafik nesne3:1—
Dekoratif / devre dışı öğeZorunlu değilZorunlu değil

18pt ≈ 24px, 14pt kalın ≈ 18,66px. Kontrast oranı en fazla 21:1 olabilir (saf siyah üzerine saf beyaz).

Renk formatları ve tipik kullanım alanları
FormatÖrnekNerede kullanılır
HEX#7C3AEDCSS, tasarım, web — en yaygın
HEX + alpha#7C3AED80Yarı saydam renk (CSS, mobil)
RGBrgb(124, 58, 237)CSS, kanal bazlı işlemler
RGBArgba(124, 58, 237, .5)Opaklık gerektiren CSS
HSLhsl(262, 83%, 50%)Ton/açıklık ayarı, tema üretimi
HSV / HSBhsv(262, 76%, 93%)Tasarım aracı renk seçicileri
CMYKcmyk(48, 76, 0, 7)Baskı (yaklaşık dönüşüm)
Opaklık (alpha) yüzdesi → 8 haneli HEX son bloğu
OpaklıkOndalık (0–1)HEX (00–FF)
%100 (tam opak)1.00FF
%900.90E6
%750.75BF
%50 (yarı saydam)0.5080
%250.2540
%100.101A
%0 (tam şeffaf)0.0000

HEX alpha = yuvarla(opaklık × 255) değerinin onaltılık karşılığıdır. Yukarıdaki alpha kaydırıcısını değiştirdiğinde 8 haneli HEX otomatik güncellenir.

Popüler renkler

Renk terimleri sözlüğü

Renk kodlarında ve erişilebilirlik denetiminde geçen temel kavramların kısa tanımları.

HEXRengi onaltılık tabanda #RRGGBB olarak yazan gösterim. Web ve tasarımda en yaygın format.
RGBKırmızı, yeşil, mavi ışık kanallarının 0–255 arası değeriyle rengi tanımlar (additive/eklemeli model).
HSLHue (ton 0–360°), Saturation (doygunluk %), Lightness (açıklık %). Tema ve ton türetmede kullanışlı.
HSV / HSBHue, Saturation, Value/Brightness. Tasarım araçlarının renk seçicilerinin standardı.
CMYKCyan, Magenta, Yellow, Key (siyah) mürekkepleriyle çalışan baskı modeli (subtractive/çıkarmalı).
Alpha (opaklık)Rengin saydamlığı; 0 tam şeffaf, 1 tam opak. RGBA veya 8 haneli HEX ile yazılır.
Ton (Hue)Renk çemberi üzerindeki açı; 0° kırmızı, 120° yeşil, 240° mavi.
Doygunluk (Saturation)Rengin canlılığı; %0 grinin tonu, %100 en canlı hâli.
Relative luminanceBir rengin göz tarafından algılanan bağıl parlaklığı; kontrast hesabının temeli.
Kontrast oranıİki rengin parlaklık farkı; (L1+0,05)/(L2+0,05) ile 1:1–21:1 arasında bulunur.
WCAGWeb Content Accessibility Guidelines; W3C'nin web erişilebilirlik standardı (AA/AAA seviyeleri).
Tamamlayıcı renkRenk çemberinde tam karşıdaki ton (H+180°); en güçlü kontrastı verir.
Analog renklerKomşu tonlar (H±30°); uyumlu, sakin paletler oluşturur.
Triadic paletÇember üzerinde eşit aralıklı üç ton (H, H+120°, H+240°); canlı ve dengeli.
sRGBEkranların ve webin varsayılan renk uzayı; HEX/RGB/HSL bu uzayı tarif eder.

Derinlemesine rehberler

Renk kodları ve erişilebilirlik hakkında en çok merak edilenler.

Bir markanın renginden nasıl tam bir palet üretirim?

Ana rengini yukarıdaki dönüştürücüye gir. Tonlar ve gölgeler paleti, tonu ve doygunluğu sabit tutup açıklığı (L) kademeli değiştirerek 50'den 900'e kadar bir renk skalası verir — buton, kenarlık ve arka plan katmanları için idealdir. Ardından analog palet (H±30°) yumuşak vurgu renkleri, tamamlayıcı palet (H+180°) güçlü bir aksiyon rengi, triadic palet ise canlı bir üçlü kombinasyon sağlar.

Kurumsal arayüzlerde yaygın yaklaşım şudur: bir ana marka rengi + tonlar rampası, bir tamamlayıcı vurgu, ve nötr grilerden oluşan bir ölçek. Seçtiğin her rengi kontrast aracıyla metin/arka plan olarak test edip AA eşiğini geçtiğinden emin ol.

Metin rengim yeterince okunaklı mı? Nasıl anlarım?

Yukarıdaki WCAG kontrast bölümüne metin rengini ön plana, zemin rengini arka plana yaz. Oran 4,5:1'in altındaysa normal boyutlu metin için AA'da kalırsın; en az bunu hedefle. Büyük başlıklarda (≈24px+) sınır 3:1'e iner. Aracın rozetleri her eşiği "geçti/kaldı" olarak işaretler ve alttaki canlı önizleme gerçek okunabilirliği gösterir.

İpucu: kontrastı artırmak için genelde metni koyulaştırmak yerine zemini biraz açmak ya da rengin açıklığını (HSL'de L) düşürmek daha temiz sonuç verir. Sarı, açık yeşil ve pastel tonlar beyaz zeminde sıklıkla başarısız olur.

8 haneli HEX (alpha) ne işe yarar, nasıl okunur?

#RRGGBBAA biçiminde 8 haneli HEX, standart renge bir opaklık (alpha) kanalı ekler. Son iki karakter 00 (tam şeffaf) ile FF (tam opak) arasındadır. Örneğin #7C3AED80, mor rengin yaklaşık %50 opak hâlidir; rgba(124, 58, 237, .5) ile aynıdır.

Yüzde → HEX dönüşümü yuvarla(opaklık × 255) ile bulunur: %50 → 128 → 80, %75 → 191 → BF. Yukarıdaki alpha kaydırıcısını oynattığında hem RGBA hem 8 haneli HEX çıktısı anında güncellenir; "Alpha → HEX" referans tablosu da sık kullanılan değerleri listeler.

Sonraki adım: ilgili BirAraçta araçları

Renklerle çalışırken işine yarayacak diğer ücretsiz araçlar:

🔳QR Kod ÜreticiRenkli QR kod tasarla 🪪Vesikalık FotoğrafArka plan rengi ayarla 🏆Tier List YapıcıRenk kodlu sıralama 📏Birim ÇeviriciSayısal dönüşümler 📚Blog & RehberlerRenk ve tasarım yazıları 🧰Tüm AraçlarBirAraçta ana sayfa

Sık sorulan sorular

HEX renk kodu RGB'ye nasıl çevrilir?
HEX kod #RRGGBB biçimindedir ve her iki karakterlik blok bir kanalı onaltılık tabanda gösterir. Onluğa çevirmek için her bloğu dönüştürürsün: #7C3AED → 7C=124, 3A=58, ED=237, yani rgb(124, 58, 237). Üç haneli kısa yazım (#RGB) her karakteri iki kez tekrarlayarak genişletilir: #F0A → #FF00AA.
HSL nedir?
HSL; Hue (ton, 0–360°), Saturation (doygunluk, %) ve Lightness (açıklık, %) bileşenlerinden oluşan bir renk modelidir. RGB'ye göre insana daha sezgisel gelir: tonu sabit tutup açıklığı değiştirerek bir rengin daha açık veya koyu tonlarını kolayca üretebilirsin. HSL ve RGB aynı sRGB rengi tarif eder, birbirine tam çevrilebilir.
WCAG kontrast oranı nasıl hesaplanır?
Her rengin relative luminance'ı bulunur: her sRGB kanalı 0–1'e normalize edilip c ≤ 0,03928 ? c/12,92 : ((c+0,055)/1,055)^2,4 ile doğrusallaştırılır ve L = 0,2126·R + 0,7152·G + 0,0722·B ile toplanır. Kontrast oranı (L1 + 0,05) / (L2 + 0,05) formülüyle bulunur (L1 açık, L2 koyu renk). Sonuç 1:1 ile 21:1 arasında olur.
Renk paleti nasıl oluşturulur?
En yaygın yöntemler renk çemberi ilişkilerine dayanır: tamamlayıcı (H+180°) güçlü kontrast, analog (H±30°) uyumlu geçişler, triadic (H, H+120°, H+240°) canlı üçlü verir. Tonlar ve gölgeler ise tonu sabit tutup açıklığı (L) artırıp azaltarak üretilir. Bu araç dördünü de seçtiğin renkten otomatik çıkarır.
HSV ile HSL arasındaki fark nedir?
İkisi de Hue ve Saturation kullanır; üçüncü bileşenleri farklıdır. HSL'de L=%50 saf rengi, %100 beyazı, %0 siyahı verir. HSV/HSB'de V=%100 en canlı rengi, %0 siyahı gösterir; beyaza ulaşmak için doygunluğu da düşürmek gerekir. Tasarım araçları genelde HSV kullanır; CSS ise hsl() fonksiyonunu destekler.
Erişilebilir renk kontrastı için hangi oranı hedeflemeliyim?
WCAG 2.1'e göre normal metin için AA en az 4,5:1, AAA en az 7:1; büyük metin (≈18pt / 14pt kalın+) için AA 3:1, AAA 4,5:1. Arayüz bileşenleri için genelde 3:1 yeterlidir. Metnini bu eşiklerin üstünde tutarsan görme güçlüğü olan kullanıcılar da rahatça okur.
Alpha (şeffaflık) renk kodunda nasıl gösterilir?
Alpha, opaklığı 0 (tam şeffaf) ile 1 (tam opak) arasında ifade eder. CSS'te rgba(124, 58, 237, .5) gibi ondalıkla ya da 8 haneli HEX ile #7C3AED80 yazılır; son iki karakter alpha kanalıdır (00–FF). %50 opaklık yaklaşık 80 (HEX) değerine denk gelir. Bu araç alpha'yı hem RGBA hem #RRGGBBAA biçiminde üretir.
CMYK neden HEX'ten farklı görünür?
HEX/RGB ekran için ışık ekleyen (additive), CMYK ise baskı için mürekkep ekleyen (subtractive) bir modeldir. Ekranın gösterdiği bazı canlı renkler mürekkeple birebir basılamaz, bu yüzden CMYK dönüşümü yaklaşıktır. Kesin baskı sonucu için ICC renk profili veya Pantone referansı esas alınmalıdır.

Metodoloji & kaynaklar

RenkKod, bağımsız ve ücretsiz bir Türkçe renk kodu dönüştürücüdür. Dönüşümler standart sRGB renk uzayı matematiğini doğrudan uygular: HEX ↔ RGB için onaltılık taban çevirimi; RGB ↔ HSL ve RGB ↔ HSV için kanalların 0–1'e normalize edilip ton/doygunluk/açıklık formüllerinin uygulanması; CMYK için basit çıkarmalı dönüşüm. Kontrast bölümü, WCAG 2.1 relative luminance tanımını (c ≤ 0,03928 ? c/12,92 : ((c+0,055)/1,055)^2,4 ve L = 0,2126·R + 0,7152·G + 0,0722·B) ve (L1+0,05)/(L2+0,05) kontrast oranı formülünü birebir uygular. Hesaplar tamamen tarayıcıda çalışır; hiçbir renk verisi sunucuya gönderilmez.

Veri kaynağı: sRGB renk uzayı dönüşümleri (IEC 61966-2-1) · WCAG 2.1 kontrast oranı (W3C) · CIE tabanlı bağıl parlaklık katsayıları. Son güncelleme: 12 Temmuz 2026. Renk dönüşüm ve kontrast formülleri standarttır ve değişmez; bu sayfa güncelliğini korumak için periyodik gözden geçirilir. Sonuçlar bilgilendirme amaçlıdır; ekran kalibrasyonu ve baskı profiline göre gerçek görünüm değişebilir.