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

Q: CSS hangi renk biçimlerini destekler?

Adlandırılmış renkler (red), hex (#ff0000), rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() ve color(), ayrıca transparent ve currentColor anahtar kelimeleri. Hex, rgb ve hsl gündelik işlerin neredeyse tamamını karşılar.

Q: rgb ile rgba arasındaki fark nedir?

Artık hiçbir fark yok. rgba() eski bir takma addır: güncel CSS rgb()'nin bir alfa değeri almasına izin verir (rgb(37 99 235 / 50%)) ve bütün güncel tarayıcılarda iki fonksiyon da aynı argümanları kabul eder.

Q: CSS'te bir renk nasıl saydam yapılır?

Bir alfa kanalı ekle: rgb(0 0 0 / 50%), hsl(221 83% 53% / 0.5) ya da #2563eb80 gibi 8 haneli bir hex. opacity'den farklı olarak bu, bütün elementi değil yalnızca o rengi soldurur.

Q: currentColor ne anlama gelir?

Elementin color özelliğinin değeridir. Onu bir kenarlık ya da bir SVG dolgusu için kullanmak, bunların metin rengini otomatik olarak takip etmesini sağlar.

CSS'te bir rengi yazma yolları

Renk alan her özellik (color, background-color, border-color, gölgeler, SVG fill) aynı biçimleri kabul eder. İlk dört renk örneği aynı mavinin dört farklı yazılışı, beşincisi ise ona yakın gelen adlandırılmış bir renk:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>One blue, four formats</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .swatch { padding: 10px 14px; margin: 6px 0; color: white; border-radius: 6px; }
  </style>
</head>
<body>
  <div class="swatch" style="background: #2563eb;">#2563eb (hex)</div>
  <div class="swatch" style="background: rgb(37 99 235);">rgb(37 99 235)</div>
  <div class="swatch" style="background: rgb(37, 99, 235);">rgb(37, 99, 235) (comma syntax)</div>
  <div class="swatch" style="background: hsl(221.2 83.2% 53.3%);">hsl(221.2 83.2% 53.3%)</div>
  <div class="swatch" style="background: royalblue;">royalblue (a named color, close but not equal)</div>
</body>
</html>

Biçim	Örnek	En uygun olduğu yer
Adlandırılmış	`tomato`, `rebeccapurple`	Hızlı denemeler ve prototipler
Hex	`#2563eb`, `#25e`	Tasarım araçlarından kopyalamak
`rgb()`	`rgb(37 99 235)`	Saydamlık eklemek, RGB değerleriyle çalışmak
`hsl()`	`hsl(221 83% 53%)`	Tek bir rengin koyu ve açık tonlarını üretmek
`oklch()`	`oklch(55% 0.2 262)`	Algılanan açıklığı eşit paletler
Anahtar kelimeler	`transparent`, `currentColor`	Aşağıdaki bölümlere bak

Hex renkler

Bir hex renk, # ve ardından her biri 00'dan ff'ye iki onaltılık basamakla yazılan kırmızı, yeşil ve mavidir. Üç biçim kısaltma ya da uzantıdır:

#rgb: her basamak ikiye katlanır, yani #25e, #2255ee demektir.
#rrggbbaa: son çift alfadır, yani #2563eb80 yaklaşık %50 opaktır.
#rgba: alfalı kısa biçim.

Hex büyük küçük harfe duyarlı değildir: #2563EB ve #2563eb aynı renktir.

rgb() ve rgba()

rgb(), 0'dan 255'e (ya da %0'dan %100'e) kırmızı, yeşil ve mavi alır. Eğik çizgiden sonra gelen isteğe bağlı dördüncü değer alfadır; 0 (görünmez) ile 1 ya da %0 ile %100 arasındadır.

color: rgb(37 99 235);          /* modern space syntax */
color: rgb(37 99 235 / 50%);    /* half transparent */
color: rgba(37, 99, 235, 0.5);  /* older comma syntax, same result */

rgba() ve rgb() artık aynı fonksiyondur: ikisi de iki söz dizimini ve isteğe bağlı bir alfayı kabul eder. Eski kod saydamlık gerektiğinde rgba() kullanır ve bu çalışmaya devam eder.

hsl(): ayarlaması en kolay biçim

hsl() bir rengi insanların düşündüğü gibi tarif eder: renk çarkından bir ton, bir doygunluk ve bir açıklık. Bütün bir ölçek elde etmek için tonu koru ve açıklığı değiştir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HSL scale</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 4px; margin-bottom: 8px; }
    .row div { flex: 1; padding: 20px 4px; text-align: center; border-radius: 4px; }
  </style>
</head>
<body>
  <div class="row">
    <div style="background: hsl(221 83% 90%);">90%</div>
    <div style="background: hsl(221 83% 75%);">75%</div>
    <div style="background: hsl(221 83% 53%); color: white;">53%</div>
    <div style="background: hsl(221 83% 35%); color: white;">35%</div>
    <div style="background: hsl(221 83% 20%); color: white;">20%</div>
  </div>
  <div class="row">
    <div style="background: hsl(0 70% 55%);">0 red</div>
    <div style="background: hsl(60 70% 55%);">60 yellow</div>
    <div style="background: hsl(120 70% 55%);">120 green</div>
    <div style="background: hsl(240 70% 55%); color: white;">240 blue</div>
    <div style="background: hsl(300 70% 55%);">300 magenta</div>
  </div>
</body>
</html>

İlk satır ton 221'i ve doygunluk %83'ü koruyor ve yalnızca açıklığı değiştiriyor. İkinci satır aynı doygunluk ve açıklıkla renk çarkının çevresinde dolaşıyor.

Saydamlık: alfa ve opacity

Bir alfa kanalı tek bir rengi yarı saydam yapar. opacity ise metin ve çocuklar dahil bütün elementi yarı saydam yapar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Alpha vs opacity</title>
  <style>
    body {
      font-family: system-ui, sans-serif; font-weight: 600;
      background: repeating-linear-gradient(90deg, #fde68a 0 16px, #ffffff 16px 32px);
      padding: 12px;
    }
    .box { padding: 16px; margin-bottom: 10px; color: #111827; }
    .alpha { background: rgb(37 99 235 / 40%); }
    .opacity { background: rgb(37 99 235); opacity: 0.4; }
  </style>
</head>
<body>
  <div class="box alpha" id="a">Alpha background: the text stays solid</div>
  <div class="box opacity" id="o">opacity 0.4: the text fades too</div>
</body>
</html>

transparent, tamamen saydam siyah olan rgb(0 0 0 / 0) için bir anahtar kelimedir. Çoğu elementin varsayılan arka planıdır.

currentColor

currentColor, elementin kendi color değerine eşittir. Kenarlığı, ikonu ve metni onu kullanan bir buton, tek bir bildirimle her şeyi değiştirir:

.button {
  color: #16a34a;
  border: 2px solid currentColor;
}
.button svg { fill: currentColor; }

Kenarlıkların varsayılanı zaten currentColor'dır; renksiz yazılan border: 2px solid'in metinle aynı renkte olmasının nedeni budur.

Herhangi bir rengi dene

Herhangi bir biçimde bir renk yaz. Tarayıcı onu ayrıştırır ve hesapladığı değeri gösterir; geçersiz bir renk renk örneğini değiştirmez.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Color tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #swatch { height: 60px; margin: 12px 0; border: 1px solid #d1d5db; border-radius: 6px; background: white; }
  </style>
</head>
<body>
  <label>Color: <input id="val" value="hsl(38 92% 50%)" size="28"></label>
  <div id="swatch"></div>
  <code id="out"></code>
  <script>
    const swatch = document.getElementById('swatch');
    const input = document.getElementById('val');
    const show = () => {
      if (!CSS.supports('color', input.value)) {
        document.getElementById('out').textContent = 'not a valid color';
        return;
      }
      swatch.style.background = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(swatch).backgroundColor;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

tomato, #0f0, #2563eb80, rgb(0 0 0 / 25%), oklch(70% 0.15 150) ve color-mix(in srgb, #2563eb, white 50%) dene.

Daha yeni renk fonksiyonları

oklch(L C H): eşit açıklığın eşit derecede açık görünmesi için tasarlanmış bir uzayda açıklık, kroma ve ton. Onunla kurulan paletlerde HSL paletlerine göre daha az bulanık ara adım olur.
color-mix(in srgb, A, B 30%): iki rengi karıştırır. white ya da black ile tek bir marka renginden açık ve koyu tonlar üretir ve CSS değişkenleriyle çalışır: color-mix(in srgb, var(--brand), white 80%).

İkisi de güncel Chrome, Firefox ve Safari'de çalışır. Seçtiğin biçimler tek bir yerde dursun diye marka renklerini CSS değişkenlerinde tut.

Sık yapılan hatalar

Hex renkte # eksik. color: 2563eb geçersizdir ve yok sayılır.
Bir arka planı saydam yapmak için opacity kullanmak. Metni de soldurur. Alfalı bir renk kullan.
Modern söz diziminde ayırıcıları karıştırmak. rgb(37 99, 235) geçersizdir: ya hep boşluk ya hep virgül kullan.
Adlandırılmış bir rengin tasarımınla eşleştiğini varsaymak. royalblue, #2563eb değildir. Kodu tam olarak kopyala.
Kontrastı gözle değerlendirmek. Metin renklerini arka planlarına göre bir kontrast kontrol aracıyla kontrol et; gövde metni için minimum 4.5:1'dir.

Sıkça Sorulan Sorular

CSS hangi renk biçimlerini destekler?

Adlandırılmış renkler (red), hex (#ff0000), rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() ve color(), ayrıca transparent ve currentColor anahtar kelimeleri. Hex, rgb ve hsl gündelik işlerin neredeyse tamamını karşılar.

rgb ile rgba arasındaki fark nedir?

Artık hiçbir fark yok. rgba() eski bir takma addır: güncel CSS rgb()'nin bir alfa değeri almasına izin verir (rgb(37 99 235 / 50%)) ve bütün güncel tarayıcılarda iki fonksiyon da aynı argümanları kabul eder.

CSS'te bir renk nasıl saydam yapılır?

Bir alfa kanalı ekle: rgb(0 0 0 / 50%), hsl(221 83% 53% / 0.5) ya da #2563eb80 gibi 8 haneli bir hex. opacity'den farklı olarak bu, bütün elementi değil yalnızca o rengi soldurur.

CSS'te HSL nedir?

Hue, saturation, lightness: ton, doygunluk, açıklık. Ton, renk çarkındaki bir açıdır (0 kırmızı, 120 yeşil, 240 mavi), doygunluk rengin ne kadar canlı olduğu, açıklık ise %0 siyahtan %100 beyaza kadardır. Daha açık ve daha koyu tonları kolaylaştırır: yalnızca son sayıyı değiştir.

currentColor ne anlama gelir?

Elementin color özelliğinin değeridir. Onu bir kenarlık ya da bir SVG dolgusu için kullanmak, bunların metin rengini otomatik olarak takip etmesini sağlar.

İlgili kavramlar