{"id":683,"date":"2026-09-15T17:59:58","date_gmt":"2026-09-15T17:59:58","guid":{"rendered":"https:\/\/www.vps.tc\/blog\/?p=683"},"modified":"2026-09-15T09:21:21","modified_gmt":"2026-09-15T09:21:21","slug":"renk-kodlari-nedir-en-cok-kullanilan-renk-kodlari","status":"publish","type":"post","link":"https:\/\/www.vps.tc\/blog\/tr\/renk-kodlari-nedir-en-cok-kullanilan-renk-kodlari\/","title":{"rendered":"Renk Kodlar\u0131 Nedir? En \u00c7ok Kullan\u0131lan Renk Kodlar\u0131"},"content":{"rendered":"<div class=\"aiw-toc\" style=\"border:1px solid #dbe3ea;border-radius:8px;padding:16px 20px;margin:0 0 28px\"><strong>\u0130\u00e7indekiler<\/strong><\/p>\n<ol style=\"margin:10px 0 0;padding-left:22px\">\n<li><a href=\"#renk-kodlari-nedir\">Renk kodlar\u0131 nedir?<\/a><\/li>\n<li><a href=\"#renk-kodlari-ne-ise-yarar\">Renk kodlar\u0131 ne i\u015fe yarar?<\/a><\/li>\n<li><a href=\"#en-cok-kullanilan-renk-kodlari-hangileridir\">En \u00e7ok kullan\u0131lan renk kodlar\u0131 hangileridir?<\/a><\/li>\n<li><a href=\"#hex-rgb-ve-hsl-arasindaki-fark-nedir\">HEX, RGB ve HSL aras\u0131ndaki fark nedir?<\/a><\/li>\n<li><a href=\"#css-renk-isimleri-nelerdir\">CSS renk isimleri nelerdir?<\/a><\/li>\n<li><a href=\"#cmyk-renk-kodu-ne-zaman-kullanilir\">CMYK renk kodu ne zaman kullan\u0131l\u0131r?<\/a><\/li>\n<li><a href=\"#ansi-renk-kodlari-terminalde-nasil-kullanilir\">ANSI renk kodlar\u0131 terminalde nas\u0131l kullan\u0131l\u0131r?<\/a><\/li>\n<li><a href=\"#renk-secerken-kontrast-neden-onemlidir\">Renk se\u00e7erken kontrast neden \u00f6nemlidir?<\/a><\/li>\n<li><a href=\"#bir-rengin-kodu-nasil-bulunur-ve-donusturulur\">Bir rengin kodu nas\u0131l bulunur ve d\u00f6n\u00fc\u015ft\u00fcr\u00fcl\u00fcr?<\/a><\/li>\n<li><a href=\"#renk-kodlariyla-calisirken-sik-yapilan-hatalar\">Renk kodlar\u0131yla \u00e7al\u0131\u015f\u0131rken s\u0131k yap\u0131lan hatalar<\/a><\/li>\n<li><a href=\"#web-sitesi-icin-hangi-renk-kodu-secilmeli\">Web sitesi i\u00e7in hangi renk kodu se\u00e7ilmeli?<\/a><\/li>\n<li><a href=\"#sik-sorulan-sorular\">S\u0131k Sorulan Sorular<\/a><\/li>\n<li><a href=\"#kaynaklar\">Kaynaklar<\/a><\/li>\n<\/ol>\n<\/div>\n<h2 id=\"renk-kodlari-nedir\">Renk kodlar\u0131 nedir?<\/h2>\n<p>Bir rengi ekranda g\u00f6z\u00fcm\u00fczle se\u00e7mek kolayd\u0131r; ayn\u0131 rengi CSS dosyas\u0131na aktar\u0131rken i\u015f biraz daha kesinlik ister. Renk kodlar\u0131, renkleri bilgisayarlar\u0131n ve tasar\u0131m ara\u00e7lar\u0131n\u0131n anlayaca\u011f\u0131 say\u0131sal ya da metinsel bi\u00e7imde ifade eder.<\/p>\n<p>Web sitelerinde en s\u0131k HEX, RGB ve HSL g\u00f6sterimleriyle kar\u015f\u0131la\u015f\u0131r\u0131z. Bask\u0131 i\u015flerinde CMYK, terminal \u00e7\u0131kt\u0131lar\u0131nda ise ANSI ka\u00e7\u0131\u015f kodlar\u0131 kullan\u0131l\u0131r. Ayn\u0131 renk, se\u00e7ilen renk modeline g\u00f6re farkl\u0131 bir kodla yaz\u0131labilir.<\/p>\n<h2 id=\"renk-kodlari-ne-ise-yarar\">Renk kodlar\u0131 ne i\u015fe yarar?<\/h2>\n<p>Bir web sitesinin koyu mavi men\u00fcs\u00fcn\u00fc ba\u015fka bir sayfada tekrar kullanacaksan\u0131z <code>#123B5D<\/code> gibi bir HEX de\u011feri, rengi g\u00f6z karar\u0131yla yeniden se\u00e7mekten daha g\u00fcvenilirdir. Tasar\u0131mc\u0131, frontend geli\u015ftirici ve i\u00e7erik y\u00f6neticisi ayn\u0131 kod \u00fczerinden \u00e7al\u0131\u015f\u0131r. B\u00f6ylece &#8220;biraz daha a\u00e7\u0131k mavi&#8221; gibi yoruma a\u00e7\u0131k tarifler azal\u0131r.<\/p>\n<p>CSS i\u00e7inde renkler isimle, HEX g\u00f6sterimiyle, RGB veya HSL i\u015flevleriyle tan\u0131mlanabilir. G\u00fcnl\u00fck web i\u015flerinde birka\u00e7 temel g\u00f6sterim \u00e7o\u011fu ihtiyac\u0131 kar\u015f\u0131lar. Daha geli\u015fmi\u015f CSS renk uzaylar\u0131 da var; fakat her projede en yeni s\u00f6zdizimini kullanmak zorunda de\u011filsiniz.<\/p>\n<ul>\n<li><strong>Web aray\u00fczleri:<\/strong> Arka plan, metin, kenarl\u0131k ve buton renklerini tan\u0131mlamak.<\/li>\n<li><strong>Grafik tasar\u0131m:<\/strong> Marka renklerini farkl\u0131 dosyalarda tutarl\u0131 bi\u00e7imde kullanmak.<\/li>\n<li><strong>Terminal ve log ekranlar\u0131:<\/strong> Hata, uyar\u0131 ve ba\u015far\u0131 durumlar\u0131n\u0131 ay\u0131rt etmek.<\/li>\n<li><strong>Bask\u0131:<\/strong> Ekrandaki rengin k\u00e2\u011f\u0131t \u00fczerindeki kar\u015f\u0131l\u0131\u011f\u0131n\u0131 belirlemek.<\/li>\n<li><strong>Eri\u015filebilirlik:<\/strong> Metin ile arka plan aras\u0131ndaki kontrast\u0131 \u00f6l\u00e7mek.<\/li>\n<\/ul>\n<h2 id=\"en-cok-kullanilan-renk-kodlari-hangileridir\">En \u00e7ok kullan\u0131lan renk kodlar\u0131 hangileridir?<\/h2>\n<p>HEX, RGB ve HSL ekranlardaki \u0131\u015f\u0131k temelli renk \u00fcretimini ifade eder. CMYK ise bask\u0131daki m\u00fcrekkep bile\u015fenlerine dayan\u0131r. Bu ayr\u0131m k\u00fc\u00e7\u00fck g\u00f6r\u00fcn\u00fcr, fakat web i\u00e7in haz\u0131rlanm\u0131\u015f canl\u0131 bir rengi do\u011frudan bask\u0131ya g\u00f6ndermek beklenmedik bir sonu\u00e7 verebilir.<\/p>\n<table>\n<thead>\n<tr>\n<th>Renk sistemi<\/th>\n<th>\u00d6rnek<\/th>\n<th>En yayg\u0131n kullan\u0131m<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>HEX<\/td>\n<td><code>#3498DB<\/code><\/td>\n<td>HTML ve CSS<\/td>\n<\/tr>\n<tr>\n<td>RGB<\/td>\n<td><code>rgb(52, 152, 219)<\/code><\/td>\n<td>Ekran ve CSS<\/td>\n<\/tr>\n<tr>\n<td>RGBA<\/td>\n<td><code>rgba(52, 152, 219, 0.5)<\/code><\/td>\n<td>Saydam renkler<\/td>\n<\/tr>\n<tr>\n<td>HSL<\/td>\n<td><code>hsl(204, 70%, 53%)<\/code><\/td>\n<td>Ton ve a\u00e7\u0131kl\u0131k ayar\u0131<\/td>\n<\/tr>\n<tr>\n<td>CMYK<\/td>\n<td><code>76, 31, 0, 14<\/code><\/td>\n<td>Bask\u0131<\/td>\n<\/tr>\n<tr>\n<td>Named color<\/td>\n<td><code>cornflowerblue<\/code><\/td>\n<td>Basit CSS kullan\u0131m\u0131<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>HEX renk kodu nedir?<\/h3>\n<p>HEX, hexadecimal yani onalt\u0131l\u0131k say\u0131 sistemine dayanan bir renk g\u00f6sterimidir. Web geli\u015ftiricilerin s\u0131k kulland\u0131\u011f\u0131 alt\u0131 karakterli bi\u00e7imde ilk iki karakter k\u0131rm\u0131z\u0131, sonraki iki karakter ye\u015fil, son iki karakter mavi kanal\u0131n de\u011ferini belirtir.<\/p>\n<p><code>#RRGGBB<\/code> bi\u00e7imini \u015f\u00f6yle okuyabilirsiniz:<\/p>\n<ul>\n<li><code>RR<\/code>: K\u0131rm\u0131z\u0131 kanal.<\/li>\n<li><code>GG<\/code>: Ye\u015fil kanal.<\/li>\n<li><code>BB<\/code>: Mavi kanal.<\/li>\n<\/ul>\n<p>Her kanal <code>00<\/code> ile <code>FF<\/code> aras\u0131nda de\u011fer al\u0131r. <code>00<\/code> o kanal\u0131n kapal\u0131, <code>FF<\/code> ise tam g\u00fc\u00e7te oldu\u011funu g\u00f6sterir. Bu nedenle <code>#000000<\/code> siyah, <code>#FFFFFF<\/code> beyazd\u0131r. <code>#FF0000<\/code> yaln\u0131zca k\u0131rm\u0131z\u0131 kanal\u0131n a\u00e7\u0131k oldu\u011fu saf k\u0131rm\u0131z\u0131d\u0131r.<\/p>\n<p>CSS i\u00e7inde basit bir kullan\u0131m \u015f\u00f6yle g\u00f6r\u00fcn\u00fcr:<\/p>\n<pre><code>body {\n  background-color: #f4f6f8;\n  color: #1f2933;\n}\n\n.button-primary {\n  background-color: #2563eb;\n  color: #ffffff;\n}<\/code><\/pre>\n<p>Burada a\u00e7\u0131k gri arka plan ve koyu metin birlikte kullan\u0131l\u0131yor. Beyaz metnin mavi buton \u00fczerinde okunup okunmad\u0131\u011f\u0131n\u0131 ayr\u0131ca kontrast kontrol\u00fcyle do\u011frulamak gerekir; rengin g\u00fczel g\u00f6r\u00fcnmesi tek ba\u015f\u0131na yeterli de\u011fildir.<\/p>\n<h3>\u00dc\u00e7 karakterli HEX kodlar\u0131<\/h3>\n<p>CSS, baz\u0131 HEX de\u011ferlerinin k\u0131sa yaz\u0131lmas\u0131na izin verir. <code>#RGB<\/code> bi\u00e7imindeki her karakter iki kez tekrarlanarak alt\u0131 karakterli kar\u015f\u0131l\u0131\u011fa \u00e7evrilir. <code>#369<\/code>, <code>#336699<\/code> ile ayn\u0131d\u0131r.<\/p>\n<p>K\u0131sa bi\u00e7im h\u0131zl\u0131 denemelerde i\u015f g\u00f6r\u00fcr. Marka renklerinde ise tam alt\u0131 karakterli g\u00f6sterimi tercih ederim; dosyay\u0131 okuyan ki\u015finin de\u011feri ilk bak\u0131\u015fta anlamas\u0131 daha kolay olur.<\/p>\n<h3>RGB ve RGBA renk kodlar\u0131<\/h3>\n<p>RGB, k\u0131rm\u0131z\u0131, ye\u015fil ve mavi kanallar\u0131n birle\u015fimidir. Her kanal genellikle <code>0<\/code> ile <code>255<\/code> aras\u0131nda ifade edilir. <code>rgb(255, 0, 0)<\/code> k\u0131rm\u0131z\u0131, <code>rgb(0, 0, 0)<\/code> siyah, <code>rgb(255, 255, 255)<\/code> beyazd\u0131r.<\/p>\n<pre><code>.notice {\n  background-color: rgb(255, 243, 205);\n  color: rgb(102, 77, 3);\n}\n\n.overlay {\n  background-color: rgba(0, 0, 0, 0.65);\n}<\/code><\/pre>\n<p><code>rgba()<\/code> i\u00e7indeki d\u00f6rd\u00fcnc\u00fc de\u011fer alfa kanal\u0131n\u0131 belirtir. <code>0<\/code> tamamen saydam, <code>1<\/code> tamamen opak anlam\u0131na gelir. Buradaki <code>0.65<\/code>, siyah katman\u0131n y\u00fczde 65 opakl\u0131kla uygulanaca\u011f\u0131n\u0131 anlat\u0131r.<\/p>\n<p>HEX ile RGB aras\u0131nda d\u00f6n\u00fc\u015f\u00fcm yapman\u0131z gerekirse bir \u00e7evrim arac\u0131 kullanabilirsiniz. Temel mant\u0131\u011f\u0131 bilmek hata ay\u0131klarken yine de i\u015fimi kolayla\u015ft\u0131r\u0131yor. \u00d6rne\u011fin <code>#336699<\/code> de\u011ferinin RGB kar\u015f\u0131l\u0131\u011f\u0131 <code>rgb(51, 102, 153)<\/code> olur. Onalt\u0131l\u0131k <code>33<\/code>, onluk sistemde 51&#8217;e; <code>66<\/code>, 102&#8217;ye; <code>99<\/code>, 153&#8217;e kar\u015f\u0131l\u0131k gelir.<\/p>\n<h3>HSL renk kodu nas\u0131l \u00e7al\u0131\u015f\u0131r?<\/h3>\n<p>HSL, rengi insan\u0131n tarif etmeye daha yak\u0131n oldu\u011fu \u00fc\u00e7 bile\u015fenle ifade eder:<\/p>\n<ul>\n<li><strong>Hue:<\/strong> Ton. Derece cinsinden 0 ile 360 aras\u0131nda tan\u0131mlan\u0131r.<\/li>\n<li><strong>Saturation:<\/strong> Doygunluk. Y\u00fczde olarak ifade edilir.<\/li>\n<li><strong>Lightness:<\/strong> A\u00e7\u0131kl\u0131k. Y\u00fczde olarak ifade edilir.<\/li>\n<\/ul>\n<p><code>hsl(210, 60%, 50%)<\/code> \u00f6rne\u011finde 210 derece maviye yak\u0131n bir tonu, y\u00fczde 60 doygunlu\u011fu ve y\u00fczde 50 a\u00e7\u0131kl\u0131\u011f\u0131 belirtir. Ayn\u0131 tonun daha soluk bir versiyonunu olu\u015fturmak i\u00e7in ton de\u011ferini de\u011fi\u015ftirmek yerine doygunlu\u011fu azaltabilirsiniz.<\/p>\n<pre><code>:root {\n  --brand: hsl(210, 70%, 45%);\n  --brand-light: hsl(210, 70%, 92%);\n  --brand-dark: hsl(210, 70%, 25%);\n}\n\n.card {\n  border-color: var(--brand);\n  background: var(--brand-light);\n  color: var(--brand-dark);\n}<\/code><\/pre>\n<p>CSS de\u011fi\u015fkenleriyle birlikte HSL kullanmak, ayn\u0131 rengin a\u00e7\u0131k ve koyu varyasyonlar\u0131n\u0131 y\u00f6netirken kullan\u0131\u015fl\u0131d\u0131r. Ben \u00f6zellikle dashboard aray\u00fczlerinde bu y\u00f6ntemi tercih ediyorum. Ton sabit kal\u0131yor, a\u00e7\u0131kl\u0131k kontroll\u00fc bi\u00e7imde de\u011fi\u015fiyor.<\/p>\n<h2 id=\"hex-rgb-ve-hsl-arasindaki-fark-nedir\">HEX, RGB ve HSL aras\u0131ndaki fark nedir?<\/h2>\n<p>\u00dc\u00e7\u00fc de ekran renklerini tan\u0131mlamak i\u00e7in kullan\u0131labilir. Fark, rengi nas\u0131l tarif ettiklerindedir. HEX k\u0131sa ve ta\u015f\u0131nabilirdir; tasar\u0131m dosyalar\u0131nda, CSS&#8217;te ve marka k\u0131lavuzlar\u0131nda s\u0131k g\u00f6r\u00fcl\u00fcr. RGB kanallar\u0131 do\u011frudan g\u00f6sterir. HSL ise bir rengin tonunu, doygunlu\u011funu ve a\u00e7\u0131kl\u0131\u011f\u0131n\u0131 ayr\u0131 ayr\u0131 de\u011fi\u015ftirmeyi kolayla\u015ft\u0131r\u0131r.<\/p>\n<table>\n<thead>\n<tr>\n<th>\u00d6zellik<\/th>\n<th>HEX<\/th>\n<th>RGB<\/th>\n<th>HSL<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Okuma bi\u00e7imi<\/td>\n<td>Onalt\u0131l\u0131k kanallar<\/td>\n<td>K\u0131rm\u0131z\u0131, ye\u015fil, mavi<\/td>\n<td>Ton, doygunluk, a\u00e7\u0131kl\u0131k<\/td>\n<\/tr>\n<tr>\n<td>Saydaml\u0131k<\/td>\n<td>Alfa i\u00e7in 8 karakterli bi\u00e7im kullan\u0131labilir<\/td>\n<td>RGBA ile var<\/td>\n<td>HSLA veya modern CSS s\u00f6zdizimiyle var<\/td>\n<\/tr>\n<tr>\n<td>Renk varyasyonu<\/td>\n<td>Elle de\u011fi\u015ftirmek daha zahmetli<\/td>\n<td>Kanal de\u011ferleri de\u011fi\u015ftirilir<\/td>\n<td>A\u00e7\u0131kl\u0131k ve doygunluk do\u011frudan ayarlan\u0131r<\/td>\n<\/tr>\n<tr>\n<td>Yayg\u0131n kullan\u0131m<\/td>\n<td>Marka ve CSS renkleri<\/td>\n<td>Programatik renk i\u015flemleri<\/td>\n<td>Tema ve aray\u00fcz varyasyonlar\u0131<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Tek bir &#8220;en iyi&#8221; sistem yok. Bir tasar\u0131m dosyas\u0131ndaki sabit renk i\u00e7in HEX, dinamik bir aray\u00fcz temas\u0131nda HSL, g\u00f6r\u00fcnt\u00fc i\u015fleme kodunda RGB daha uygun olabilir. CSS dosyas\u0131nda hepsini kar\u0131\u015ft\u0131rmak teknik olarak m\u00fcmk\u00fcn; ekip i\u00e7inde bir standart belirlemek bak\u0131m maliyetini azalt\u0131r.<\/p>\n<h2 id=\"css-renk-isimleri-nelerdir\">CSS renk isimleri nelerdir?<\/h2>\n<p>CSS, baz\u0131 renkleri do\u011frudan \u0130ngilizce isimleriyle tan\u0131r. <code>red<\/code>, <code>blue<\/code>, <code>green<\/code>, <code>black<\/code>, <code>white<\/code>, <code>gray<\/code> ve <code>transparent<\/code> en bilinen \u00f6rneklerdir. <code>cornflowerblue<\/code>, <code>rebeccapurple<\/code> ve <code>tomato<\/code> gibi daha fazla isim de kullan\u0131labilir.<\/p>\n<pre><code>.success {\n  color: white;\n  background-color: seagreen;\n}\n\n.warning {\n  color: #664d03;\n  background-color: gold;\n}<\/code><\/pre>\n<p>\u0130sim kullan\u0131m\u0131 h\u0131zl\u0131 denemelerde okunakl\u0131d\u0131r. Proje b\u00fcy\u00fcd\u00fc\u011f\u00fcnde <code>lightblue<\/code> ad\u0131n\u0131n ger\u00e7ekten hangi mavi oldu\u011funu hat\u0131rlamak zorla\u015fabilir. Bu nedenle \u00fcretim projelerinde CSS de\u011fi\u015fkenlerini ve a\u00e7\u0131k\u00e7a tan\u0131mlanm\u0131\u015f renk de\u011ferlerini tercih ediyorum.<\/p>\n<h2 id=\"cmyk-renk-kodu-ne-zaman-kullanilir\">CMYK renk kodu ne zaman kullan\u0131l\u0131r?<\/h2>\n<p>CMYK; cyan, magenta, yellow ve key\/black bile\u015fenlerinden olu\u015fur. Ekranlar \u0131\u015f\u0131k yayarak RGB mant\u0131\u011f\u0131yla \u00e7al\u0131\u015f\u0131r, yaz\u0131c\u0131lar ise m\u00fcrekkep kullan\u0131r. Bu y\u00fczden bir web sitesinde canl\u0131 g\u00f6r\u00fcnen turuncu, bask\u0131ya g\u00f6nderildi\u011finde daha mat g\u00f6r\u00fcnebilir.<\/p>\n<p>Bir matbaa dosyas\u0131 haz\u0131rl\u0131yorsan\u0131z tasar\u0131m arac\u0131n\u0131n kulland\u0131\u011f\u0131 renk profilini, bask\u0131 makinesinin beklentisini ve k\u00e2\u011f\u0131t t\u00fcr\u00fcn\u00fc kontrol etmelisiniz. Sadece RGB de\u011ferini CMYK&#8217;ye \u00e7evirmek her zaman g\u00f6rsel olarak ayn\u0131 sonucu vermez. Kurumsal logo gibi renk hassasiyeti y\u00fcksek i\u015flerde bask\u0131 provas\u0131n\u0131 g\u00f6rmeden dosyay\u0131 g\u00f6ndermek risklidir.<\/p>\n<h2 id=\"ansi-renk-kodlari-terminalde-nasil-kullanilir\">ANSI renk kodlar\u0131 terminalde nas\u0131l kullan\u0131l\u0131r?<\/h2>\n<p>Terminal \u00e7\u0131kt\u0131lar\u0131ndaki renkler web renklerinden farkl\u0131 bir katmandad\u0131r. ANSI ka\u00e7\u0131\u015f kodlar\u0131, terminale metnin rengini veya bi\u00e7imini de\u011fi\u015ftirmesini s\u00f6yler. Bash i\u00e7inde k\u0131rm\u0131z\u0131 yaz\u0131 \u00fcretmek i\u00e7in \u015fu kod kullan\u0131labilir:<\/p>\n<pre><code>printf '33[31mHata33[0mn'\nprintf '33[32mBa\u015far\u0131l\u013133[0mn'<\/code><\/pre>\n<p><code>31<\/code> k\u0131rm\u0131z\u0131, <code>32<\/code> ye\u015fil, <code>0<\/code> ise bi\u00e7imlendirmeyi s\u0131f\u0131rlar. S\u0131f\u0131rlama kodunu unutursan\u0131z terminaldeki sonraki \u00e7\u0131kt\u0131lar da ayn\u0131 renkte kalabilir.<\/p>\n<p>Ben bunu bir bak\u0131m scriptinde ya\u015fam\u0131\u015ft\u0131m. Komut hata vermemi\u015fti ama SSH oturumunun geri kalan\u0131 k\u0131rm\u0131z\u0131 g\u00f6r\u00fcn\u00fcyordu. Sorun sunucuda de\u011fil, \u00e7\u0131kt\u0131y\u0131 s\u0131f\u0131rlamay\u0131 unuttu\u011fum iki karakterdeydi.<\/p>\n<p>Terminal renkleri servis kontrol scriptlerinde de yararl\u0131 olabilir:<\/p>\n<pre><code>if systemctl is-active --quiet nginx; then\n  printf '33[32mnginx \u00e7al\u0131\u015f\u0131yor33[0mn'\nelse\n  printf '33[31mnginx \u00e7al\u0131\u015fm\u0131yor33[0mn'\nfi<\/code><\/pre>\n<p>Renk, metnin yerini tutmaz. Renk k\u00f6rl\u00fc\u011f\u00fc olan kullan\u0131c\u0131lar veya renkleri kapal\u0131 terminaller i\u00e7in &#8220;\u00e7al\u0131\u015f\u0131yor&#8221; ve &#8220;\u00e7al\u0131\u015fm\u0131yor&#8221; gibi ifadeleri mutlaka yazd\u0131r\u0131n.<\/p>\n<h2 id=\"renk-secerken-kontrast-neden-onemlidir\">Renk se\u00e7erken kontrast neden \u00f6nemlidir?<\/h2>\n<p>Bir rengin g\u00fczel g\u00f6r\u00fcnmesi, metnin okunabildi\u011fi anlam\u0131na gelmez. A\u00e7\u0131k gri zemin \u00fczerinde ince beyaz metin tasar\u0131m ekran\u0131nda zarif durabilir; ger\u00e7ek kullan\u0131c\u0131 i\u00e7in yorucu olur. WCAG y\u00f6nergeleri metin ile arka plan aras\u0131ndaki kontrast\u0131n \u00f6l\u00e7\u00fclmesini \u00f6nerir. Normal metin i\u00e7in yayg\u0131n AA hedefi en az 4.5:1, b\u00fcy\u00fck metin i\u00e7in 3:1 kontrast oran\u0131d\u0131r.<\/p>\n<p>Bu oranlar\u0131 g\u00f6z karar\u0131yla g\u00fcvenilir bi\u00e7imde de\u011ferlendiremeyiz. Bir kontrast denetleyicisi kullan\u0131n ve normal, hover, focus, disabled gibi durumlar\u0131 ayr\u0131 ayr\u0131 kontrol edin. Form hata mesajlar\u0131nda yaln\u0131zca k\u0131rm\u0131z\u0131 renge g\u00fcvenmeyin; metin veya simgeyle de hatay\u0131 a\u00e7\u0131k\u00e7a anlat\u0131n.<\/p>\n<p>Renk paletimi kontrol ederken genellikle \u015fu s\u0131ray\u0131 izliyorum:<\/p>\n<ol>\n<li>Arka plan ve normal metin kontrast\u0131n\u0131 \u00f6l\u00e7erim.<\/li>\n<li>Buton metnini ayr\u0131 test ederim.<\/li>\n<li>Linklerin yaln\u0131zca renkle de\u011fil, alt \u00e7izgi veya ba\u015fka bir i\u015faretle ay\u0131rt edilip edilmedi\u011fine bakar\u0131m.<\/li>\n<li>Odak durumunun klavye kullan\u0131c\u0131lar\u0131 taraf\u0131ndan g\u00f6r\u00fclebildi\u011fini kontrol ederim.<\/li>\n<li>Koyu tema varsa b\u00fct\u00fcn kontrolleri yeniden yapar\u0131m.<\/li>\n<\/ol>\n<h2 id=\"bir-rengin-kodu-nasil-bulunur-ve-donusturulur\">Bir rengin kodu nas\u0131l bulunur ve d\u00f6n\u00fc\u015ft\u00fcr\u00fcl\u00fcr?<\/h2>\n<p>Bir web sitesindeki rengin kodunu bulman\u0131n pratik yolu taray\u0131c\u0131 geli\u015ftirici ara\u00e7lar\u0131n\u0131 a\u00e7makt\u0131r. \u00d6\u011feyi se\u00e7in, <code>Styles<\/code> veya <code>Computed<\/code> b\u00f6l\u00fcm\u00fcnde <code>color<\/code>, <code>background-color<\/code> ve <code>border-color<\/code> \u00f6zelliklerini inceleyin. Taray\u0131c\u0131 \u00e7o\u011fu zaman de\u011feri HEX, RGB veya HSL bi\u00e7imlerinden biriyle g\u00f6sterir.<\/p>\n<p>Komut sat\u0131r\u0131nda renk d\u00f6n\u00fc\u015f\u00fcm\u00fc yapman\u0131z gerekiyorsa kulland\u0131\u011f\u0131n\u0131z arac\u0131n renk uzay\u0131n\u0131 a\u00e7\u0131k\u00e7a kontrol edin. RGB ile HSL aras\u0131nda d\u00f6n\u00fc\u015f\u00fcm matematiksel olarak yap\u0131labilir; CMYK d\u00f6n\u00fc\u015f\u00fcm\u00fcnde ise renk profili sonucu etkiler. Ayn\u0131 kodun ba\u015fka formatta yaz\u0131lmas\u0131 ile bask\u0131da birebir ayn\u0131 g\u00f6r\u00fcnen renk ayn\u0131 \u015fey de\u011fildir.<\/p>\n<p>CSS taraf\u0131nda modern s\u00f6zdizimiyle alfa de\u011ferini e\u011fik \u00e7izgi kullanarak da belirtebilirsiniz:<\/p>\n<pre><code>.modal-backdrop {\n  background-color: rgb(0 0 0 \/ 65%);\n}<\/code><\/pre>\n<p>Bu kullan\u0131m g\u00fcncel taray\u0131c\u0131larda desteklenir. Eski taray\u0131c\u0131 deste\u011fi gereken projelerde hedef ortam\u0131 kontrol etmeden s\u00f6zdizimini de\u011fi\u015ftirmeyin.<\/p>\n<h2 id=\"renk-kodlariyla-calisirken-sik-yapilan-hatalar\">Renk kodlar\u0131yla \u00e7al\u0131\u015f\u0131rken s\u0131k yap\u0131lan hatalar<\/h2>\n<ul>\n<li><strong>HEX de\u011ferini yanl\u0131\u015f kopyalamak:<\/strong> <code>#1A2B3C<\/code> ile <code>#1A2C3B<\/code> aras\u0131ndaki fark g\u00f6zle zor anla\u015f\u0131labilir.<\/li>\n<li><strong>RGB ve CMYK&#8217;yi ayn\u0131 sanmak:<\/strong> Biri ekran, di\u011feri bask\u0131 odakl\u0131d\u0131r.<\/li>\n<li><strong>Kontrast\u0131 test etmemek:<\/strong> Tasar\u0131m karar\u0131 eri\u015filebilirlik testinin yerine ge\u00e7mez.<\/li>\n<li><strong>Saydaml\u0131k katmanlar\u0131n\u0131 hesaba katmamak:<\/strong> RGBA veya HSLA de\u011feri, alt\u0131ndaki zemine g\u00f6re farkl\u0131 g\u00f6r\u00fcn\u00fcr.<\/li>\n<li><strong>Rengi sadece ismiyle tan\u0131mlamak:<\/strong> <code>gray<\/code> gibi isimler ekip i\u00e7inde belirsizli\u011fe yol a\u00e7abilir.<\/li>\n<li><strong>Dark mode&#8217;u sonradan d\u00fc\u015f\u00fcnmek:<\/strong> A\u00e7\u0131k temada \u00e7al\u0131\u015fan renkler koyu zeminde okunmayabilir.<\/li>\n<\/ul>\n<p>Bir aray\u00fczde renk de\u011fi\u015fikli\u011fi yapt\u0131\u011f\u0131n\u0131zda yaln\u0131zca ana sayfaya bakmay\u0131n. Hata, ba\u015far\u0131, uyar\u0131, y\u00fckleniyor, hover ve focus durumlar\u0131n\u0131 da a\u00e7\u0131n. Terminal scriptimde yapt\u0131\u011f\u0131m k\u00fc\u00e7\u00fck ANSI hatas\u0131 bana bunu tekrar hat\u0131rlatt\u0131: renk yaln\u0131zca dekorasyon de\u011fildir, durum bilgisinin bir par\u00e7as\u0131d\u0131r. Metin kar\u015f\u0131l\u0131\u011f\u0131n\u0131 da yazmad\u0131\u011f\u0131n\u0131zda renk kayboldu\u011fu anda bilgi de kaybolur.<\/p>\n<p>HTML yap\u0131s\u0131ndaki ba\u015fl\u0131klar\u0131n anlam\u0131n\u0131 ayr\u0131ca \u00f6\u011frenmek isterseniz <a href=\"https:\/\/www.vps.tc\/blog\/tr\/title-ne-demek-title-etiketi-ne-ise-yarar\/\">Title Ne Demek? Title Etiketi Ne Ama\u00e7la Kullan\u0131l\u0131r?<\/a> ba\u015fl\u0131\u011f\u0131, sayfa ba\u015fl\u0131\u011f\u0131 ile g\u00f6rsel renk tercihinin birbirine kar\u0131\u015ft\u0131r\u0131lmamas\u0131 a\u00e7\u0131s\u0131ndan yararl\u0131 bir ba\u015flang\u0131\u00e7t\u0131r. Terminal otomasyonu taraf\u0131nda ise <a href=\"https:\/\/www.vps.tc\/blog\/tr\/bash-script-nedir-linux-otomasyonu-rehberi\/\">Bash Script Nedir? Linux Otomasyonu Rehberi<\/a> i\u00e7indeki \u00f6rnekler, renkli \u00e7\u0131kt\u0131 \u00fcreten bak\u0131m komutlar\u0131n\u0131 d\u00fczenlerken i\u015finize yarayabilir.<\/p>\n<h2 id=\"web-sitesi-icin-hangi-renk-kodu-secilmeli\">Web sitesi i\u00e7in hangi renk kodu se\u00e7ilmeli?<\/h2>\n<p>Sabit bir marka rengi tan\u0131ml\u0131yorsan\u0131z HEX ile ba\u015flayabilirsiniz. Rengin a\u00e7\u0131k ve koyu varyasyonlar\u0131n\u0131 \u00fcretmeniz gerekiyorsa HSL daha rahat \u00e7al\u0131\u015f\u0131r. Saydam katmanlarda RGBA veya modern RGB s\u00f6zdizimi kullan\u0131labilir. Bask\u0131 dosyas\u0131nda ise tasar\u0131mc\u0131yla ve matbaayla ayn\u0131 CMYK profilinde bulu\u015fman\u0131z gerekir.<\/p>\n<p>Benim pratik kural\u0131m \u015fu: kodun yaz\u0131ld\u0131\u011f\u0131 yerde onu okuyacak ki\u015finin i\u015fini kolayla\u015ft\u0131r\u0131n. Birka\u00e7 sabit de\u011fer i\u00e7in CSS de\u011fi\u015fkenleri tan\u0131mlay\u0131n, renk adlar\u0131n\u0131 kullan\u0131m amac\u0131na g\u00f6re se\u00e7in ve kontrast testini de\u011fi\u015fiklikten sonra tekrar yap\u0131n.<\/p>\n<h2 id=\"sik-sorulan-sorular\">S\u0131k Sorulan Sorular<\/h2>\n<h3>En yayg\u0131n renk kodu hangisidir?<\/h3>\n<p>Web sitelerinde en s\u0131k kar\u015f\u0131la\u015f\u0131lan g\u00f6sterimlerden biri HEX kodudur; \u00f6rne\u011fin <code>#336699<\/code>. RGB ve HSL de CSS taraf\u0131ndan desteklenir ve belirli aray\u00fcz ihtiya\u00e7lar\u0131nda daha kullan\u0131\u015fl\u0131 olabilir.<\/p>\n<h3>HEX renk kodunda ba\u015f\u0131ndaki diyez i\u015fareti ne anlama gelir?<\/h3>\n<p><code>#<\/code> i\u015fareti, ard\u0131ndan gelen de\u011ferin CSS renk g\u00f6sterimi oldu\u011funu belirtir. Sonraki alt\u0131 karakter s\u0131ras\u0131yla k\u0131rm\u0131z\u0131, ye\u015fil ve mavi kanallar\u0131n onalt\u0131l\u0131k de\u011ferlerini ta\u015f\u0131r.<\/p>\n<h3>HEX ile RGB ayn\u0131 rengi g\u00f6sterebilir mi?<\/h3>\n<p>Evet. \u00d6rne\u011fin <code>#FF0000<\/code> ile <code>rgb(255, 0, 0)<\/code> ayn\u0131 saf k\u0131rm\u0131z\u0131y\u0131 ifade eder. Fark, renk de\u011ferinin yaz\u0131l\u0131\u015f bi\u00e7imindedir.<\/p>\n<h3>Renk kodu se\u00e7erken kontrast\u0131 nas\u0131l kontrol ederim?<\/h3>\n<p>Metin ve arka plan renklerini bir kontrast denetleyicisinde birlikte test edebilirsiniz. Normal metin, b\u00fcy\u00fck metin, buton ve odak durumlar\u0131n\u0131 ayr\u0131 inceleyin; yaln\u0131zca renk fark\u0131na dayanan uyar\u0131lar eri\u015filebilir olmayabilir.<\/p>\n<h2 id=\"kaynaklar\">Kaynaklar<\/h2>\n<ul class=\"aiw-sources\">\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_colors\" target=\"_blank\" rel=\"noopener\">MDN &#8211; CSS colors<\/a> \u2014 developer.mozilla.org<\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/\" target=\"_blank\" rel=\"noopener\">W3C &#8211; Web Content Accessibility Guidelines 2.2<\/a> \u2014 w3.org<\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/css-color-4\/\" target=\"_blank\" rel=\"noopener\">W3C &#8211; CSS Color Module Level 4<\/a> \u2014 w3.org<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>HEX, RGB, HSL, CMYK ve ANSI renk kodlar\u0131n\u0131n farklar\u0131n\u0131; CSS kullan\u0131m\u0131n\u0131, kontrast kontrol\u00fcn\u00fc ve s\u0131k yap\u0131lan hatalar\u0131 \u00f6rneklerle a\u00e7\u0131kl\u0131yorum.<\/p>\n","protected":false},"author":2,"featured_media":681,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[279],"tags":[],"class_list":["post-683","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nedir"],"lang":"tr","translations":{"tr":683,"en":684},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www.vps.tc\/blog\/wp-json\/wp\/v2\/posts\/683","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vps.tc\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vps.tc\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vps.tc\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vps.tc\/blog\/wp-json\/wp\/v2\/comments?post=683"}],"version-history":[{"count":1,"href":"https:\/\/www.vps.tc\/blog\/wp-json\/wp\/v2\/posts\/683\/revisions"}],"predecessor-version":[{"id":685,"href":"https:\/\/www.vps.tc\/blog\/wp-json\/wp\/v2\/posts\/683\/revisions\/685"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.vps.tc\/blog\/wp-json\/wp\/v2\/media\/681"}],"wp:attachment":[{"href":"https:\/\/www.vps.tc\/blog\/wp-json\/wp\/v2\/media?parent=683"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vps.tc\/blog\/wp-json\/wp\/v2\/categories?post=683"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vps.tc\/blog\/wp-json\/wp\/v2\/tags?post=683"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}