Adlardan hex'e, rgb ve hsl'ye kadar CSS'nin rengi tanımlamanıza olanak sağladığı birçok yolu keşfedin.

Temel Çıkarımlar

  • Renk Adlarını Kullanma: CSS, kolay ve başlangıç ​​seviyesindekilerin dostu renk seçimi için 145 renk adı sağlar, ancak seçenekler sınırlıdır ve kesin tasarım ihtiyaçlarını karşılamayabilir.
  • Onaltılı Renk Kodları: Onaltılı kodlar geniş bir renk seçeneği yelpazesi ve hassas özelleştirme sunar, ancak kullanımı ve hatırlanması daha az sezgisel olabilir.
  • RGB ve RGBA Renk Değerleri: RGB, sayısal değerlerle doğru renk kontrolü sağlarken, RGBA şeffaflık katar. Erişilebilir renk kombinasyonlarının sağlanması önemlidir.

Renkler, bir web sitesinin görsel kimliğini, ruh halini ve kullanıcı deneyimini şekillendirmede hayati bir rol oynayan, en sık kullanılan CSS nitelikleri arasındadır. CSS, her biri özel tasarım ihtiyaçlarına ve tercihlerine göre uyarlanmış, renk kullanımına yönelik bir dizi seçenek sunar.

Renk tanımının önemini gözden kaçırmak kolay olsa da, seçimleriniz web sitenizin görünümünü ve tarzını önemli ölçüde etkileyebilir. Çeşitli yöntemler arasındaki farkları ve bunların pratik olarak nasıl uygulanacağını ve birleştirileceğini keşfetmek, görsel olarak çekici web siteleri oluşturma yeteneğinizi geliştirecektir.

instagram viewer

1. Renk Adlarını Kullanma

CSS, adları kullanarak renkleri tanımlamanın kullanışlı bir yolunu sağlar ve 145 seçenek mevcuttur. Bu renk adları basit "kırmızı", "yeşil" ve "mavi"den "mercan" veya "lavanta" gibi daha spesifik tonlara kadar uzanır.

Adlandırılmış renkleri kullanmak basittir: "kırmızı" gibi bir renk adı seçersiniz ve bunu renk değerlerini destekleyen bir CSS özelliğinde kullanırsınız. Çok özellikler bariz olanı içerir renk Ve arka plan rengi, ama aynı zamanda sınır rengi, anahat rengi, Ve Metin gölgesi, diğerleri arasında.

Prototip oluşturmak için geçici bir renge ihtiyaç duyduğunuzda veya kodunuzun okunmasını kolay tutmak istediğinizde renk adları kullanışlıdır. İşte sözdizimi:

color_property: color_name;

Bu durumda, basitçe değiştirin renk_adı Kullanmak istediğiniz özel renk ile. Örneğin, metni ayarlamak istiyorsanız renk bir paragrafın kırmızı, yazmak:

p {
color: red;
}

Bu, paragraflarınıza kırmızı bir metin rengi verecektir:

Artıları: CSS kodunuzda okunması ve anlaşılması kolaydır. Yeni başlayanlara uygundurlar, tarayıcılarda iyi çalışırlar ve hızlı tasarım fikirleri için kullanışlıdırlar.

Eksileri: Sınırlı seçeneklere sahiptirler ve ihtiyacınız olan kesin renk tonlarını sunmayabilirler, bu da tasarım yaratıcılığını sınırlandırır. Ayrıca, katı erişilebilirlik gereksinimlerini her zaman karşılamayabilirler ve eski sistemlerdeki destek farklılık gösterebilir.

2. Onaltılı Renk Kodları

Genellikle "onaltılık kodlar" olarak adlandırılan onaltılık renk kodları, web tasarımında renkleri belirtmenin en yaygın yöntemleridir. Bu kodlar, bir renkteki kırmızı, yeşil ve mavi (RGB) bileşenlerin karışımını temsil eden altı karakterli sayı ve harf kombinasyonlarından (0-9, A-F) oluşur.

Kullanımı kolay olsa da nasıl çalıştıklarını anlamak zor olabilir. Alabilirsin hex kodlarına derinlemesine bir bakış daha iyi anlamak için. İşte CSS'de hex kodlarını nasıl kullanabileceğinize dair temel bir örnek:

color: #RRGGBB;

Bu formatta RR, GG ve BB sırasıyla kırmızı, yeşil ve mavi bileşenleri temsil eder. Her bileşen 00 (yoğunluk yok) ile FF (maksimum yoğunluk) arasında değişebilir. Örneğin, bir web sitesi başlığının arka plan rengini belirli bir mavi tonuna ayarlamak istiyorsanız şunun gibi bir onaltılık kod kullanabilirsiniz:

header {
background-color: #336699;
}

Bu koyu mavi bir renk üretecektir:

​​​​​

Ayrıca üç bileşenin her biri aynı karakteri iki kez tekrarlıyorsa kısayol kullanabilirsiniz. Yukarıdaki örneği şu şekilde yazabilirsiniz:

header {
background-color: #369;
}

Artıları: Onaltılı renk kodları geniş bir renk seçeneği yelpazesi sunarak ayrıntılı ve özelleştirilmiş tonlar oluşturmanıza olanak tanır. Renk seçenekleri üzerinde sorunsuz kontrol sunarak karmaşık tasarım gereksinimleri için idealdirler.

Eksileri: Onaltılı kodlar güçlü olsa da, adlandırılmış renklere göre daha az sezgisel olabilirler. Ayrıca belirli renk değerlerini hatırlama zorluğuyla da karşılaşabilirsiniz. Neyse ki, renklerin onaltılık kodlarını bulmak için araçlar Karşılaştığınız her şey mevcut, bu da süreci daha yönetilebilir hale getiriyor.

3. RGB ve RGBA Renk Değerleri

Onaltılı kodlar gibi bu format da renkleri kırmızı, yeşil ve mavi bileşenlerine göre belirtmenize olanak tanır. Ancak bu sefer daha dost tamsayılar kullanabilirsiniz.

RGB Renk Değerleri

RGB renk değerleri, CSS'de renkleri tanımlamak için en sık kullanılan ikinci yöntemdir. “RGB” kırmızı, yeşil ve maviyi temsil eder ve ardından parantezlerle bir CSS işlevi olarak ifade edilir. Parantezlerin içinde her renk kanalına 0 ila 255 arasında değerler atarsınız. Bu, kullanmak istediğiniz rengin kırmızı, yeşil ve mavi yoğunluğunu kontrol etmenizi sağlar.

İşte sözdizimi:

rgb(red_value, green_value, blue_value);

Yer değiştirmek kırmızı_değer, yeşil_değer, Ve mavi_değer ilgili sayısal değerleriyle. Örneğin, bu resimde gösterilenlere benzer beyaz, siyah ve kırmızı renkler elde edebilirsiniz:

Üç renk kanalının tümünü (kırmızı, yeşil ve mavi) maksimum 255 değerine ayarladığınızda, her kanal için en yüksek yoğunluk elde edilir ve beyaz renk oluşturulur:

.white-box {
 color: rgb(255, 255, 255);
}

Üç renk kanalının tümünü minimum değeri olan 0'a ayarladığınızda bu, her kanalda renk olmadığını gösterir ve siyahla sonuçlanır.

.black-box {
color: rgb(0, 0, 0);
}

Kırmızı kanalı maksimum değeri olan 255'e ayarlamak, diğer kanalları ise minimum değeri olan 0'da tutmak, kırmızı rengi üretir:

.red-box {
color: rgb(255, 0, 0); 
}

RGBA Renk Değerleri

RGBA, RGB ile aynı şekilde çalışır; tek fark, bir alfa değerinin eklenmesidir. RGBA'daki "A", seçilen rengin şeffaflık veya opaklık düzeyini belirleyen alfa anlamına gelir. 0 değeri tam şeffaflığı temsil eder ve rengin tamamen görünmez olmasını sağlar; 1 değeri ise tam opaklığı temsil ederek rengin tamamen görünür olmasını sağlar.

RGBA özellikle yarı saydam arka planlar veya soluk metinler gibi farklı düzeyde şeffaflığa sahip öğeler oluşturmak istediğinizde kullanışlıdır. Tam sözdizimi şöyledir:

color: rgba(red_value, green_value, blue_value, alpha_value);

Burada, kırmızı_değer, yeşil_değer, Ve mavi_değer Renk kanallarını RGB'deki gibi temsil eder ve alfa_değeri şeffaflık düzeyini belirtir.

div {
background-color: rgba(0, 128, 0, 0.5);
}

Bu örnekte, 0,5'lik alfa değeri, yeşil renge %50 şeffaflık atar ve altındaki içeriğin aşağıdaki şekilde gösterilmesine olanak tanır:

Artıları: RGB ve RGBA, renkleri doğru şekilde kontrol etmenize olanak tanıyarak hassas tonları seçmenizi ve görsel olarak çekici tasarımlar oluşturmanızı kolaylaştırır. Çeşitli web tarayıcılarıyla uyumludurlar ve seçtiğiniz renklerin tutarlı görünmesini sağlarlar.

Eksileri: Buradaki zorluk, erişilebilir renk kombinasyonlarının sağlanmasında yatmaktadır. Özellikle RGBA'da şeffaflıkla çalışırken kontrast oranlarına dikkat etmek çok önemlidir. WCAG yönergeleri yardımcı olabilir tasarımınızın erişilebilir olmasını sağlarsınız.

4. HSL ve HSLA Renk Değerleri

Hue, Saturation ve Lightness'ın kısaltması olan HSL, renkleri tanımlayan başka bir CSS işlevidir. RGB'ye çok benzer şekilde HSL de renkleri temsil etmek için sayısal değerler kullanır, ancak bunu farklı şekilde yapar. Aşina olabilirsiniz Tasarım uygulamalarındaki kullanıcı arayüzü bileşenlerinden gelen HSL değerleri Ve başka yerlerde.

renk tonu: Bu, renk tekerleğinde 0 ile 360 ​​arasında değişen dereceleri kullanarak rengin kendisini temsil eder. Bunu, bir daire üzerinde her derecenin farklı bir renge karşılık geldiği bir noktayı seçtiğinizi hayal edin. Örneğin kırmızı için 0 ve 360 ​​derece, yeşil için 120 derece ve mavi için 240 derece.

Doyma: Doygunluk, rengin canlılığını veya yoğunluğunu belirler. %0'ın tamamen gri tonlamalı (doymamış) ve %100'ün tamamen doymuş (canlı ve saf) olmasıyla rengin griyle ilişkisini tanımlar.

hafiflik: Açıklık, rengin ne kadar parlak veya koyu göründüğünü temsil eder. Bu, rengin spektrumda siyah (%0) ile beyaz (%100) arasındaki konumuyla ilgilidir. %50 değeri normal rengi temsil eder, %50'nin altındaki değerler rengi koyulaştırır, %50'nin üzerindeki değerler ise rengi açar.

HSL'ye ek olarak, "A"nın "alfa" anlamına geldiği HSLA da vardır. Bu, RGBA'daki “A” harfine benzer ve şeffaflığı ifade eder.

İşte sözdizimi:

color: hsl(hue_value, saturation_percentage, lightness_percentage);

Bu sözdizimini kullanarak değiştirin hue_value, saturation_percentage, Ve hafiflik_yüzdesi her bileşen için istediğiniz belirli değerlerle. Örneğin:

div {
background-color: hsl(120, 100%, 50%);
}

Bu örnekte, bir öğenin arka plan rengi div öğesi, HSL değerleri kullanılarak canlı yeşile ayarlanır. 120 renk tonunu (yeşil) temsil eder, %100 tam doygunluk içindir ve %50 açıklığı dengeli bir düzeye ayarlar.

Artıları: HSL ve HSLA, CSS özel özelliklerini kullanarak çok yönlü renk hesaplamaları sunar. Modern tarayıcılarla son derece uyumludurlar ve renk açıklığının kolay ayarlanmasına olanak tanırlar.

Eksileri: HSL'yi öğrenmek şunları içerir Renk bilimini anlamaktanıdık RGB renklerinden daha zorlayıcı olabilen tonlar ve doygunluklar gibi.

CSS Renklerinin Gücünü Kucaklamak

Kontrol edebileceğiniz daha fazla yöntem var ve renkleri tanımlamak için farklı formatları keşfederken CSS'de web sitenizin görünümünü, ruh halini ve kullanıcı deneyimini şekillendirme gücüne sahip olduğunuzu unutmayın.

Renk formatı seçiminiz (basit renk adları, onaltılık kodlar, RGB veya HSL olsun), hedef kitlenizin sitenizi nasıl algıladığını etkileyebilir. Bu nedenle tasarım hedeflerinize en uygun renk tanımlarını deneyin, öğrenin ve bulun.