HEX'ten RGB'ye renk donusumu: tasarimcilar ve gelistiriciler icin rehber

Renk modelleri, renkleri dijital olarak temsil eden matematiksel sistemlerdir. Web gelistirme, grafik tasarim, marka olusturma veya herhangi bir gorsel disiplinde calisiyorsaniz, en az uc modeli anlamaniz gerekir: HEX, RGB ve HSL. Her birinin baglama gore avantajlari vardir.

Modern CSS uc formati da kabul eder. Ayni kirmiziyi soyle yazabilirsiniz:

• HEX: #FF0000
• RGB: rgb(255, 0, 0)
• HSL: hsl(0, 100%, 50%)

Ucu de tamamen ayni rengi uretir, ancak faydalilik acisindan farklilasir. HEX, CSS'de kisadir. RGB, isik karistirmayi dusunurken sezgiseldir. HSL, tonu degistirmeden parlaklik veya doygunlugu ayarlamak istediginizde idealdir.

NexTools renk donusturucu ile tum formatlar arasinda aninda donusum yapabilir ve rengin gercek zamanli onizlemesini gorebilirsiniz.

HEX (onaltilik) formati, renkleri # isareti ve ardindan 6 onaltilik rakamla (0-9, A-F) temsil eder. Rakamlar ciftler halinde gruplanir: ilk ikisi kirmizi, sonraki ikisi yesil, son ikisi mavi icindir.

Yapi: #RRGGBB

Her cift 00'dan (ondalik 0, o renkten hic yok) FF'e (ondalik 255, maksimum yogunluk) kadar gider:

Kisaltilmis HEX: Her cift ayni rakamlara sahipse kisaltilabilir: #FF0000 = #F00.

Saydamlikli HEX: Alfa (opaklık) icin iki rakam daha ekleyin: #FF000080 %50 opaklikta kirmizidir.

RGB modeli toplamsal isik sentezine dayanir. Her bilesen 0'dan 255'e kadardir ve karistirildiginda milyonlarca renk uretir (tam olarak 16.777.216 kombinasyon).

CSS'de: rgb(kirmizi, yesil, mavi)

Pratik ornekler:

• rgb(255, 165, 0) = turuncu
• rgb(128, 0, 128) = mor
• rgb(0, 128, 128) = petrol yesili

Saydamlikli (RGBA): rgba(255, 0, 0, 0.5) = %50 opaklikta kirmizi.

HEX'ten RGB'ye donusum: Her onaltilik cifti ondaliga donusturun. #3A7BF2: 3A=58, 7B=123, F2=242. Sonuc: rgb(58, 123, 242).

RGB'den HEX'e donusum: Her ondalik degeri 2 haneli onaltiliga donusturun. rgb(58, 123, 242): 58=3A, 123=7B, 242=F2. Sonuc: #3A7BF2.

HSL modeli rengi anlasilmasi kolay uc boyuta ayirir:

• Hue (Ton): Temel renk, 0-360 derece. 0°/360°=kirmizi, 120°=yesil, 240°=mavi.
• Saturation (Doygunluk): Rengin "canli" olmasi, %0 (gri) ile %100 (saf renk) arasi.
• Lightness (Parlaklik): Acik veya koyu, %0 (siyah) ile %100 (beyaz) arasi. %50 saf renktir.

HSL neden guclu: Mavi bir dutimeniz hsl(220, 80%, 50%) varsa ve hover icin daha acik surum istiyorsaniz, parlakligi artirin: hsl(220, 80%, 60%).

Palet olusturucu ile renk paletlerini deneyin.

Web tasariminda en sik karsilasacaginiz renkler ve karsiliklari:

Herhangi bir web sitesinin kesin rengini bulmak icin renk secici araci kullanin.

RGB ve HEX ekranlar icinken (isik), CMYK (Camgobegi, Macenta, Sari, Siyah) baski icin (murekkep) olan modeldir.

Basili renklerin neden farkli gorunmesi: Ekran isik yayar (RGB), kagit isigi yansitir (CMYK). CMYK'nin renk gamuti RGB'den daha kucuktur, bu nedenle ekrandaki bazi canli renkler kagit uzerinde tam olarak yeniden uretilemez.

• Elektrik mavisi ve neon yesili CMYK'de canlilik kaybeder
• Kirmizi ve turuncular genellikle iyi korunur
• CMYK'de saf siyah C:75 M:68 Y:67 K:90'dir ("rich black" denir)

Renk secimi sadece estetik meselesi degildir. WCAG 2.1 yonergeleri metin ve arka plan arasinda minimum kontrast oranlarini belirler:

• AA (minimum): Normal metin icin 4,5:1, buyuk metin icin 3:1
• AAA (optimal): Normal metin icin 7:1, buyuk metin icin 4,5:1

Renk kombinasyonlarinizin kontrastini her zaman kontrast kontrol araci ile dogrulayin.

Gercek: Erkeklerin yaklasik %8'i ve kadinlarin %0,5'i bir tur renk korlugune sahiptir. Kritik bilgileri iletmek icin asla yalnizca renge guvenmeyin.

Modern web gelistirmede renkler, tema ve karanlik mod icin CSS Custom Properties (CSS degiskenleri) ile yonetilir:

:root {
  --color-primary: #C75B39;
  --color-background: #FFFFFF;
  --color-text: #1A1A1A;
}
.dark {
  --color-primary: #E8956E;
  --color-background: #1A1A1A;
  --color-text: #F5F5F5;
}

Bu yaklasimla, bir sitenin tum paletini degistirmek yalnizca degiskenleri degistirmeyi gerektirir.

Ipucu: Karanlik tema olustururken renkleri basitce tersine cevirmeyin. Doygunlugu hafifce azaltin ve saf siyah yerine sicak gri tonlari kullanin (#000000 yerine #1A1A1A).

Gecis olusturucu ile temalariniz icin ozel CSS gecisleri uretebilirsiniz.