Renk metodolojisi

Renk kümesi, aynı temel rengin dört gösterimi arasında dönüşüm yapar: HEX (#FF6B35), RGB (255, 107, 53), HSL (16°, %100, %60) ve HSV (16°, %79, %100). Dört tanımlamanın tümü bir rengi aynı renk uzayında tanımlar — sRGB — bu nedenle dönüşümler cebirsel yeniden etiketlemelerdir, algısal yeniden eşlemeler değil.

Evrensel çıpa olarak sRGB

sRGB (Standart RGB), 1999’da IEC 61966-2-1 standardı tarafından tanımlanan web’in varsayılan renk uzayıdır. Görüntülenebilir herhangi bir renk üretmek için birleşen tam kırmızı, yeşil ve mavi birincilleri ve tipik bir CRT monitörün yanıtını yaklaşık olarak ifade eden doğrusal olmayan bir gama eğrisini belirtir. Modern LCD ve OLED ekranlar bu eğriyi taklit eder.

Her HEX renk, her rgb(…) değeri, her CSS varsayılan hsl(…) aksi belirtilmedikçe sRGB varsayar. Daha yeni geniş renk gamı biçimleri (Display P3, Rec.2020) mevcuttur ancak color(display-p3 …) veya benzeri aracılığıyla açık katılım gerektirir — bu kümenin kapsamı dışında.

Dönüşüm matematiği

HEX ↔ RGB

Doğrudan taban dönüşümü: her bir çift onaltılık basamak bir bayttır (0-255). #FF6B35 ↔ rgb(255, 107, 53) tam olarak, hassasiyet kaybı yok. Üç basamaklı hex (#F63), #FF6633 için kısaltmadır.

RGB → HSL

R, G, B’yi [0, 1] aralığına dönüştürün. Maksimum ve minimum kanalları bulun. Parlaklık L = (maks + min) / 2. Doygunluk, L < 0,5 olup olmadığına bağlıdır. Renk tonu, hangi kanalın maksimum olduğundan ve kanallar arasındaki göreceli farklardan hesaplanır.

Tam formül standarttır ve kütüphanemizde tam olarak uygulanmaktadır. Renk tonu derece cinsinden [0, 360); doygunluk ve parlaklık yüzde [0, 100] olarak bildirilir.

RGB → HSV

Benzer mantık. Değer V = maks. Doygunluk S = (maks − min) / maks, maks ≠ 0 olduğunda. Renk tonu, HSL renk tonuyla aynıdır.

HSL ve HSV doygunluk ekseninde ayrılır. %100 HSV doygunluktaki bir renk tam doyurulmuştur; %100 HSL doygunluğunda yalnızca L = 0,5’te tam doyurulmuştur. Tasarımcılar ton ve gölge ayarlamak için HSL’yi tercih eder; görüntü düzenleyiciler genellikle HSV’yi sunar (Photoshop buna “parlaklık” için “HSB” der).

Gidiş-dönüş hassasiyeti

HEX ↔ RGB bit düzeyinde kesindir. Her iki yönde de kayıpsız gidiş-dönüş yapar.

RGB ↔ HSL / RGB ↔ HSV kayan nokta aritmetiği içerir. Gidiş-dönüş hassasiyeti 8 bit RGB çıkışıyla sınırlandırılmıştır — en kötü durum bir kanalı 255’ten ±1 yuvarlar (yaklaşık %0,4). Görsel olarak bu görünmezdir; renge duyarlı çalışmalar için mümkünse gidiş-dönüşten kaçının.

Algoritma ayrıntıları: tam HSL ve HSV

Dönüşüm kütüphanesi bu formülleri olduğu gibi içerir; cebirın görünür olması için burada yeniden üretilmiştir. Normalleştirilmiş girdiler R, G, B ∈ [0, 1], M = maks(R, G, B), m = min(R, G, B), kroma C = M − m:

L = (M + m) / 2
S_HSL = C / (1 − |2L − 1|), C ≠ 0 ise, aksi takdirde 0
V = M
S_HSV = C / M, M ≠ 0 ise, aksi takdirde 0

Renk tonu her iki modelde de aynı eksendedir:

H = 60° × ((G − B) / C mod 6), M = R ise
H = 60° × ((B − R) / C + 2), M = G ise
H = 60° × ((R − G) / C + 4), M = B ise

Kontrast için parlaklık hesaplarken veya algısal olarak araya eklerken uygulanan sRGB doğrusallaştırması, IEC 61966-2-1’den parçalı aktarımdır: doğrusal = c/12,92, c ≤ 0,04045 ise, aksi takdirde ((c + 0,055)/1,055)^2,4. Parçalı tersinin iyi tanımlanmış olması nedeniyle 8 bit sRGB ızgarası üzerinden doğrusal ve geri bit düzeyinde kesindir.

Kaynaklar ve referanslar

Bu sayfadaki her formül birincil bir spesifikasyondan veya hakemli bir yayından alınmıştır: sRGB birincilleri ve gama IEC 61966-2-1’den, CSS hex/rgb/hsl sözdizimi W3C CSS Color Module Level 4’ten, RGB↔HSV dönüşümü Smith’in 1978 makalesinden, kontrast formülü WCAG 2.2’den. Kütüphane testleri sırasında gerçek doğru olarak kullanılan kamuya açık sürümler için bu sayfanın altındaki Kaynaklar bloğuna bakın.

Varsayımlar ve sınırlamalar

• Her yerde sRGB. Açık bir renk alanı etiketi olmayan girdiler sRGB olarak kabul edilir. P3 / Rec.2020 / Adobe RGB girdileri otomatik algılanmaz ve ham RGB olarak geçirilirse yanlış yorumlanır.
• 8 bit tam sayı RGB.Hex girdi, kanal başına [0, 255]’e sıkıştırılır. 10 veya 12 bit HDR ardışık düzenleri #RRGGBB’den daha geniş bir biçim gerektirir.
• HSL/HSV, algısal uzaylar değil kolaylık yeniden parametrelemesidir.H, S veya L’deki eşit sayısal değişimler eşit algısal değişimlerle eşleşmez — algısal açıdan tekdüze çalışmalar için OKLCH veya CIELAB kullanın.
• Kromatik adaptasyon yok. Farklı beyaz noktalara sahip uzaylar arasında dönüşüm (D65 ↔ D50), uygulamadığımız bir Bradford veya CAT02 dönüşümü gerektirir.
• CMYK, ICC profilleri gerektirir.Web’deki cebirsel CMYK ≈ RGB yaklaşımları baskı için düzgün biçimde yanlıştır; hiçbir CMYK değeri yayımlamıyoruz.
• Alfa geçiştir, önceden çarpılmış değil.HSL/HSV üzerinden gidiş-dönüş alfa kanalını korur ancak alfayı renk bileşenlerine uygulamaz.

İşlemediğimiz durumlar

• Daha geniş renk gamı uzayları (P3, Rec.2020) — kapsam dışı.
• Algısal açıdan tekdüze uzaylar (Lab, LCH, Oklab) — bazen talep edilir; cebir daha karmaşık. Daha sonra ayrı bir araç olarak çıkabilir.
• CMYK — baskıya özgü renk uzayı; dönüşümler yalnızca cebir değil ICC profilleri gerektirir. RGB ve CMYK karşılaştırmamıza bakın.
• Alfa — RGB→HSL/HSV alfa geçiş olarak korur. Alfası olan HEX (#RRGGBBAA) desteklenir.