🎨

Renk Dönüştürücü (HEX, RGB, HSL) SSS

HEX'i RGB'ye nasıl dönüştürürüm?

Bir hex renk kodunu RGB'ye dönüştürmek için, altı haneli hex dizesini #RRGGBB üç çifte bölün, ardından her çifti onaltılık tabandan (16 tabanı) ondalık tabana (10 tabanı) dönüştürün.

Örnek: #FF5733

  • FF = 255 (Kırmızı)
  • 57 = 87 (Yeşil)
  • 33 = 51 (Mavi)
  • Sonuç: rgb(255, 87, 51)

Kısa hex (#F53) için, önce her basamağı bir çifte genişletin: #F53, #FF5533 olur. Basamaklar ikiye katlanır: F, FF'ye; 5, 55'e; 3, 33'e genişler.

Sekiz haneli hex (#RRGGBBAA) aynı şekilde çalışır, ancak alfa kanalı için fazladan bir çift bulunur. #FF573380, alfa kanalı için 80 (128, yani ~%50 opaklık) ekler.

Anında dönüşümler için renk dönüştürücümüzü kullanın. Kısa ve uzun hex dahil, alfali ve alfasız tüm formatları işler.

RGB ve RGBA arasındaki fark nedir?

RGB, kırmızı, yeşil ve mavi kanallarını kullanarak bir renk tanımlar. RGBA, opaklığı kontrol eden ek bir Alfa kanalına sahip RGB'dir. Alfa değeri 0.0 (tamamen saydam) ile 1.0 (tamamen opak) arasında değişir.

rgb(255, 0, 0)         /* Tamamen opak kırmızı */
rgba(255, 0, 0, 0.5)  /* %50 opaklıkta kırmızı */

Modern CSS'te (CSS Color Level 4), rgba() takma adına artık gerek yoktur. rgb() fonksiyonu artık isteğe bağlı bir alfa kanalını kabul eder:

rgb(255 0 0 / 0.5)  /* Modern sözdizimi, %50 opaklıkta kırmızı */

Tüm modern tarayıcılar bu sözdizimini destekler. Eski rgba() fonksiyonu her yerde çalışır ve kaldırılmayacaktır, ancak yeni kodlar için eğik çizgi sözdizimiyle rgb() kullanmak önerilen yaklaşımdır.

RGB'yi HSL'ye nasıl dönüştürürüm?

RGB'yi HSL'ye dönüştürmek üç adımdan oluşur:

  1. RGB değerlerini 0-1 aralığına normalleştirin (255'e bölün)
  2. Normalleştirilmiş üç değerin minimum ve maksimumunu bulun — min ve max'ın ortalaması açıklık (L) değeridir
  3. Hangi kanalın maksimum olduğuna ve max ile min arasındaki farka bağlı olarak renk tonu ve doygunluğu hesaplayın

Formül, hangi renk kanalının baskın olduğuna bağlı olarak değişir:

  • Kırmızı maksimum ise: renk tonu = (yeşil - mavi) / (max - min)
  • Yeşil maksimum ise: renk tonu = 2 + (mavi - kırmızı) / (max - min)
  • Mavi maksimum ise: renk tonu = 4 + (kırmızı - yeşil) / (max - min)
  • Doygunluk açıklığa bağlıdır: L > 0.5 ise, doygunluk = (max - min) / (2 - max - min), aksi takdirde doygunluk = (max - min) / (max + min)

Matematik basit değildir ve hata yapması kolaydır, bu nedenle anında sonuçlar için bir renk dönüştürme aracı kullanmanız önerilir.

Renklerim neden farklı ekranlarda farklı görünüyor?

Renk görünümü ekranlar arasında çeşitli nedenlerle değişir:

Ekran kalibrasyonu — Çoğu tüketici ekranı renk kalibrasyonuna sahip değildir. Fabrika varsayılanları parlaklık, kontrast ve renk sıcaklığı açısından büyük farklılıklar gösterir.

Renk gamutu farklılıkları — Farklı ekranlar farklı renk aralıklarını destekler. sRGB web standardıdır, ancak birçok modern telefon ve dizüstü bilgisayar DCI-P3'ü (%25 daha geniş) destekler. sRGB gamutunun dışındaki bir renk, geniş gamutlu bir ekranda doğru görünür ancak standart bir ekranda kırpılır veya kaydırılır.

Ekran teknolojisi — OLED ekranlar, LCD ekranlara göre daha derin siyahlar ve daha doygun renkler üretir. IPS paneller, TN panellere göre daha iyi renk doğruluğuna sahiptir.

Görüş açısı — Özellikle düşük kaliteli ekranlarda, açılı bakıldığında renkler kayar.

Parlaklık ve ortam ışığı — Karanlık bir odada %50 parlaklıktaki bir ekran, doğrudan güneş ışığında %100 parlaklıktaki aynı ekrandan farklı görünür.

Farklılıkları en aza indirmek için: sRGB renk uzayında çalışın, monitörünüzü bir donanım kalibratörü ile kalibre edin ve yayınlamadan önce tasarımlarınızı birden fazla cihazda test edin.

HSL renk modeli ne için iyidir?

HSL (Renk Tonu, Doygunluk, Açıklık), programatik renk manipülasyonu için idealdir. Temel avantajı, bir kanalın "renk" bilgisini (renk tonu) taşıması, diğer iki kanalın ise renk tonu değerinden bağımsız olarak görünümü kontrol etmesidir.

HSL'nin kolaylaştırdıkları:

  • Renk paletleri — Aynı renk tonunu koruyun, tam bir renk skalası oluşturmak için açıklık ve doygunluğu değiştirin
  • Hover ve aktif durumları — Açıklığı sabit bir yüzdeyle değiştirin: hsl(220, 80%, 50%) -> hsl(220, 80%, 60%)
  • Karanlık mod — Tüm renklerde açıklığı azaltın: her rengin açıklığından %30 çıkarın
  • Temalar — Aynı doygunluk/açıklık yapısından tamamen yeni renk şemaları oluşturmak için renk tonu değerlerini değiştirin
  • Devre dışı durumları — Öğeleri soluklaştırmak için doygunluğu azaltın: hsl(220, 80%, 50%) -> hsl(220, 30%, 70%)

HSL'nin iyi olmadığı durumlar:

HSL algısal olarak tekdüze değildir. Aynı açıklık değerine sahip iki renk (örneğin, hsl(60, 100%, 50%) — parlak sarı ve hsl(240, 100%, 50%) — saf mavi) çok farklı algılanan parlaklığa sahiptir. Algısal olarak tekdüze renk manipülasyonu için bunun yerine OKLCH kullanın.

Hex renklerindeki # işareti ne anlama gelir?

# öneki (diyez veya kare işareti), CSS ayrıştırıcısına sonraki karakterlerin onaltılık bir renk değerini temsil ettiğini söyler. CSS ve HTML'de hex renk kodları için standart gösterimdir.

Tam format #RRGGBB veya #RRGGBBAA şeklindedir:

| Bileşen | Anlamı | Örnek (#FF5733) | |-----------|---------|---------------------| | # | Hex öneki | Zorunlu gösterge | | RR | Kırmızı kanalı | FF (255) | | GG | Yeşil kanalı | 57 (87) | | BB | Mavi kanalı | 33 (51) |

HTML'de # ayrıca bağlantı çapaları için de kullanılır (<a href="#section">), ancak CSS bağlamında veya style özniteliğinde her zaman bir hex rengini belirtir. HTML ayrıca # gerektirmeyen eski "adlandırılmış renkleri" (red, blue, rebeccapurple gibi 140 önceden tanımlanmış ad) de destekler.

Renk gamutu nedir ve neden önemlidir?

Renk gamutu, bir cihazın görüntüleyebileceği veya bir renk uzayının temsil edebileceği renk aralığıdır. Bunu, bir ekran veya dosya formatı için kullanılabilir renklerin "sözlüğü" olarak düşünün.

En dardan en genişe yaygın renk gamutları:

| Renk Uzayı | Göreceli Boyut | Kullanım Yeri | |-------------|--------------|------------| | sRGB | Temel | Web standardı, çoğu monitör, tüm tarayıcılar | | Adobe RGB | ~%50 daha geniş | Profesyonel fotoğrafçılık, baskı | | DCI-P3 | ~%25 daha geniş | Modern telefonlar, Mac'ler, birçok dizüstü bilgisayar | | Rec. 2020 | ~%75 daha geniş | HDR televizyon, üst düzey ekranlar |

Neden önemlidir: Bir ekranın gamutunun dışındaki bir renk doğru şekilde görüntülenemez. Cihaz, rengi en yakın gamut içi değere kırpacak veya yaklaşık olarak gösterecektir. Bu nedenle, bir tasarım dosyasındaki canlı koyu kırmızı, standart bir dizüstü bilgisayar ekranında soluk veya çamurlu görünebilir.

Web tasarımı için: Her zaman sRGB'de tasarlayın veya renklerinizin sRGB-güvenli olduğunu kontrol edin. OKLCH ve display-p3 renk uzayı daha geniş gamutları hedeflemenizi sağlar, ancak standart ekranlar için bir sRGB yedeği sağlamalısınız.

Hex ve alfalı hex arasındaki fark nedir?

Standart hex (#FF5733) altı hane kullanır ve alfa kanalı yoktur — renk her zaman tamamen opaktır. Alfalı hex (#FF573380) sekiz hane kullanır ve sona alfa (opaklık) kanalı için iki hex hanesi daha ekler.

Hex'te alfa değerleri:

| Hex Çifti | Ondalık | Opaklık | |----------|---------|---------| | 00 | 0 | Tamamen saydam | | 80 | 128 | ~%50 opaklık | | FF | 255 | Tamamen opak |

Örnekler:

#FF5733     — Düz kırmızı-turuncu, saydamlık yok
#FF5733FF   — Aynı renk, tamamen opak (gereksiz FF)
#FF573380   — Aynı renk, %50 saydam
#FF573300   — Aynı renk, tamamen görünmez

Ayrıca alfalı dört haneli kısa hex de vardır: #F538, #FF553388 (%50 opaklık) olarak genişler.

Tarayıcı desteği: Sekiz haneli hex tüm modern tarayıcılarda desteklenir. Eski tarayıcı desteği (Internet Explorer) için bunun yerine rgba() kullanın.

Web sitem için erişilebilir renkleri nasıl seçerim?

Erişilebilir bir renk sistemi oluşturmak için bu adım adım süreci izleyin:

1. Birincil marka rengiyle başlayın. Markanızı temsil eden bir renk tonu seçin, ardından çok açıktan (arka planlar) çok koyuya (metin) kadar tam bir skala oluşturmak için HSL veya OKLCH kullanın.

2. Metninizi siyaha yakın olarak ayarlayın. Beyaz arka planlardaki gövde metni #1A1A1A ile #333333 arasında olmalıdır. Saf beyaz üzerinde asla saf siyah (#000000) kullanmayın — bazı okuyucularda göz yorgunluğuna neden olur. Beyaz üzerinde koyu gri daha iyi okunabilirlik sağlar.

3. Her ön plan-arka plan çiftini kontrol edin. Her metin ve arka plan kombinasyonu WCAG standartlarını karşılamalıdır:

  • Normal metin: minimum 4.5:1 (WCAG AA)
  • Büyük metin: minimum 3:1 (WCAG AA)
  • Gövde metninde 7:1 hedefleyin (WCAG AAA)

4. Rengi asla tek ayırt edici olarak kullanmayın. Bağlantılar alt çizgiye sahip olmalıdır (sadece farklı bir renk değil). Hata durumları simgeler veya metin içermelidir. Grafikler desen veya etiket kullanmalıdır.

5. Renk körlüğü simülatörleriyle test edin. Döteranopi (kırmızı-yeşil) en yaygın türdür. Tasarımınızın renk algısı olmadan da çalıştığından emin olun.

6. Gri tonlamada doğrulayın. Tasarımınız gri tonlamaya dönüştürüldüğünde anlamını yitiriyorsa, bilgi iletmek için renge çok fazla güveniyorsunuz demektir.

Herhangi iki renk arasındaki kontrast oranlarını anında kontrol etmek için renk dönüştürücümüzü kullanın.

Renk Dönüştürücü (HEX, RGB, HSL) SSS - CoolTool