{"id":522,"date":"2026-01-18T20:12:13","date_gmt":"2026-01-18T20:12:13","guid":{"rendered":"https:\/\/narhost.com\/blog\/?p=522"},"modified":"2026-09-11T15:14:07","modified_gmt":"2026-09-11T15:14:07","slug":"renk-kodlari-nedir","status":"publish","type":"post","link":"https:\/\/narhost.com\/blog\/renk-kodlari-nedir\/","title":{"rendered":"Renk Kodlar\u0131 Nedir, HEX, RGB ve CMYK Nerede Kullan\u0131l\u0131r"},"content":{"rendered":"<div id=\"ai-ozet\" class=\"ai-box\">\n<p class=\"ai-box-title\">K\u0131saca \u00f6zet<\/p>\n<ul>\n<li>Renk kodlar\u0131, bir rengi taray\u0131c\u0131n\u0131n, tasar\u0131m program\u0131n\u0131n ve bask\u0131 makinesinin ayn\u0131 bi\u00e7imde anlayaca\u011f\u0131 say\u0131sal g\u00f6sterimlerdir.<\/li>\n<li>Ekranda RGB tabanl\u0131 g\u00f6sterimler kullan\u0131l\u0131r: HEX, RGB, RGBA, HSL ve HSLA. Bask\u0131da ise m\u00fcrekkep kar\u0131\u015f\u0131m\u0131n\u0131 anlatan CMYK kullan\u0131l\u0131r.<\/li>\n<li>HEX ve RGB ayn\u0131 rengi farkl\u0131 yazar; HSL rengi ton, doygunluk ve a\u00e7\u0131kl\u0131k olarak ay\u0131rd\u0131\u011f\u0131 i\u00e7in a\u00e7\u0131k ve koyu varyant \u00fcretmeyi kolayla\u015ft\u0131r\u0131r.<\/li>\n<li>Sa\u011fl\u0131kl\u0131 bir marka paleti be\u015f gruptan olu\u015fur: ana renk, ikincil renk, n\u00f6trler, durum renkleri ve metin renkleri. Sekiz on koddan fazlas\u0131 y\u00f6netilemez h\u00e2le gelir.<\/li>\n<li>Normal metinde kontrast oran\u0131 en az 4,5:1, b\u00fcy\u00fck metinde 3:1 olmal\u0131d\u0131r; bu de\u011ferler WCAG&#8217;in AA seviyesidir.<\/li>\n<li>Paleti CSS de\u011fi\u015fkenleriyle tek yerden y\u00f6netirseniz renk de\u011fi\u015fikli\u011fi tek dosyada biter, koyu tema e\u015flemesi de ayn\u0131 yerden kurulur.<\/li>\n<\/ul>\n<\/div>\n<p>Tasar\u0131mc\u0131dan gelen dosyada bir mavi, kurumsal kimlik belgesinde ba\u015fka bir mavi, sitede \u00fc\u00e7\u00fcnc\u00fc bir mavi. \u00c7o\u011fu markada ayn\u0131 rengin birka\u00e7 kar\u015f\u0131l\u0131\u011f\u0131 dola\u015f\u0131r ve kimse hangisinin do\u011fru oldu\u011funu s\u00f6yleyemez. Sebep basittir: renk kodlar\u0131 ekran ve bask\u0131 i\u00e7in farkl\u0131 sistemlerle yaz\u0131l\u0131r, aradaki d\u00f6n\u00fc\u015f\u00fcm de kimsenin g\u00f6revi de\u011fildir. Bu rehberde hangi g\u00f6sterimin nerede kullan\u0131ld\u0131\u011f\u0131n\u0131, marka paletinin nas\u0131l kuruldu\u011funu ve kontrast oran\u0131n\u0131n neden pazarl\u0131k konusu olmad\u0131\u011f\u0131n\u0131 anlat\u0131yoruz.<\/p>\n<h2>Renk kodlar\u0131 nedir ve neden birden fazla g\u00f6sterim var?<\/h2>\n<p>Renk kodlar\u0131, bir rengi tarif etmek yerine \u00f6l\u00e7en say\u0131sal g\u00f6sterimlerdir. &#8220;Koyu mavi&#8221; herkesin kafas\u0131nda ba\u015fka bir tona kar\u015f\u0131l\u0131k gelir; <code>#1B3A6B<\/code> ise her cihazda ayn\u0131 talimatt\u0131r. Kodun g\u00f6revi, insan\u0131n belirsiz tarifini makinenin kesin talimat\u0131na \u00e7evirmektir.<\/p>\n<p>Birden fazla g\u00f6sterimin olmas\u0131 bir eksiklik de\u011fil, farkl\u0131 \u00fcretim ortamlar\u0131n\u0131n sonucudur. Ekran \u0131\u015f\u0131k yayar ve k\u0131rm\u0131z\u0131, ye\u015fil, mavi kanallar\u0131n\u0131 toplayarak renk \u00fcretir. Bask\u0131 ise \u0131\u015f\u0131\u011f\u0131 yans\u0131t\u0131r; k\u00e2\u011f\u0131d\u0131n \u00fcst\u00fcne m\u00fcrekkep koyar ve gelen \u0131\u015f\u0131\u011f\u0131n bir k\u0131sm\u0131n\u0131 so\u011furur. \u0130ki s\u00fcre\u00e7 fiziksel olarak z\u0131t \u00e7al\u0131\u015ft\u0131\u011f\u0131 i\u00e7in tek bir g\u00f6sterim ikisine birden yetmez.<\/p>\n<div class=\"highlight-box\">\n<p class=\"label\">Bilgi<\/p>\n<p>Ekran g\u00f6sterimleri toplamal\u0131 (additive) \u00e7al\u0131\u015f\u0131r: \u00fc\u00e7 kanal\u0131 da sonuna kadar a\u00e7arsan\u0131z beyaz elde edersiniz. Bask\u0131 g\u00f6sterimi \u00e7\u0131karmal\u0131 (subtractive) \u00e7al\u0131\u015f\u0131r: t\u00fcm m\u00fcrekkepleri \u00fcst \u00fcste koyarsan\u0131z koyu bir gri kal\u0131r, bu y\u00fczden ayr\u0131 bir siyah kanal eklenmi\u015ftir.<\/p>\n<\/div>\n<h2>HEX, RGB, HSL ve CMYK aras\u0131ndaki fark<\/h2>\n<table>\n<thead>\n<tr>\n<th>G\u00f6sterim<\/th>\n<th>Kullan\u0131m alan\u0131<\/th>\n<th>Avantaj\u0131<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>HEX (<code>#2E86DE<\/code>)<\/td>\n<td>Web, tasar\u0131m dosyalar\u0131, marka k\u0131lavuzu<\/td>\n<td>K\u0131sa ve kopyalamas\u0131 kolay; her ara\u00e7 tan\u0131r<\/td>\n<\/tr>\n<tr>\n<td>RGB \/ RGBA (<code>rgb(46 134 222)<\/code>)<\/td>\n<td>Ekran aray\u00fczleri, CSS, uygulama kodu<\/td>\n<td>Kanallar\u0131 tek tek ayarlan\u0131r; RGBA saydaml\u0131k ekler<\/td>\n<\/tr>\n<tr>\n<td>HSL \/ HSLA (<code>hsl(209 73% 53%)<\/code>)<\/td>\n<td>Tema \u00fcretimi, a\u00e7\u0131k ve koyu varyantlar<\/td>\n<td>Tonu sabit tutup a\u00e7\u0131kl\u0131\u011f\u0131 de\u011fi\u015ftirmek tek say\u0131yla olur<\/td>\n<\/tr>\n<tr>\n<td>CMYK (<code>75 40 0 13<\/code>)<\/td>\n<td>Matbaa, katalog, ambalaj, kartvizit<\/td>\n<td>M\u00fcrekkep y\u00fczdesini do\u011frudan anlat\u0131r, bask\u0131da \u00f6ng\u00f6r\u00fclebilir<\/td>\n<\/tr>\n<tr>\n<td>Adland\u0131r\u0131lm\u0131\u015f renk (<code>tomato<\/code>)<\/td>\n<td>H\u0131zl\u0131 deneme, prototip<\/td>\n<td>Hat\u0131rlamas\u0131 kolay; \u00fcretimde marka rengi yerine ge\u00e7mez<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>HEX ve RGB ayn\u0131 bilgiyi ta\u015f\u0131r, yaln\u0131zca yaz\u0131mlar\u0131 farkl\u0131d\u0131r: biri onalt\u0131l\u0131k, di\u011feri ondal\u0131k. HEX bi\u00e7iminin hangi hanesinin hangi kanala kar\u015f\u0131l\u0131k geldi\u011fini, \u00fc\u00e7 haneli k\u0131sa yaz\u0131m\u0131 ve sekiz haneli saydam bi\u00e7imi <a href=\"https:\/\/narhost.com\/blog\/hec-hex-kodu-nedir\/\" title=\"HEX kodu nedir \u2014 alt\u0131 hanenin okunmas\u0131 ve d\u00f6n\u00fc\u015f\u00fcm\u00fc\">HEX kodu yaz\u0131m\u0131zda<\/a> ayr\u0131nt\u0131l\u0131 ele ald\u0131k. Burada as\u0131l mesele hangi g\u00f6sterimin hangi i\u015fte kullan\u0131ld\u0131\u011f\u0131.<\/p>\n<p>HSL&#8217;nin ayr\u0131 bir de\u011feri var. Ton (hue) 0 ile 360 aras\u0131nda bir a\u00e7\u0131, doygunluk ve a\u00e7\u0131kl\u0131k ise y\u00fczdedir. Bir markan\u0131n ana rengini HSL ile yazarsan\u0131z, ayn\u0131 tonu koruyup a\u00e7\u0131kl\u0131\u011f\u0131 y\u00fczde 15 a\u015fa\u011f\u0131 \u00e7ekerek \u00fczerine gelme (hover) rengini, y\u00fczde 40 yukar\u0131 \u00e7ekerek arka plan tonunu \u00fcretebilirsiniz. HEX ile ayn\u0131 i\u015fi yapmak i\u00e7in \u00fc\u00e7 haneyi birden elle oynatman\u0131z gerekir.<\/p>\n<figure class=\"nh-sema\"><img loading=\"lazy\" src=\"https:\/\/narhost.com\/blog\/wp-content\/uploads\/2026\/09\/renk-kodlari-nedir-sema-narhost.webp\" alt=\"Renk kodlar\u0131 se\u00e7im \u015femas\u0131 \u2014 ekran i\u00e7in RGB tabanl\u0131, bask\u0131 i\u00e7in CMYK g\u00f6sterimi\" width=\"1200\" height=\"500\" loading=\"lazy\" decoding=\"async\"><figcaption>Renk kodlar\u0131 karar\u0131 d\u00f6rt ad\u0131mda: ortam\u0131 belirle, g\u00f6sterimi se\u00e7, paleti kur, kontrast\u0131 \u00f6l\u00e7.<\/figcaption><\/figure>\n<h2>Renk uzay\u0131 ne demek?<\/h2>\n<p>Renk uzay\u0131, bir g\u00f6sterimin hangi renk aral\u0131\u011f\u0131n\u0131 kapsad\u0131\u011f\u0131n\u0131 tan\u0131mlayan \u00e7er\u00e7evedir. Ayn\u0131 RGB \u00fc\u00e7l\u00fcs\u00fc, farkl\u0131 renk uzaylar\u0131nda g\u00f6zle g\u00f6r\u00fcl\u00fcr bi\u00e7imde farkl\u0131 bir renge kar\u015f\u0131l\u0131k gelebilir. Web&#8217;in varsay\u0131lan uzay\u0131 sRGB&#8217;dir; bu y\u00fczden sitede kulland\u0131\u011f\u0131n\u0131z kod her taray\u0131c\u0131da benzer g\u00f6r\u00fcn\u00fcr.<\/p>\n<p>Foto\u011fraf\u00e7\u0131l\u0131k ve bask\u0131 taraf\u0131nda daha geni\u015f uzaylar kullan\u0131l\u0131r. Geni\u015f uzayda haz\u0131rlanm\u0131\u015f bir g\u00f6rseli d\u00f6n\u00fc\u015ft\u00fcrmeden siteye koyarsan\u0131z renkler soluk \u00e7\u0131kar. CSS&#8217;in destekledi\u011fi renk bi\u00e7imlerinin ve uzaylar\u0131n g\u00fcncel listesini <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Color_space\" title=\"MDN renk uzay\u0131 s\u00f6zl\u00fc\u011f\u00fc \u2014 sRGB ve geni\u015f renk uzaylar\u0131\" target=\"_blank\" rel=\"noopener\">MDN renk uzay\u0131 s\u00f6zl\u00fc\u011f\u00fcnde<\/a> bulabilirsiniz.<\/p>\n<div class=\"warn-box\">\n<p class=\"label\">Dikkat<\/p>\n<p>Ekranda g\u00f6rd\u00fc\u011f\u00fcn\u00fcz parlak turuncuyu CMYK&#8217;ya \u00e7evirdi\u011finizde matbaadan daha mat bir ton \u00e7\u0131kar. Bu bir hata de\u011fil, m\u00fcrekkebin fiziksel s\u0131n\u0131r\u0131d\u0131r. Marka rengini se\u00e7erken karar\u0131 ekran \u00fczerinden verip bask\u0131y\u0131 sonra d\u00fc\u015f\u00fcnmek, katalo\u011fun ikinci bask\u0131s\u0131nda s\u00fcrpriz yarat\u0131r.<\/p>\n<\/div>\n<h2>Marka renk paleti nas\u0131l kurulur?<\/h2>\n<p>Palet, sevdi\u011finiz renklerin listesi de\u011fil, bir karar tablosudur. Her rengin bir g\u00f6revi olmal\u0131. Be\u015f grup \u00e7o\u011fu proje i\u00e7in yeterlidir.<\/p>\n<ul>\n<li><strong>Ana renk:<\/strong> logo, birincil buton, \u00f6nemli ba\u011flant\u0131lar. Tek bir kod.<\/li>\n<li><strong>\u0130kincil renk:<\/strong> vurgular, ikincil butonlar, grafik \u00f6\u011feler. Ana renkle \u00e7ak\u0131\u015fmayan, bir veya iki kod.<\/li>\n<li><strong>N\u00f6trler:<\/strong> arka plan, kenarl\u0131k, ayra\u00e7. \u00dc\u00e7 d\u00f6rt tonluk bir gri merdiveni.<\/li>\n<li><strong>Durum renkleri:<\/strong> ba\u015far\u0131 (ye\u015fil), uyar\u0131 (sar\u0131), hata (k\u0131rm\u0131z\u0131), bilgi (mavi). Anlamlar\u0131 k\u00fclt\u00fcrel olarak yerle\u015fiktir, de\u011fi\u015ftirmeyin.<\/li>\n<li><strong>Metin renkleri:<\/strong> ana metin, ikincil metin, pasif metin. Saf siyah yerine koyu gri daha yumu\u015fak okunur.<\/li>\n<\/ul>\n<p>Bu listeye bakt\u0131\u011f\u0131n\u0131zda toplam sekiz on kod \u00e7\u0131kar. Yeterlidir. Palet b\u00fcy\u00fcd\u00fck\u00e7e tutarl\u0131l\u0131k d\u00fc\u015fer; otuz renk kodu bar\u0131nd\u0131ran bir sistemde hi\u00e7 kimse hangi k\u0131rm\u0131z\u0131n\u0131n do\u011fru k\u0131rm\u0131z\u0131 oldu\u011funu bilemez.<\/p>\n<div class=\"senaryo-block\">\n<p class=\"label\">\u00d6rnek senaryo<\/p>\n<p>Bir mobilya \u00fcreticisi, \u00fc\u00e7 y\u0131l i\u00e7inde d\u00f6rt farkl\u0131 ajansla \u00e7al\u0131\u015fm\u0131\u015ft\u0131. Sitede yedi ayr\u0131 ye\u015fil, katalogda \u00fc\u00e7 farkl\u0131 CMYK kar\u015f\u0131l\u0131\u011f\u0131 vard\u0131. Paleti s\u0131f\u0131rdan kurdular: bir ana ye\u015fil, bir a\u00e7\u0131k ye\u015fil, d\u00f6rt n\u00f6tr gri, d\u00f6rt durum rengi. Her koda bir g\u00f6rev ad\u0131 verildi ve kimlik belgesine HEX ile CMYK kar\u015f\u0131l\u0131\u011f\u0131 yan yana yaz\u0131ld\u0131. Sonraki bask\u0131da matbaa d\u00f6n\u00fc\u015f\u00fcm sormad\u0131, sitede de renk tart\u0131\u015fmas\u0131 bitti.<\/p>\n<\/div>\n<h2>Kontrast oran\u0131 ve eri\u015filebilirlik<\/h2>\n<p>Renk se\u00e7imi estetik bir tercih gibi g\u00f6r\u00fcn\u00fcr ama okunabilirli\u011fi do\u011frudan belirler. Kontrast oran\u0131, metin rengi ile arka plan rengi aras\u0131ndaki ayd\u0131nl\u0131k fark\u0131n\u0131 1:1 ile 21:1 aras\u0131nda bir say\u0131ya \u00e7evirir. Beyaz \u00fcst\u00fcnde siyah 21:1, beyaz \u00fcst\u00fcnde a\u00e7\u0131k gri 1,5:1 civar\u0131ndad\u0131r.<\/p>\n<p>WCAG 2.2&#8217;nin AA seviyesi normal metinde en az 4,5:1, b\u00fcy\u00fck metinde (yakla\u015f\u0131k 24 piksel ve \u00fczeri, ya da 19 piksel kal\u0131n) en az 3:1 ister. AAA seviyesi bu de\u011ferleri 7:1 ve 4,5:1&#8217;e \u00e7\u0131kar\u0131r. Buton ve form kenarl\u0131klar\u0131 gibi aray\u00fcz \u00f6\u011feleri i\u00e7in de 3:1 s\u0131n\u0131r\u0131 ge\u00e7erlidir. \u00d6l\u00e7\u00fctlerin tamam\u0131 <a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/contrast-minimum.html\" title=\"W3C WCAG 2.2 asgari kontrast \u00f6l\u00e7\u00fct\u00fc\" target=\"_blank\" rel=\"noopener\">W3C&#8217;nin kontrast k\u0131lavuzunda<\/a> a\u00e7\u0131klanm\u0131\u015ft\u0131r.<\/p>\n<p>Pratikte en s\u0131k d\u00fc\u015f\u00fclen yer a\u00e7\u0131k gri metindir. Tasar\u0131mda zarif duran ikincil metin rengi, g\u00fcn \u0131\u015f\u0131\u011f\u0131nda telefon ekran\u0131nda okunmaz h\u00e2le gelir. Paleti kurarken her metin ve arka plan ikilisinin oran\u0131n\u0131 bir kez \u00f6l\u00e7\u00fcn, sonu\u00e7lar\u0131 kimlik belgesine yaz\u0131n.<\/p>\n<h2>Koyu tema i\u00e7in renk e\u015fleme<\/h2>\n<p>Koyu temay\u0131 a\u00e7\u0131k teman\u0131n renklerini ters \u00e7evirerek kurmak i\u015fe yaramaz. Koyu zeminde ayn\u0131 doygunlukta bir renk fazla parlak g\u00f6r\u00fcn\u00fcr ve g\u00f6z\u00fc yorar. Do\u011fru yakla\u015f\u0131m, her renk i\u00e7in bir koyu tema kar\u015f\u0131l\u0131\u011f\u0131 tan\u0131mlamakt\u0131r.<\/p>\n<p>\u00dc\u00e7 kural yeterli. Birincisi, arka plan saf siyah de\u011fil koyu gri olsun; saf siyah \u00fczerinde beyaz metin titre\u015fim yarat\u0131r. \u0130kincisi, ana rengin doygunlu\u011funu bir miktar d\u00fc\u015f\u00fcr\u00fcp a\u00e7\u0131kl\u0131\u011f\u0131n\u0131 art\u0131r\u0131n; HSL ile yazd\u0131\u011f\u0131n\u0131z renk kodlar\u0131 bu i\u015fi kolayla\u015ft\u0131r\u0131r. \u00dc\u00e7\u00fcnc\u00fcs\u00fc, kontrast oran\u0131n\u0131 koyu temada yeniden \u00f6l\u00e7\u00fcn, a\u00e7\u0131k temada ge\u00e7en bir ikili koyu temada s\u0131n\u0131fta kalabilir.<\/p>\n<h2>CSS de\u011fi\u015fkenleriyle renk kodlar\u0131n\u0131 tek yerden y\u00f6netmek<\/h2>\n<p>Renk kodlar\u0131n\u0131 stil dosyas\u0131n\u0131n i\u00e7ine da\u011f\u0131t\u0131rsan\u0131z, markan\u0131n mavisini de\u011fi\u015ftirmek y\u00fczlerce sat\u0131r\u0131 tek tek bulmak demektir. CSS \u00f6zel de\u011fi\u015fkenleri bu i\u015fi bir tan\u0131m blo\u011funa indirir: paleti bir kez yazars\u0131n\u0131z, kalan her yer o ad\u0131 \u00e7a\u011f\u0131r\u0131r.<\/p>\n<p>Kurulum \u015f\u00f6yle i\u015fler. K\u00f6k se\u00e7icide her renge bir g\u00f6rev ad\u0131 verirsiniz (<code>--renk-ana<\/code>, <code>--renk-metin<\/code>, <code>--renk-uyari<\/code>), sonra kurallar\u0131n i\u00e7inde do\u011frudan kodu de\u011fil bu ad\u0131 kullan\u0131rs\u0131n\u0131z. Koyu tema i\u00e7in ayn\u0131 adlar\u0131 farkl\u0131 de\u011ferlerle yeniden tan\u0131mlaman\u0131z yeterlidir; geri kalan kod de\u011fi\u015fmez. S\u00f6z diziminin ayr\u0131nt\u0131s\u0131 ve taray\u0131c\u0131 deste\u011fi <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Guides\/Cascading_variables\/Using_custom_properties\" title=\"MDN CSS \u00f6zel de\u011fi\u015fkenleri dok\u00fcman\u0131 \u2014 palet tan\u0131m\u0131 ve taray\u0131c\u0131 deste\u011fi\" target=\"_blank\" rel=\"noopener\">MDN \u00f6zel de\u011fi\u015fkenler dok\u00fcman\u0131nda<\/a> anlat\u0131l\u0131yor.<\/p>\n<p>WordPress kullan\u0131yorsan\u0131z bu tan\u0131mlar\u0131 alt tema ya da \u00f6zelle\u015ftirici \u00fczerinden eklemek en temiz yol; eklenti ayar panellerine da\u011f\u0131t\u0131lm\u0131\u015f renkler tema de\u011fi\u015fti\u011finde kaybolur. Tema ve eklenti y\u00fck\u00fcn\u00fcn site h\u0131z\u0131yla ili\u015fkisini <a href=\"https:\/\/narhost.com\/blog\/wordpress-icin-en-iyi-hosting-tercihi\/\" title=\"WordPress i\u00e7in en iyi hosting tercihi \u2014 tema ve eklenti y\u00fck\u00fcn\u00fcn etkisi\">WordPress hosting tercihi yaz\u0131m\u0131zda<\/a> ele ald\u0131k.<\/p>\n<h2>Renk kodunu nereden al\u0131rs\u0131n\u0131z ve s\u0131k yap\u0131lan hatalar<\/h2>\n<p>Kodu alman\u0131n en g\u00fcvenilir yolu kayna\u011f\u0131n kendisidir. Marka k\u0131lavuzu varsa tek do\u011fru oradad\u0131r. Yoksa tasar\u0131m dosyas\u0131ndaki renk se\u00e7icisi, taray\u0131c\u0131 geli\u015ftirici ara\u00e7lar\u0131n\u0131n renk damlal\u0131\u011f\u0131 ya da i\u015fletim sisteminin renk se\u00e7ici penceresi kodu verir. Ekran g\u00f6r\u00fcnt\u00fcs\u00fcnden damlal\u0131kla renk almak riskli bir y\u00f6ntemdir; s\u0131k\u0131\u015ft\u0131rma ve ekran profili de\u011feri kayd\u0131r\u0131r.<\/p>\n<p>Ald\u0131\u011f\u0131n\u0131z kodu bir yere yazmadan b\u0131rakmay\u0131n. Marka k\u0131lavuzunu, teknik dok\u00fcman\u0131 ya da bir i\u00e7 <a href=\"https:\/\/narhost.com\/blog\/makale-nedir\/\" title=\"Makale nedir \u2014 kurum i\u00e7i dok\u00fcmantasyon ve yaz\u0131m yakla\u015f\u0131m\u0131\">makale<\/a> bi\u00e7iminde kayda ge\u00e7irmek, alt\u0131 ay sonra &#8220;bu mavi hangisiydi&#8221; tart\u0131\u015fmas\u0131n\u0131 bitirir.<\/p>\n<ul class=\"kontrol-listesi\">\n<li>Paleti sekiz on kodla s\u0131n\u0131rlay\u0131n, her koda bir g\u00f6rev ad\u0131 verin.<\/li>\n<li>Her rengin HEX ve CMYK kar\u015f\u0131l\u0131\u011f\u0131n\u0131 kimlik belgesine yan yana yaz\u0131n.<\/li>\n<li>Metin ve arka plan ikililerinin kontrast oran\u0131n\u0131 \u00f6l\u00e7\u00fcn, 4,5:1 s\u0131n\u0131r\u0131n\u0131n alt\u0131na inmeyin.<\/li>\n<li>Ana rengi HSL ile de kaydedin; varyant \u00fcretmek kolayla\u015f\u0131r.<\/li>\n<li>Koyu tema i\u00e7in ayr\u0131 bir e\u015fleme tan\u0131mlay\u0131n, ters \u00e7evirmeyle yetinmeyin.<\/li>\n<li>Kodlar\u0131 CSS de\u011fi\u015fkenlerinde toplay\u0131n, stil dosyas\u0131na da\u011f\u0131tmay\u0131n.<\/li>\n<li>Bask\u0131ya gidecek g\u00f6rselleri sRGB d\u0131\u015f\u0131nda bir uzayda b\u0131rakmay\u0131n.<\/li>\n<li>Yeni bir renk eklemeden \u00f6nce mevcut paletle \u00e7\u00f6z\u00fcl\u00fcp \u00e7\u00f6z\u00fclmedi\u011fini sorun.<\/li>\n<\/ul>\n<div class=\"success-box\">\n<p class=\"label\">Sonu\u00e7<\/p>\n<p>Ekran i\u015fi RGB tabanl\u0131 g\u00f6sterimlerle, bask\u0131 i\u015fi CMYK ile y\u00fcr\u00fcr. Paleti dar tutun, her renge bir g\u00f6rev verin, kontrast oran\u0131n\u0131 \u00f6l\u00e7\u00fcn ve kodlar\u0131 CSS de\u011fi\u015fkenlerinde toplay\u0131n. Bu d\u00f6rt ad\u0131m uyguland\u0131\u011f\u0131nda renk tart\u0131\u015fmas\u0131 teknik bir konu olmaktan \u00e7\u0131kar.<\/p>\n<\/div>\n<div class=\"kb-faq\">\n<h2>S\u0131k\u00e7a sorulan sorular<\/h2>\n<h3>Renk kodlar\u0131 aras\u0131nda d\u00f6n\u00fc\u015f\u00fcm yaparken kay\u0131p olur mu?<\/h3>\n<p>HEX ile RGB aras\u0131nda kay\u0131p olmaz, ikisi ayn\u0131 bilgiyi ta\u015f\u0131r. HSL d\u00f6n\u00fc\u015f\u00fcm\u00fcnde ondal\u0131k yuvarlama nedeniyle \u00e7ok k\u00fc\u00e7\u00fck sapmalar \u00e7\u0131kabilir. As\u0131l kay\u0131p RGB&#8217;den CMYK&#8217;ya ge\u00e7erken olur; ekranda g\u00f6r\u00fcnen baz\u0131 parlak tonlar\u0131n m\u00fcrekkep kar\u015f\u0131l\u0131\u011f\u0131 yoktur, en yak\u0131n ton kullan\u0131l\u0131r.<\/p>\n<h3>Sitede HEX mi RGB mi kullanmal\u0131y\u0131m?<\/h3>\n<p>\u0130kisi de ge\u00e7erlidir. Sabit renkler i\u00e7in HEX k\u0131sa ve okunakl\u0131d\u0131r. Saydaml\u0131k gerekiyorsa RGBA veya HSLA kullan\u0131rs\u0131n\u0131z. Tema varyant\u0131 \u00fcretiyorsan\u0131z HSL en pratik olan\u0131d\u0131r. Karar teknik de\u011fil, ekibin okuma al\u0131\u015fkanl\u0131\u011f\u0131yla ilgilidir.<\/p>\n<h3>Kontrast oran\u0131n\u0131 nas\u0131l \u00f6l\u00e7erim?<\/h3>\n<p>Taray\u0131c\u0131 geli\u015ftirici ara\u00e7lar\u0131nda bir metin \u00f6\u011fesi se\u00e7ti\u011finizde renk kutusu oran\u0131 g\u00f6sterir ve AA ile AAA s\u0131n\u0131rlar\u0131n\u0131 i\u015faretler. Tasar\u0131m programlar\u0131n\u0131n eri\u015filebilirlik eklentileri de ayn\u0131 hesab\u0131 yapar. \u00d6l\u00e7\u00fcm\u00fc tasar\u0131m a\u015famas\u0131nda yapmak, yay\u0131na \u00e7\u0131kt\u0131ktan sonra d\u00fczeltmekten \u00e7ok daha ucuzdur.<\/p>\n<h3>Ka\u00e7 renk kullanmak do\u011fru?<\/h3>\n<p>Bir ana renk, bir iki ikincil renk, \u00fc\u00e7 d\u00f6rt n\u00f6tr ve d\u00f6rt durum rengi \u00e7o\u011fu site i\u00e7in yeterlidir. Renk say\u0131s\u0131 artt\u0131k\u00e7a hangi rengin ne anlama geldi\u011fi bulan\u0131kla\u015f\u0131r ve aray\u00fcz tutars\u0131z g\u00f6r\u00fcnmeye ba\u015flar.<\/p>\n<h3>Matbaaya HEX kodu g\u00f6ndersem olur mu?<\/h3>\n<p>Matbaa d\u00f6n\u00fc\u015f\u00fcm\u00fc kendi yapar ama sonucu siz g\u00f6rmeden onaylam\u0131\u015f olursunuz. Do\u011frusu, d\u00f6n\u00fc\u015f\u00fcm\u00fc ba\u015ftan yap\u0131p CMYK kar\u015f\u0131l\u0131\u011f\u0131n\u0131 kimlik belgesine yazmak ve m\u00fcmk\u00fcnse ilk bask\u0131da \u00f6rnek \u00e7\u0131kt\u0131 istemektir.<\/p>\n<\/div>\n<div class=\"cta-box\">\n<p class=\"label\">Narhost&#8217;ta<\/p>\n<p>WordPress hosting paketleri NVMe SSD disk, \u00fccretsiz SSL ve tek t\u0131kla kurulum ile geliyor; tema ve palet d\u00fczenlemelerinizi T\u00fcrk\u00e7e cPanel \u00fczerinden y\u00f6netebilirsiniz.<\/p>\n<p><a class=\"cta-btn\" href=\"https:\/\/narhost.com\/wordpress-hosting\" title=\"Narhost WordPress hosting paketleri\">WordPress hosting paketlerini incele<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Renk kodlar\u0131 nedir, HEX, RGB, RGBA, HSL, HSLA ve CMYK aras\u0131ndaki fark nerede ortaya \u00e7\u0131kar? Ekran ve bask\u0131 ayr\u0131m\u0131, marka paleti kurma, kontrast oran\u0131, koyu tema e\u015flemesi ve CSS de\u011fi\u015fkenleriyle paleti tek yerden y\u00f6netme.<\/p>\n","protected":false},"author":1,"featured_media":2344,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-522","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nedir"],"_links":{"self":[{"href":"https:\/\/narhost.com\/blog\/wp-json\/wp\/v2\/posts\/522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/narhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/narhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/narhost.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/narhost.com\/blog\/wp-json\/wp\/v2\/comments?post=522"}],"version-history":[{"count":5,"href":"https:\/\/narhost.com\/blog\/wp-json\/wp\/v2\/posts\/522\/revisions"}],"predecessor-version":[{"id":2343,"href":"https:\/\/narhost.com\/blog\/wp-json\/wp\/v2\/posts\/522\/revisions\/2343"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/narhost.com\/blog\/wp-json\/wp\/v2\/media\/2344"}],"wp:attachment":[{"href":"https:\/\/narhost.com\/blog\/wp-json\/wp\/v2\/media?parent=522"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/narhost.com\/blog\/wp-json\/wp\/v2\/categories?post=522"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/narhost.com\/blog\/wp-json\/wp\/v2\/tags?post=522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}