Çalıştırılabilir CSS Dokümanları: Yazı rengi

Q: HTML'de yazı rengi nasıl değiştirilir?

Bir stil dosyasında ya da bir style özniteliğinde CSS color özelliğini kullan: Blue text . Eski etiketi kullanımdan kalkmıştır.

Q: Tek bir kelimenin rengi nasıl değiştirilir?

Kelimeyi bir ile sar ve ona bir renk ver: This is red . Kelime aynı zamanda önemli ya da vurgulu ise yerine ya da kullan.

Q: CSS'te font-color mı, color mı?

color. font-color ya da text-color diye bir özellik yoktur; tarayıcı onları yok sayar.

HTML'de yazı rengi nasıl değiştirilir

CSS color özelliğini kullan. Bir elementin metninin rengini ayarlar ve içindeki her element, kendi rengini ayarlamadıkça aynı rengi miras alır.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text color</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .blue { color: #2563eb; }
    .green { color: rgb(22 163 74); }
  </style>
</head>
<body>
  <p class="blue">Blue text from a class in a stylesheet.</p>
  <p class="green">Green text written as rgb().</p>
  <p style="color: darkorange;">Orange text from a style attribute.</p>
  <p>Default text, then <span style="color: #dc2626;">one red word</span> in it.</p>
</body>
</html>

Özelliğin adı font-color ya da text-color değil, color'dır. O adlar CSS'te yoktur ve sessizce yok sayılır.

Neden font etiketi değil

Eski eğitimler  gösterir. Bu etiket yıllar önce HTML'den çıkarıldı: doğrulayıcılar onu hata olarak işaretler ve stili işaretlemeye karıştırır, bu yüzden bir rengi değiştirmek her etiketi elle düzenlemek demektir. Tarayıcılar onu uyumluluk için hâlâ çizer; çalışıyor gibi görünmesinin tek nedeni budur.

<!-- obsolete -->
<font color="red">Warning</font>

<!-- use this -->
<span style="color: red;">Warning</span>

<!-- or better, a class you can change in one place -->
<span class="warning">Warning</span>

Rengi yazma yolları

color her CSS renk biçimini kabul eder. En yaygın dördü:

Biçim	Örnek	Notlar
Adlandırılmış	`color: tomato;`	148 adlandırılmış renk, hızlı denemeler için pratik
Hex	`color: #2563eb;`	Tasarım dosyalarında en yaygını
rgb()	`color: rgb(37 99 235);`	0'dan 255'e kırmızı, yeşil ve mavi
hsl()	`color: hsl(221 83% 53%);`	Ton, doygunluk, açıklık: açmak ya da koyulaştırmak kolay

Hex, rgb() ve hsl(), yarı saydam metin için bir alfa kanalı alabilir, örneğin #2563eb80 ya da rgb(37 99 235 / 50%). CSS renkler sayfası her biçimi açıklıyor.

Bütün bir sayfayı, bir başlığı ya da bir bölümü renklendirmek

Rengi body üzerinde bir kez ayarla ve gerisini mirasa bırak, sonra gereken yerde ez:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inherited color</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #374151; }
    h1 { color: #111827; font-size: 24px; }
    .note { color: #92400e; background: #fef3c7; padding: 8px 12px; }
  </style>
</head>
<body>
  <h1>Heading in near black</h1>
  <p>Body text inherits dark gray from body.</p>
  <div class="note">
    <p>This box sets amber text, and the paragraph inside inherits it.</p>
  </div>
</body>
</html>

Beyaz üzerinde #111827 ya da #374151 gibi yumuşak, siyaha yakın bir renk, saf #000000'dan göze daha rahat gelir ve yine siyah olarak okunur.

Link renkleri

Linkler mirasın istisnasıdır: tarayıcı onlara kendi mavisini (ziyaret edildikten sonra da morunu) verir, bu yüzden ebeveyndeki bir renk onlara ulaşmaz. Rengi linke ver ya da linke miras almasını söyle:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link color</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .dark { color: #16a34a; }
    .brand a { color: #7c3aed; }
    .brand a:hover { color: #5b21b6; }
    .inherit a { color: inherit; }
  </style>
</head>
<body>
  <p class="dark">Green paragraph, but <a href="#x" id="l1">this link</a> keeps the browser color.</p>
  <p class="dark brand">Green paragraph, <a href="#x" id="l2">this link</a> is set to purple.</p>
  <p class="dark inherit">Green paragraph, <a href="#x" id="l3">this link</a> inherits green.</p>
</body>
</html>

:hover, :visited ve :focus-visible, rengi duruma göre değiştirmeni sağlar; bunları hover sayfası anlatıyor. Bir link çevresindeki metinle aynı renkteyse link olarak tanınabilmesi için altı çizgisini koru.

Metni okunaklı yap: kontrast

Metin rengi çiftin yalnızca yarısıdır; diğer yarısı arka plandır. WCAG normal metin için en az 4.5:1, büyük metin (yaklaşık 24px ya da kalın 19px) için 3:1 kontrast oranı ister.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contrast</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    p { padding: 8px 12px; margin: 6px 0; }
    .fail { color: #9ca3af; background: #ffffff; }
    .pass { color: #4b5563; background: #ffffff; border: 1px solid #e5e7eb; }
    .dark { color: #f9fafb; background: #1f2937; }
  </style>
</head>
<body>
  <p class="fail">#9ca3af on white: about 2.5:1, too light</p>
  <p class="pass">#4b5563 on white: about 7.6:1, passes</p>
  <p class="dark">#f9fafb on #1f2937: about 14:1, passes</p>
</body>
</html>

En yaygın başarısızlık, placeholder benzeri açık gri metindir. Chrome ve Firefox geliştirici araçları, bir metin rengini incelediğinde kontrast oranını gösterir.

currentColor: metin rengini tekrar kullan

currentColor, elementin color değerine eşit olan bir anahtar kelimedir. Kenarlıklar, outline'lar ve satır içi SVG ikonlar onu kullanabilir, böylece tek bir color değişikliği metni ve süslemesini birlikte yeniden renklendirir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>currentColor</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .tag {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px; border: 2px solid currentColor; border-radius: 999px;
    }
    .ok { color: #16a34a; }
    .warn { color: #d97706; }
  </style>
</head>
<body>
  <span class="tag ok">
    <svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="6" fill="currentColor"/></svg>
    Online
  </span>
  <span class="tag warn" id="warn">
    <svg width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="6" fill="currentColor"/></svg>
    Away
  </span>
</body>
</html>

Sık yapılan hatalar

font-color ya da text-color yazmak. Özelliğin adı color.
 etiketini kullanmak. Kullanımdan kalkmıştır; CSS kullan.
Linklerin miras almasını beklemek. a { color: ... } ya da color: inherit ver.
Tek işaret olarak renk. "Kırmızı alanlar zorunludur" ifadesi kırmızıyı ayırt edemeyen okuyucular için işe yaramaz. Metin ya da bir ikon ekle.
Düşük kontrastlı gri metin. Oranı kontrol et: gövde metni için 4.5:1 ya da daha fazlası.
Metni açmak için opacity kullanmak. Arka plan ve çocuklar dahil bütün elementi soldurur. Bunun yerine daha açık bir renk ya da alfa kanallı bir renk kullan.

Sıkça Sorulan Sorular

HTML'de yazı rengi nasıl değiştirilir?

Bir stil dosyasında ya da bir style özniteliğinde CSS color özelliğini kullan: Blue text. Eski  etiketi kullanımdan kalkmıştır.

etiketi hâlâ destekleniyor mu?

Çok eski sayfalar çalışmaya devam etsin diye tarayıcılar onu hâlâ çizer, ama HTML'de kullanımdan kalkmıştır ve doğrulayıcılar onu hata olarak bildirir. Bunun yerine CSS color kullan.

Tek bir kelimenin rengi nasıl değiştirilir?

Kelimeyi bir  ile sar ve ona bir renk ver: This is red. Kelime aynı zamanda önemli ya da vurgulu ise  yerine  ya da  kullan.

Ebeveyne renk verdiğimde linkim neden renk değiştirmiyor?

Linklerin tarayıcının stil dosyasından gelen kendi renkleri vardır, bu yüzden ebeveynin rengini miras almazlar. Rengi linkin kendisine ver (a { color: #2563eb; }) ya da ebeveyni takip etmesi için a { color: inherit; } kullan.

CSS'te font-color mı, color mı?

color. font-color ya da text-color diye bir özellik yoktur; tarayıcı onları yok sayar.

İlgili kavramlar