JavaScript ile Rengi Açma veya Koyulaştırma

Arayüzler çoğu zaman bir rengin daha açık ya da daha koyu bir sürümüne ihtiyaç duyar: bir hover durumu, bir kenarlık, yumuşak bir arka plan. Bir kütüphaneye uzanmadan önce bir HEX kodunun içinde ne olduğunu bilmek işe yarar, çünkü onu okuyabildiğinizde matematiği basittir.

#8b8b8b gibi bir HEX renk, 16 tabanında yazılmış üç sayıdır. #'ten sonraki ilk çift kırmızı, ikincisi yeşil, üçüncüsü mavi. Her çift 00'dan ff'ye, yani 0'dan 255'e kadar gider: İlk karakter on altılıları, ikincisi birlikleri sayar; a'dan f'ye kadar olan harfler de 10'dan 15'e kadar olan sayılardır. Ekranlar her rengi bu üç ışığı karıştırarak oluşturur.

Bir rengi koyulaştırmak için üç sayıyı da 0'a yaklaştırırız. Açmak için 255'e yaklaştırırız. Önemli olan, her kanalı yolun aynı payı kadar ilerletmektir: %40 daha açık, her kanalın 255'e kalan mesafesinin %40'ını katetmesi demektir.

Yaygın bir kısayol bunun yerine çarpmaktır: her kanala kendisinin %40'ını eklemek. Koyulaştırırken iki yol da aynı sonucu verir. Açarken ise çarpma bozulur: 0'daki bir kanal hiç büyümez, 255'e ulaşan bir kanal durur ama diğerleri büyümeye devam eder; bu da rengin kendisini değiştirir. İki yol arasında geçiş yapın, siyahı ve turuncuyu deneyin.

İşte bütün fikir tek bir fonksiyonda. Üç çifti okur, her kanalı 0'a ya da 255'e doğru ilerletir ve sayıları toString(16) ile yeniden 16 tabanında yazar. padStart, 16'dan küçük bir sayının kaybedeceği baştaki sıfırı ekler; böylece 5, 05 olur.

// amount: -1 (black) … 0 (no change) … 1 (white)
function adjustColor(hex, amount) {
  const target = amount < 0 ? 0 : 255;
  const share = Math.abs(amount);

  return "#" + [1, 3, 5]
    .map((i) => parseInt(hex.slice(i, i + 2), 16))
    .map((c) => Math.round(c + (target - c) * share))
    .map((c) => c.toString(16).padStart(2, "0"))
    .join("");
}

adjustColor("#ff8800", 0.4);  // "#ffb866"
adjustColor("#ff8800", -0.4); // "#995200"

Fonksiyon, #ff8800 gibi altı karakterlik tam bir kod bekler.

Bugün bu karışımı CSS sizin için yapabilir. color-mix() fonksiyonu iki rengi bir yüzdeyle harmanlar. srgb renk uzayında karıştırıldığında, yuvarlama dışında bizim fonksiyonumuzla aynı renkleri verir. İnsanların rengi nasıl gördüğü üzerine kurulmuş bir renk uzayı olan oklch'de karıştırıldığında ise renk tonu her adımda tamamen aynı kalır. srgb'de bazı renkler biraz kayar: Turuncu açıldıkça hafifçe sarıya döner. Üç satırı turuncuyla karşılaştırın.

.lighter { background: color-mix(in oklch, #ff8800, white 40%); }
.darker  { background: color-mix(in oklch, #ff8800, black 40%); }

Yani bir rengi açmak ya da koyulaştırmak bir karışımdır: beyaza ya da siyaha doğru, her kanal için aynı payla. JavaScript'te bu birkaç satır tutar. CSS'te color-mix() bunu sizin için yapar ve oklch'de karıştırmak, renk tonunu en koyu adımdan en açığına kadar sabit tutar.

@aykutkardas

—

0/50 alkış