Renk Kodu Dönüştürücü

HEX, RGB, HSL ve RGBA formatlari arasinda renk kodlarini toplu olarak donusturun. Birden fazla renk yapisptiin ve tum format donusumlerini bir kerede alin.

Öne çıkan özellikler

Toplu renk dönüştürme
HEX, RGB, HSL, RGBA, HSLA desteği
Bireysel veya tüm sonuçları kopyalama
Her giriş için renk önizlemesi

Guide

Dijital sistemlerde renkler sayısal kodlarla temsil edilir. Farklı bağlamlar farklı renk kodu biçimleri gerektirir. Web geliştiricileri hex kodlarını ve CSS renk fonksiyonlarını kullanır. Grafik tasarımcılar baskı için CMYK, ekran için RGB ile çalışır. UI tasarımcıları sezgisel renk ayarlamaları için HSL'e başvarur. Bu biçimleri, birbirleriyle nasıl ilişkili olduklarını ve her birini ne zaman kullanacağınızı anlamak, dijital renkle çalışan herkes için esastır. Bu kılavuz, büyük renk kodu biçimlerini, dönüştürme matematiğini ve tasarım ve geliştirme genelinde pratik uygulamaları ele almaktadır. RGB (Kırmızı, Yeşil, Mavi), ekranlar için temel renk modelidir. Monitörünüüzdeki, telefonunuzdaki veya tabletinizdeki her piksel, renkleri farklı yoğunluklarda kırmızı, yeşil ve mavi ışığı karıştırarak üretir. Her kanal 0 (ışık yok) ile 255 (maksimum yoğunluk) arasında değişir. RGB(255, 0, 0) saf kırmızıdır. RGB(0, 255, 0) saf yeşildir. RGB(0, 0, 255) saf mavidir. RGB(255, 255, 255) beyazdır (tüm kanallar maksimumda). RGB(0, 0, 0) siyahtır (ışık yok). RGB(128, 128, 128) orta gri tonludur (her kanalın yarım yoğunlukta eşit parçaları). RGB modeli, tüm renkleri tam yoğunlukta birleştirmek ışığın fiziksel olarak çalışma şekliyle eşleşen beyaz ürettiğinden katkı olarak adlandırılır. Onaltılık renk kodları, web'deki en yaygın renk biçimidir. Bir hex kodu, sadece 16 tabanında yazılmış bir RGB değeridir. #FF0000 hex kodu, kırmızı olan RGB(255, 0, 0)'dır. İlk iki karakter (FF) kırmızı kanalı, sonraki iki (00) yeşili ve son iki (00) maviyi temsil eder. Onaltılıkta FF, ondalıkta 255'e eşittir. 00, 0'a eşittir. 80, 128'e eşittir. Hex ile RGB arasında dönüştürme bir taban dönüştürmesidir: hex kodunu üç çifte bölün ve her çifti 16 tabanından 10 tabanına dönüştürün. Kısaltma hex kodları, altı yerine üç karakter kullanır. #F00, #FF0000'a eşdeğerdir. Her karakter iki katına çıkarılır: #F00, #FF0000 olur; #39F, #3399FF olur; #000, #000000 olur. Bu kısaltma yalnızca her çift özdeş iki karakterden oluştuğunda çalışır. Hiçbir çiftin özdeş basamağı olmadığından #3A7F2B kısaltılamaz. Kısalık için kodda kısaltma kullanılabilir olduğunda kısaltma kullanın, ancak bazı araçların ve tasarım sistemlerinin her zaman tam altı karakterli biçimi çıktı verdiğini unutmayın. Sekiz basamaklı hex kodları bir alfa (şeffaflık) kanalı ekler. #FF000080, yüzde 50 opaklıkta kırmızıdır. Son iki basamak (80, ondalıkta 128, kabaca 255'in yüzde 50'si) alfa değerini tanımlar. #FF0000FF tamamen opak kırmızıdır (#FF0000 ile özdeş). #FF000000 tamamen şeffaf kırmızıdır (görünmez). Sekiz basamaklı hex, modern CSS ve tüm büyük tarayıcılarda desteklenir. Bazı biçimlerin (Android geliştirme gibi) alfa kanalını önce yerleştirdiğini (#80FF0000) unutmayın, bu nedenle platformunuz için geleneği kontrol edin. HSL (Ton, Doygunluk, Açıklık), rengi insanların renk hakkında düşündüğü şekilde eşleşen bir biçimde temsil eder. Ton, bir renk çemberinde renk açısıdır: 0 derece kırmızı, 120 derece yeşil, 240 derece mavi ve 360 derece kırmızıya geri döner. Doygunluk, yüzde 0'dan (gri) yüzde 100'e (tamamen canlı) rengin yoğunluğudur. Açıklık, yüzde 0'dan (siyah) yüzde 100'e (beyaz) parlaklıktır; yüzde 50 normal renktir. HSL(0, 100%, 50%) saf kırmızıdır. HSL(120, 100%, 50%) saf yeşildir. HSL(60, 100%, 50%), ton çemberinde kırmızı ile yeşil arasında yarım yol olan saf sarıdır. HSL'in RGB'ye göre pratik avantajı sezgisel renk işlemedir. Bir rengi daha açık yapmak için açıklık değerini artırın. Daha sönük yapmak için doygunluğu azaltın. Rengi kaydırmak için (örneğin kırmızıdan turuncuya), ton açısını ayarlayın. RGB'de aynı ayarlamaları yapmak, sonucu tahmin etmeyi zorlaştıran aynı anda birden çok kanal değerini değiştirmeyi gerektirir. Renk paletleri oluşturan tasarımcılar genellikle HSL'de çalışır çünkü bir parametreyi aynı anda sistematik olarak ayarlayarak uyumlu varyasyonlar oluşturabilirler. HSV (Ton, Doygunluk, Değer), HSL ile yakından ilişkilidir ama parlaklığı farklı tanımlar. HSV'de değer, rengin maksimum parlaklığını temsil eder. V=100%'de, renk olabileceği kadar parlaktır. V=0%'de, ton ve doygunluktan bağımsız olarak renk siyahtır. HSV, Adobe Photoshop'un renk seçici dahil birçok tasarım aracında doğal renk modelidir. HSL ile HSV arasındaki fark ince ama önemlidir: HSL(0, 100%, 100%) beyazdır, HSV(0, 100%, 100%) ise saf kırmızıdır. HSV, beyazla tonlama ve siyahla gölgeleme hakkında düşünen ressamlar ve tasarımcılar için daha sezgiseldir. HSL daha simetriktir ve genellikle CSS'de tercih edilir. HWB (Ton, Beyazlık, Siyahlık), başka bir sezgisel model sunan daha yeni bir CSS renk fonksiyonudur. Ton, HSL ve HSV'dekiyle aynıdır. Beyazlık, ne kadar beyazın karıştırıldığını tanımlar (yüzde 0 ile yüzde 100). Siyahlık, ne kadar siyahın karıştırıldığını tanımlar (yüzde 0 ile yüzde 100). HWB(0, 0%, 0%) saf kırmızıdır. HWB(0, 100%, 0%) beyazdır. HWB(0, 0%, 100%) siyahtır. HWB(0, 50%, 0%) açık pembemsi bir kırmızıdır (kırmızı yüzde 50 beyazla karıştırılmış). Birçok tasarımcı, HWB'i boyayı beyaz veya siyahla karıştırma fiziksel kavramını yansıttığı için en sezgisel model bulur. CSS, tüm modern tarayıcılarda hwb()'yi destekler. CMYK (Camgöbeği, Eflatun, Sarı, Anahtar/Siyah), baskıda kullanılan renk modelidir. Ekranlar ışık eklerken (katkılı renk karıştırma), yazıcılar ışığı emen mürekkep döker (çıkarmalı renk karıştırma). Camgöbeği mürekkep kırmızı ışığı emer. Eflatun yeşili emer. Sarı maviyi emer. Anahtar (siyah) kanalı, CMY mürekkeplerini karıştırmak teorik olarak siyah üretir ama pratikte bulanık koyu kahverengi ürettiği için vardır. Özel bir siyah mürekkep eklemek daha temiz koyular üretir ve renkli mürekkepten tasarruf eder. CMYK değerleri her kanal için yüzde 0 ile yüzde 100 arasında değişir. RGB ile CMYK arasında dönüştürme basit bir matematiksel formül değildir. Teorik dönüştürme (C = 1 - R/255, M = 1 - G/255, Y = 1 - B/255, ardından K'yı C, M, Y'nin minimumu olarak çıkarma) size bir başlangıç noktası verir, ancak gerçek baskı renkleri mürekkebe, kağıda, baskı presine ve ICC renk profiline bağlıdır. Profesyonel baskı iş akışları, doğru yeniden üretimi sağlamak için kalibre edilmiş profillerle renk yönetim sistemleri kullanır. WebRecast dönüştürücüsü, yaklaşımlar, hızlı referanslar ve kritik olmayan renk çalışmaları için uygun olan matematiksel dönüştürmeyi gerçekleştirir. Üretim baskı işleri için her zaman kalibre edilmiş profillerle renk yönetilen bir iş akışı kullanın. CSS renk fonksiyonları son yıllarda önemli ölçüde genişledi. Geleneksel biçimler hex (#FF0000), rgb(255, 0, 0) ve hsl(0, 100%, 50%)'dir. Modern CSS ayrıca hwb() fonksiyonunu (Ton, Beyazlık, Siyahlık), lab() fonksiyonunu (algısal olarak tekdüze renkler için CIE LAB renk uzayı), lch() fonksiyonunu (CIE LCH, LAB'ın silindirik biçimi) ve oklch() fonksiyonunu (LCH'nin daha öngörülebilir sonuçlar üreten düzeltilmiş bir sürümü) destekler. Bu daha yeni renk uzayları, RGB ve HSL'deki sınırlamaları ele alır; özellikle aynı HSL açıklığına sahip iki rengin insan gözüne parlaklıkta oldukça farklı görünebildiği algısal tekdüzelik etrafında. OKLCH, hızla web tasarımı için önerilen renk uzayı haline geldiği için özel dikkat hak eder. OKLCH, OK Lightness Chroma Hue anlamına gelir ve algısal olarak tekdüze sonuçlar üretir. Bu, yüzde 70'lik bir açıklığın tüm tonlarda eşit derecede parlak göründüğü anlamına gelir; yüzde 50 açıklıktaki sarının yüzde 50 açıklıktaki mavidense çok daha parlak göründüğü HSL'in aksine. Erişilebilir renk paletleri oluşturmak, tutarlı düğme vurgu durumları oluşturmak ve tasarım belirteci sistemleri oluşturmak için OKLCH, HSL'den daha iyi sonuçlar üretir. Sözdizimi oklch(70% 0.15 250)'dir; burada yüzde 70 açıklık, 0.15 kroma (renk yoğunluğu) ve 250 ton açısıdır. Adlandırılmış CSS renkleri, red, blue, coral, darkslategray ve papayawhip gibi 148 önceden tanımlanmış ad içerir. Bu adlar belirli hex değerlerine eşlenir (coral #FF7F50'dir, papayawhip #FFEFD5'tir). Adlandırılmış renkler prototip oluşturmak için kullanışlıdır ve kodda okunabilirdir, ancak sizi sabit bir paletle sınırlar. Çoğu üretim CSS'si, hassas kontrol için hex kodlarını veya HSL fonksiyonlarını kullanır. Renk adlarının tarihsel kökenleri vardır: bazıları 1980'lerden X11 pencere sistemi renklerinden gelir; bu yüzden darkgray'in gray'den daha açık olduğu gibi tuhaflıklar vardır. Alfa şeffaflığı (opaklık), tüm modern CSS renk biçimlerinde mevcuttur. rgba(255, 0, 0, 0.5) yüzde 50 opaklıkta kırmızıdır. hsla(0, 100%, 50%, 0.5) aynı renktir. Modern CSS'de (Seviye 4), ayrıca alfa değerinden önce eğik çizgi ile boşlukla ayrılmış sözdizimini kullanarak rgb(255 0 0 / 50%) yazabilirsiniz. Alfa kanalı, CSS fonksiyonlarında 0'dan (tamamen şeffaf) 1'e (tamamen opak) veya 8 basamaklı hex'te 0 ile 255 arasında değişir. Bir renkteki alfa şeffaflığı ile CSS opaklık özelliği arasındaki fark önemlidir: opaklık tüm öğeyi ve alt öğelerini etkilerken, renk alfası yalnızca o belirli renk değerini etkiler. Renk kontrastı, erişilebilirlik için kritik bir değerlendirmedir. Web İçeriği Erişilebilirlik Yönergeleri (WCAG), metin ve arka plan renkleri arasında minimum kontrast oranları gerektirir. Seviye AA, normal metin için 4.5:1 ve büyük metin için 3:1 gerektirir. Seviye AAA, normal metin için 7:1 ve büyük metin için 4.5:1 gerektirir. Kontrast oranı, (L1 + 0.05) / (L2 + 0.05) formülü kullanılarak iki rengin göreli parlaklığından hesaplanır; burada L1 daha açık renktir. Göreli parlaklık, insan algısını hesaba katan ağırlıklı bir formül kullanır: L = 0.2126R + 0.7152G + 0.0722B (gama düzeltmesinden sonra). Yeşil, algılanan parlaklığa en çok katkıda bulunur; bu nedenle beyaz üzerine yeşil metin, aynı kontrasta ulaşmak için kırmızı metinden daha yüksek RGB değerlerine ihtiyaç duyar. Renk körlüğü erkeklerin yaklaşık yüzde 8'ini ve kadınların yüzde 0.5'ini etkiler. En yaygın tür kırmızı-yeşil renk körlüğüdür (deuteranopia ve protanopia); burada kırmızılar ve yeşiller benzer görünür. Tritanopia (mavi-sarı renk körlüğü) nadirdir. Akromatopsia (tam renk körlüğü) son derece nadirdir. Arayüzler, grafikler veya veri görselleştirmeleri için renk seçerken, bilgi aktarmak için yalnızca renge güvenmekten kaçının. Rengi şekiller, desenler, etiketler veya konumla birlikte kullanın. Renk körliği simülatörüyle renk paletinizi test etmek, sorunlu kombinasyonları belirlemeye yardımcı olur. Mavi ve turuncu renkleri neredeyse tüm renk körlüğü türlerince ayırt edilebilir. Bir web sitesi veya uygulama için renk paleti oluşturma genellikle birincil marka rengiyle başlar. Bu temelden, gölgelerin, tonların ve tamamlayıcı renklerin tam bir paletini türetirsiniz. HSL'de gölge oluşturmak, ton ve doygunluğu sabit tutarken açıklığı azaltmak anlamına gelir. Ton oluşturmak, açıklığı artırmak anlamına gelir. Tamamlayıcı bir renk oluşturmak, tona 180 derece eklemek anlamına gelir. Analog renkler, temel tondan 30 derece içindedir. Üçlü renkler 120 derece aralıktdır. Bölünmüş tamamlayıcı renkler, temelden 150 ve 210 derecedir. Bu renk teorisi ilişkileri, HSL'de hesaplamak kolaydır ve RGB veya hex'te zahmetlidir. Tasarım belirteçleri ve CSS özel özellikleri (değişkenler), bir kod tabanında renkleri yönetmenin modern yoludur. Renklerinizi CSS özel özellikleri olarak bir kez tanımlayın: --color-primary: hsl(220, 90%, 56%); --color-primary-light: hsl(220, 90%, 72%); --color-primary-dark: hsl(220, 90%, 40%). Bu değişkenleri stil sayfalarınız boyunca referans verin. Birincil rengi değiştirmeniz gerektiğinde, bir değeri güncelleyin. Material Design ve Tailwind CSS gibi tasarım sistemleri, renkleri her tonun açıklık varyasyonlarını temsil eden ölçeklere (50, 100, 200'den 900'e) düzenler. Karanlık mod, her şeyi basitçe ters çevirmekten farklı bir renk yaklaşımı gerektirir. Karanlık modda, arka planlar koyudur (çok fazla kontrast ve göz yorgunluğu yaratan saf siyah değil) ve metin açıktır (aynı nedenden dolayı saf beyaz değil). Farklı yükseltme seviyelerindeki yüzeyler biraz daha açık arka plan gölgeleri kullanır. Marka renkleri genellikle koyu arka planlarda sert görünmeden okunabilirliği sürdürmek için karanlık modda azaltılmış doygunluk ve artırılmış açıklık gerektirir. CSS özel özelliklerini kullanan iyi tasarlanmış bir renk sistemi, kök seviyesinde değişken değerleri değiştirerek açık ve koyu paletler arasında geçiş yapabilir. sRGB ötesindeki renk uzayları, modern ekranlar için önemli hale geliyor. Standart hex ve RGB değerleri tarafından kullanılan sRGB renk uzayı, görülebilir renklerin yalnızca yaklaşık yüzde 35'ini kapsar. Apple cihazları ve birçok modern monitör tarafından kullanılan Display P3, yaklaşık yüzde 45'ini kapsar. HDR televizyonda kullanılan Rec. 2020, yaklaşık yüzde 75'ini kapsar. Yeni CSS color-mix(), color() ve oklch() fonksiyonları bu daha geniş oyunluk alanlarına erişebilir. color(display-p3 1 0 0) olarak belirtilen bir renk, P3'ü destekleyen ekranlarda #FF0000'dan daha canlı bir kırmızı üretir. Geniş oyunluk alanı ekranları standart hale geldikçe, sRGB ötesindeki renk uzaylarını anlamak canlı görsel deneyimler sunmak için giderek daha önemli hale gelir. Renkleri JavaScript'te programatik olarak dönüştürmek basit matematik kullanır. Hex'i RGB'ye dönüştürmek için: parseInt(hex.substring(1,3), 16) kırmızı kanalı verir ve yeşil ile mavi için benzer şekilde. RGB'yi HSL'ye dönüştürmek için: R, G, B'yi 0-1 aralığına normalize edin, maksimum ve minimum değerleri hesaplayın, açıklığı (max+min)/2 olarak türetin, doygunluğu maksimum ile minimum arasındaki deltadan ve tonu hangi kanalın maksimum olduğundan çıkarın. Bu formüller iyi belgelenmiştir ve her renk işleme kitaplığında (JavaScript'te chroma.js, color, tinycolor2, Python'da colour ve Rust'ta palette) uygulanmıştır. Gradyanlar birden çok renk kodu kullanır. Bir CSS doğrusal gradyan, renkler arasında geçiş yapar: background: linear-gradient(to right, #FF0000, #0000FF) bir kırmızıdan maviye gradyan oluşturur. RGB'deki gradyanlar, RGB uzayında iki renk arasındaki düz çizgi doygunluğu azaltılmış bölgelerden geçebildiğinden bulanık ara renkler üretebilir. HSL veya oklch'deki gradyanlar genellikle renk çemberini izlediklerinden daha canlı geçişler üretir. "in oklch" ile modern CSS gradyan enterpolasyonu, algısal olarak pürüzsüz geçişler üretir: background: linear-gradient(in oklch, #FF0000, #0000FF). Bu, tamamlayıcı renkler arasındaki gradyanlar için belirgin bir iyileştirmedir. WebRecast renk dönüştürücüsü, desteklenen herhangi bir biçimde girdi kabul eder ve diğer tüm biçimlerdeki eşdeğer değerleri anında gösterir. Bir hex kodu girin ve RGB, HSL, HSV ve CMYK değerlerini görün. Bir HSL değeri girin ve hex ve RGB eşdeğerlerini alın. Bu, manuel dönüştürme matematiğini ortadan kaldırır ve tasarım araçları (HSV gösterebilir) ile CSS (hex, RGB veya HSL kullanır) arasında çeviri yaparken hataları azaltır. Dönüştürücü ayrıca rengin görsel bir önizlemesini görüntüler, böylece niyetinizle eşleştiğini doğrulayabilirsiniz. Veri görselleştirmede renk özel dikkat gerektirir. Grafikler, grafikler ve haritalar, birbirinden ayırt edilebilen, görüntüleyici için anlamlı ve renk görüş eksikliği olan kişiler için erişilebilir renkler kullanmalıdır. Sıralı renk ölçekleri (bir tonun açıktan koyuya), sıcaklık veya nüfus yoğunluğu gibi sürekli veriler için çalışır. Iraksak renk ölçekleri (nötr bir orta noktada buluşan iki ton), kâr/zarar veya ortalama sapma gibi anlamlı bir merkez noktası olan veriler için çalışır. Kategorik renk ölçekleri (farklı tonlar), ürün kategorileri gibi nominal veriler için çalışır. ColorBrewer gibi araçlar, farklı veri türleri ve erişilebilirlik gereksinimleri için optimize edilmiş araştırmaya dayalı paletler sağlar. Cihazlar arası renk yönetimi sürekli bir meydan okumadır. Aynı hex kodu, ekran teknolojisi, kalibrasyon, parlaklık ve ortam ışığındaki varyasyonlar nedeniyle farklı ekranlarda farklı görünebilir. sRGB, web için standart renk uzayıdır ve çoğu ekran bunu yaklaşık olarak kalibre eder. Profesyonel tasarımcılar, monitörlerini kolorimetreler (ekran çıktısını ölçen donanım cihazları) ve ICC profilleri kullanarak kalibre eder. Kullanıcının ekranını kontrol edemediğiniz web geliştirmede, hafif renk işleme farklılıklarının kullanılabilirliği veya okunabilirliği etkilememesi için yeterli kontrast marjlarıyla tasarım yapın. Görüntülerden renk çıkarma, fotoğraflarla, marka varlıklarıyla veya ilham görüntüleriyle eşleşen paletler oluşturmak için kullanışlıdır. Süreç, k-ortalamalar kümeleme, ortanca kesme veya oktree niceleme gibi algoritmalar kullanarak baskın renkleri örneklemeyi içerir. Bu algoritmalar benzer pikselleri gruplandırır ve en temsili renkleri tanımlar. Adobe Color, Coolors ve çeşitli npm paketleri (color-thief, vibrant.js) bu süreci otomatikleştirir. Bir hero görüntüden 5 ila 8 baskın renk çıkarmak ve onları vurgu renkleri olarak kullanmak, görüntülerle ile UI öğeleri arasında görsel tutarlılık sağlar. Renk psikolojisi, kesin bir bilim olmasa da, algı üzerinde bazı belgelenmiş etkileri vardır. Kırmızı, algılanan aciliyeti artırır ve genellikle satış duyuruları ve hata durumları için kullanılır. Mavi, güven ve profesyonellik aktarır; bu nedenle finansal kurumlar ve sosyal medya platformları onu tercih eder. Yeşil, başarıyı, güvenliği ve çevre temalarını işaret eder. Turuncu, eylemle ilişkilendirilir ve genellikle harekete geçirme düğmeleri için kullanılır. Sarı, dikkat çeker ve uyarılar için çalışır. Bu çağrışımlar kültürel olarak etkilenir: bazı Doğu Asya kültürlerinde beyaz yas tutmayı temsil ederken, Çin kültüründe kırmızı şans ve refah işaret eder. Renk şemaları seçerken hedef kitlenizin kültürel bağlamını düşünün. Renk kodlarıyla çalışmak için pratik ipuçları: CSS'de hex kodları yazarken her zaman karma sembolünü (#) dahil edin, çünkü gerekli sözdizimidir. Tutarlılık için küçük harf hex basamakları kullanın (#FF0000 yerine #ff0000); bu aynı zamanda çoğu CSS küçültücü ve biçimlendirici tarafından kullanılan gelenektir. Programatik olarak renk varyasyonları oluşturmanız gerektiğinde CSS'nizde HSL'i tercih edin. Tüm öğeyi ve alt öğeleri etkileyen opacity CSS özelliği yerine şeffaflık için 8 basamaklı hex veya rgba/hsla kullanın. Marka renklerinizi tasarım belirteçleri olarak depolayın ve bunları tek tek bileşenlerde renk değerlerini sabit kodlamak yerine projeniz boyunca tutarlı şekilde referans verin. Bir tasarım ekibiyle renkleri iletirken, ekran kalibrasyon farklarından belirsizliği önlemek için hem hex kodunu hem de görsel swatch'i dahil edin.

Sık sorulan sorular

Bu, normal bir renk dönüştürücüden nasıl farklı?

Bu araç, kod dostu çıktı biçimiyle birden fazla rengi aynı anda dönüştürmesi gereken geliştiriciler için tasarlanmıştır.

Hangi renk biçimleri destekleniyor?

HEX (#RRGGBB), RGB(r,g,b), HSL(h,s%,l%), RGBA ve HSLA biçimlerinin tümü desteklenir.