Kodcular
Published in

Kodcular

Renk Kontrastını Hesaplama

Bu makalede, arka plan rengine bağlı olarak yazı rengini değiştirmeyi göreceğiz.

CSS tarafında bir yazıya color: #fff verdiğimizi düşünelim. Koyu arka plan renklerinde bu yazı okunabilirken, açık tonlu renk üzerinde okunamaz olacaktır. Burada dinamik olarak arka plan rengi koyu ise beyaz yazı, arka plan açık tonlar ise siyah renkte yazı yazmamız sorunu çözecektir. Peki bunu nasıl yapabiliriz?

Brian Suda isimli bir geliştiricinin geliştirmiş olduğu şu kod işimizi görüyor;

function getContrastYIQ(hexcolor){
var r = parseInt(hexcolor.substr(0,2),16);
var g = parseInt(hexcolor.substr(2,2),16);
var b = parseInt(hexcolor.substr(4,2),16);
var yiq = ((r*299)+(g*587)+(b*114))/1000;
return (yiq >= 128) ? 'black' : 'white';
}
  • Bu kodu biraz okuyalım. Öncelikle hexcolor adında bir parametre (rengimizin 6 haneli HEX kodunu) istiyor.
  • .substr(X,2) fonksiyonu sayesinde 26a69a diye bir renk gönderirsek 26, a6 ve 9a şeklinde parçalıyor.
  • r, g, b değerleri CSS’te 0-255 ve arasındaki değerleri alabiliyor. Bu yüzden oluşturulan 26, a6 ve 9a değerlerini parseInt(X,16) fonksiyonu ile 16’lık tabanda bir değere dönüştürüyor.
  • Bu işlemlerden sonra r=38, g=166 ve b=154 olarak hesaplanmış oluyor.
  • Son adımda ise ((r*299)+(g*587)+(b*114))/1000 formulü ile rengin kontrast değeri hesaplanıyor. Bu değer 128 ve üstü ise parametre olarak gönderdiğimiz değer açık tonda bir renktir, 128’den küçükse koyu bir renktir.

Debug adımlarını gösterecek olursak kod şu şekilde çalışıyor;

function getContrastYIQ(hexcolor){            // hexcolor = 26a69a
var r = parseInt(hexcolor.substr(0,2),16); // r = 38
var g = parseInt(hexcolor.substr(2,2),16); // g = 166
var b = parseInt(hexcolor.substr(4,2),16); // b = 154
var yiq = ((r*299)+(g*587)+(b*114))/1000; // yiq = 126.36
return (yiq >= 128) ? 'black' : 'white'; // return "white"
}

Kişisel sitem üzerinden CodePen örneğini inceleyebilirsiniz.

Kişisel Blog Sitem: omergulcicek.com

Makaleyi alkışlayarak destek olabilirsiniz 🌹

--

--

--

Bu yayın yazılım üzerine üretilen blogların bir araya geldiği Türkçe yayındır.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ömer Gülçiçek

Ömer Gülçiçek

Frontend Developer

More from Medium

How to Code Swaying Bamboo with CSS🎋

QuantumAlert - A Javascript Alert Library 💙

https://quantumalert.cosmogic.com/

CSS min(), max() and clamp()

Let’s play with Hyperlinks