HTML Renkler

style özniteliğiyle görünümü zaten değiştirdiniz; biçimlendirme ve alıntılarla anlamı işaretlediniz. Renkler ruh hali ve okunabilirliği şekillendirir. Bu başlangıç HTML yolunda style içinde renk değerlerini pratik edersiniz: yaygın adlar, hex kodları ve rgb() işlevleri. Tam tasarım sistemleri sonra CSS’te yer alır; burada biçimleri doğru okumayı ve yazmayı öğrenirsiniz. Göz her sözdizimini ilk bakışta tanıdığında, aynı renkleri paylaşılan stil sayfalarına taşımak değerin “gramerini” yeniden öğrenmeden kolaylaşır.

HTML renk değeri nedir?

Bir renk değeri, tarayıcıya color veya background-color gibi bir CSS özelliği için hangi rengi kullanacağını söyler. Aynı değer biçimleri satır içi style ve stil sayfalarında çalışır. Yeni başlayanlar önce üç pratik biçimle karşılaşır: okunabilir bir ad (tomato), bir hex kodu (#c0392b) ve bir rgb() karışımı (rgb(192, 57, 43)). Bunlar aynı tonu farklı yazımlarla tanımlayabilir. Değeri rengin “tarifi” gibi düşünün; özellik tarifin nereye uygulanacağını seçer — metne, arka plana veya daha sonra CSS’in izin verdiği başka yerlere. Tarifi şimdi öğrenmek, kurallar öznitelikten .css dosyasına geçince karışıklığı azaltır.

Doğrudan yanıt

Metni color ile, içeriğin arkasındaki alanı background-color ile ayarlayın. Ana uygun değer biçimini seçin: hızlı demolar için bir ad, paletten kopyalarken hex veya kırmızı/yeşil/mavi kanallarını 0–255 düşünürken rgb(). Okumaya yetecek kadar güçlü kontrast tutun. Projeler büyüdükçe paylaşılan renkleri her sayfada uzun satır içi öznitelikleri tekrarlamak yerine CSS’e taşıyın. Tek sayfalık demoda satır içi etkiyi hemen görmek için yararlıdır; çok sayfalı bir sitede aynı hex’i onlarca kez yinelemek bakımı yavaşlatır ve tutarsızlığa yol açar.

Değer biçimlerine bir bakışta

Adlarla renkler

Adlandırılmış renkler en dostça başlangıç noktasıdır. Sözcükler okunabilir kalsın diye metin rengini ve arka planı dikkatle eşleştirin. darkgreen, navy ve lightblue gibi adlar yüksek sesle okunur ve renk hesap makinesi olmadan etkiyi hatırlamaya yardım eder. Yine de yararlı küme sınırlıdır: her İngilizce renk sözcüğü geçerli bir CSS adı değildir. Çalıştığını gördüğünüz adlarla başlayın ve “açıkça belli” saymadan önce tarayıcıda doğrulayın.

Örneği okumak

• İlk paragraf yalnızca metin rengini değiştirir
• İkinci hem arka planı hem metni ayarlar; lacivert açık mavi üzerinde net kalsın diye
• Adlar CSS’te büyük/küçük harfe duyarsızdır, ama küçük harf net bir alışkanlıktır
• Her İngilizce renk sözcüğü geçerli CSS adı değildir — doğruladığınız yaygın adlarda kalın
• Yalnızca arka planı değiştirip metni tarayıcı varsayılanında bırakırsanız kontrast sessizce bozulabilir

Hex renkler

Bir hex renk genellikle # ile başlar ve 0–9 ile a–f arasından altı karakter gelir. Çiftler kırmızı, yeşil ve mavi demektir. #000000 siyahtır; #ffffff beyazdır. Bir katalog ezberlemeniz gerekmez — paletten seçin ve dikkatle yapıştırın. Birçok tasarım aracı varsayılan olarak hex gösterir; bu yüzden bir mockup’tan kopyalarken bu biçim sık çıkar. Eksik bir basamak veya unutulan # değerin sessizce başarısız olmasına yol açabilir; hex’i kaydetmeden önce gözle kontrol edilecek kısa bir kod gibi ele alın.

Hex ipuçları

• # işaretini koruyun — bu dersteki biçimde yalnız 336699, #336699 ile aynı değildir
• Yalnızca geçerli hex basamakları kullanın; harfler f ile biter
• CSS’te üç basamaklı kısa hex vardır (#333), ama bu kurs aşamasında altı basamak yeterlidir
• Eksik bir basamağın sessizce bozmaması için kopyala/yapıştırı yeniden kontrol edin
• #000000 ve #ffffff yararlı çıpalardır: ölçeğin koyu ve açık uçlarını hissetmeye yardım eder

rgb() renkleri

rgb() işlevi kırmızı, yeşil ve maviyi 0 ile 255 arası sayılarla karıştırır. rgb(255, 0, 0) saf kırmızıdır. Bu biçim bir kanalı birer birer ayarlarken kullanışlıdır — örneğin yalnızca yeşili artırıp kırmızı ve maviyi aynı bırakmak. Ders demolarında rgb() “üç ışığın karışımı” fikrini görünür kılar; gerçek işte CSS’te göreceğiniz aynı gramerdir. Kanallar eşleşiyorsa aynı tonu bir ad veya hex ile de yazabilirsiniz.

Biçimleri bağlamak

Aynı ton çoğu zaman ad, hex veya rgb olarak yazılabilir. Göz sözdizimini öğrensin diye her demoda bir biçim seçin. Daha sonra CSS’te başka gösterimler de gelir; bu üçü erken HTML pratiğini kapsar. Bir palette #c0392b, başka yerde rgb(192, 57, 43) gördüğünüzde bunların aynı kırmızı olabileceğini unutmayın — fark yazımdadır, mutlaka renkte değildir. Üç biçimi şimdi çalışmak, stil sayfalarına geçerken “üç farklı dil” hissini azaltır.

Kontrast ve okunabilirlik

Geçerli bir renk yine de kötü bir seçim olabilir. Beyaz üzerinde açık sarı metin düzgün ayrıştırılabilir ve yine de okunması zor olabilir. Hem color hem background-color koyduğunuzda metnin öne çıktığını kontrol edin. Gerçek sitelerde kontrast erişilebilirliğin parçasıdır — alışkanlığı küçük demolarla şimdi başlatın. Okuyucuyu zorlayan “güzel” bir stil sayfanın amacını karşılamaz. Basit bir kural — açık üzerinde koyu (veya dikkatle tersi) — başlangıçtaki okunabilirlik sorunlarının çoğunu önler.

Düzenleyicinizde alıştırma

1. Bir başlık altında üç kısa paragraf oluşturun.
2. İlk metni bir adla renklendirin (teal veya benzeri).
3. İkinci metni bir hex değeriyle renklendirin.
4. Üçüncüye rgb() ile background-color verin; kontrast için gerekirse koyu bir color koyun.
5. Kaydedin ve yenileyin. Her biçimin çalıştığını doğrulayın.
6. Bilerek bir hex’i bozun (bir basamak silin), yenileyin, düzeltin — bu dikkatli sözdizimini eğitir.
   Her adımı mini deney gibi ele alın: hangi değerin bozulduğunu görmek için bir seferde bir şeyi değiştirin. Üç biçim de aynı belgede işe yararsa, gelecekteki demolar ve paylaşılan CSS’e geçiş için sağlam bir zihinsel modeliniz vardır.

Renkleri gizleyen veya zayıflatan hatalar

• color (metin) ile background-color (metnin arkası) karıştırmak
• Altı basamaklı kod isterken #33, #gggggg veya # olmadan hex yazmak
• “Stilli” görünen ama okunması zor düşük kontrastlı kombinasyonlar
• Paylaşılan CSS’i sonraki adımda öğrenmek yerine tüm marka temasını yalnızca yinelenen satır içi stillerle kurmak
• Kontrol etmeden her İngilizce renk sözcüğünün geçerli CSS adı olduğunu varsaymak
• Altı basamaklı bir hex kopyalayıp yapıştırırken # veya bir karakteri kaybetmek
  Bu hatalar yaygındır çünkü sayfa “neredeyse” doğru görünebilir: HTML geçerli kalır ama renk görünmez veya metin okunamaz. Bir renk “hiçbir şey yapmıyorsa” önce özelliği, sonra değer sözdizimini, en sonda kontrastı gözden geçirin.

Özet

• Hızlı renk demoları için style içinde color ve background-color kullanın
• Değerler: adlar, hex (#RRGGBB) veya rgb(r, g, b)
• Hex çiftleri kırmızı, yeşil, maviye eşlenir; rgb kanalları 0–255 arasındadır
• Metin renkli bir arka planda durduğunda okunabilir kontrastı tercih edin
• Sayfalar ve projeler büyüdükçe paylaşılan renkleri CSS’e taşıyın
• Kaydet ve yenile ile doğrulayın; bir renk “hiçbir şey yapmıyorsa” sözdizimini dikkatle düzeltin
  Bu üç biçim ve iki net özellik ile HTML demolarını öngörülebilir biçimde renklendirebilirsiniz. Doğal sonraki adım, aynı kuralları ortak bir yerde — CSS’te — toplamaktır; böylece aynı değeri her paragrafta yinelemezsiniz.