CSS Renk Kodları

HAZIRLAYAN : APDİL SAMET AYDINALP

Renkler, önceden tanımlanmış renk adları veya RGB, HEX, HSL, RGBA, HSLA değerleri kullanılarak belirtilir.

CSS Renk Adları

CSS'de, önceden tanımlanmış bir renk adı kullanılarak bir renk belirtilebilir:

CSS / HTML , 140 standart renk adını destekler .

Renklere Linkten Ulaşabilirsiniz : https://www.azkod.com/css/css-renkler

CSS Arka Plan Rengi

HTML öğeleri için arka plan rengini ayarlayabilirsiniz:

ÖRNEK

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">Lorem ipsum...</p>

CSS Metin Rengi

Metnin rengini ayarlayabilirsiniz:

Selam Dünya

Lorem ipsum dolor sit amet, to consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim and minimum veniam, quis nostrud exercitation ullamcorper suscipit lobortis nisl ut aliquip ex ea common consequat.

ÖRNEK

<h1 style="color:Tomato;">Hello World</h1>

<p style="color:DodgerBlue;">Lorem ipsum...</p>

CSS Kenarlık Rengi

Kenarlıkların rengini ayarlayabilirsiniz:

ÖRNEK

<h1 style="border:2px solid Tomato;">Hello World</h1>

<h1 style="border:2px solid DodgerBlue;">Hello World</h1>

<h1 style="border:2px solid Violet;">Hello World</h1>

CSS RENK DEĞERLERİ

CSS'de renkler, RGB değerleri, HEX değerleri, HSL değerleri, RGBA değerleri ve HSLA değerleri kullanılarak da belirtilebilir:

Renk adı "Tomato" ile aynı:

"Tomato" renk adıyla aynı, ancak %50 şeffaf:

ÖRNEK

CSS RGB Renkleri

Bir RGB renk değeri, KIRMIZI, YEŞİL ve MAVİ ışık kaynaklarını temsil eder.

RGB Değeri

CSS'de bir renk, şu formül kullanılarak bir RGB değeri olarak belirtilebilir:

rgb( kırmızı, yeşil , mavi )

Her parametre (kırmızı, yeşil ve mavi), rengin yoğunluğunu 0 ile 255 arasında tanımlar.

Örneğin, rgb(255, 0, 0) kırmızı olarak görüntülenir çünkü kırmızı en yüksek değerine (255) ve diğerleri 0'a ayarlanır.

Siyahı görüntülemek için tüm renk parametrelerini şu şekilde 0 olarak ayarlayın: rgb(0, 0, 0).

Beyazı görüntülemek için tüm renk parametrelerini 255 olarak ayarlayın, örneğin: rgb(255, 255, 255).

ÖRNEK

Gri tonları genellikle 3 ışık kaynağının tümü için eşit değerler kullanılarak tanımlanır:

ÖRNEK

RGBA Değeri

RGBA renk değerleri, bir rengin opaklığını belirten bir alfa kanalıyla RGB renk değerlerinin bir uzantısıdır.

Bir RGBA renk değeri şu şekilde belirtilir:

rgba( kırmızı, yeşil , mavi, alfa )

alpha parametresi 0.0 (tamamen şeffaf) ile 1.0 (hiç şeffaf değil) arasında bir sayıdır:

ÖRNEK

CSS HEX Renkleri

Onaltılık bir renk şununla belirtilir: #RRGGBB, burada RR (kırmızı), GG (yeşil) ve BB (mavi) onaltılık tamsayılar rengin bileşenlerini belirtir.

HEX Değeri

CSS'de, formda onaltılık bir değer kullanılarak bir renk belirtilebilir:

#rggbb _

Burada rr (kırmızı), gg (yeşil) ve bb (mavi), 00 ile ff arasındaki onaltılık değerlerdir (ondalık 0-255 ile aynı).

Örneğin, #ff0000 kırmızı olarak görüntülenir çünkü kırmızı en yüksek değerine (ff) ve diğerleri en düşük değere (00) ayarlanmıştır.

Siyahı görüntülemek için tüm değerleri 00 olarak ayarlayın, örneğin: #000000.

Beyazı görüntülemek için, tüm değerleri şu şekilde ff olarak ayarlayın: #ffffff.

ÖRNEK

Gri tonları genellikle 3 ışık kaynağının tümü için eşit değerler kullanılarak tanımlanır:

3 Haneli HEX Değeri

Bazen CSS kaynağında 3 basamaklı bir hex kodu görürsünüz.

3 basamaklı onaltılık kod, bazı 6 basamaklı onaltılık kodların kısaltmasıdır.

3 basamaklı onaltılık kod aşağıdaki biçime sahiptir:

# rgb

Burada r, g ve b, 0 ile f arasında değerlere sahip kırmızı, yeşil ve mavi bileşenleri temsil eder.

3 basamaklı onaltılık kod yalnızca her iki değer de (RR, GG ve BB) her bileşen için aynı olduğunda kullanılabilir. Yani, #ff00cc'ye sahipsek, şu şekilde yazılabilir: #f0c.

ÖRNEK

body {

background-color: #fc9; /* same as #ffcc99 */

}

h1 {

color: #f0f; /* same as #ff00ff */

}

p {

color: #b58; /* same as #bb5588 */

}

CSS HSL Renkleri

HSL, ton, doygunluk ve hafiflik anlamına gelir.

HSL Değeri

CSS'de, formda ton, doygunluk ve açıklık (HSL) kullanılarak bir renk belirtilebilir:

hsl( ton , doygunluk , açıklık )

Ton, renk tekerleğinde 0 ile 360 arasındaki bir derecedir. 0 kırmızı, 120 yeşil ve 240 mavidir.

Doygunluk bir yüzde değeridir. %0, grinin bir tonu ve %100 tam renk anlamına gelir.

Hafiflik de bir yüzdedir. %0 siyah, %50 ne açık ne de koyu, %100 beyaz

ÖRNEK

Doyma

Doygunluk, bir rengin yoğunluğu olarak tanımlanabilir.

%100 saf renktir, grinin tonu yoktur.

%50, %50 gridir, ancak yine de rengi görebilirsiniz.

%0 tamamen gridir; artık rengi göremezsiniz.

ÖRNEK

Hafiflik

Bir rengin açıklığı, o renge ne kadar ışık vermek istediğiniz olarak tanımlanabilir; burada %0, ışık yok (siyah), %50, %50 açık (ne karanlık ne de açık) ve %100, tam açıklık (beyaz) anlamına gelir.

ÖRNEK

Grinin tonları

Gri tonları genellikle ton ve doygunluk 0'a ayarlanarak ve daha koyu/açık gölgeler elde etmek için açıklığı %0'dan %100'e ayarlayarak tanımlanır:

ÖRNEK

HSLA Değeri

HSLA renk değerleri, bir rengin opaklığını belirten bir alfa kanalıyla HSL renk değerlerinin bir uzantısıdır.

Bir HSLA renk değeri şu şekilde belirtilir:

hsla( renk tonu, doygunluk , açıklık, alfa )

alpha parametresi 0.0 (tamamen şeffaf) ile 1.0 (hiç şeffaf değil) arasında bir sayıdır:

ÖRNEK

Page updated

Report abuse