HEX Renk Modeli: #RRGGBB Gösterimi Açıklaması
HEX renk gösterimi, RGB değerleri için onaltılık bir kısaltmadır. Biçim şu şekildedir: #RRGGBB burada:
- RR = kırmızı kanal (00 - FF = 0 - 255)
- GG = yeşil kanal (00 - FF = 0 - FF) 255)
- BB = mavi kanal (00 - FF = 0 - 255) ]
| Renk | HEX | Anlamı |
|---|---|---|
| Saf kırmızı | #FF0000 | R=255 G=0 B=0 |
| Saf yeşil | #00FF00 | R=0 G=255 B=0 |
| Saf mavi | #0000FF | R=0 G=0 B=255 |
| Beyaz | #FFFFFF | R=255 G=255 B=255 |
| Siyah | #000000 | R=0 G=0 B=0 |
| ToolDolfen mavisi | #3B82F6 | R=59 G=130 B=246 |
Stenografi HEX: Her iki rakam da her kanal için aynı olduğunda, 3 karakterlik bir kısayol çalışır: #F00 = #FF0000.
RGB Renk Modeli: Kırmızı, Yeşil, Mavi Kanallar
rgb(kırmızı, yeşil, mavi) — her kanal 0 ile 255 arasında değişir.
RGB, bir ekleyici renk modelidir — kanalların birbirine eklenmesi beyaza doğru hareket eder. Işık bu şekilde çalışır (TV ekranları, monitörler).
CSS'de:
color: rgb(59, 130, 246); /* Blue */
color: rgba(59, 130, 246, 0.5); /* Blue at 50% opacity */HSL Renk Modeli: Ton, Doygunluk, Açıklık
HSL, rengi algısal açıdan anlamlı üç boyuta ayırır:
- ]
- Ton (0–360°): Rengin kendisi — 0°'de kırmızı, 120°'de yeşil, 240°'de mavi ]
- Doygunluk (%0–100): Renk yoğunluğu — %0 gri, %100 saf canlı renk
- Açıklık (%0–100): Parlaklık — %0 siyah, %100 beyaz, %50 en saf renk renk
CSS'de:
color: hsl(217, 91%, 60%); /* Blue */
color: hsla(217, 91%, 60%, 0.5); /* Blue at 50% opacity */Tasarımcı iş akışı avantajı: Tek renkten 5'li bir palet oluşturmak için:
- %90 açıklık → çok açık renk tonu
- %75 açıklık → açık renk tonu
- %50 açıklık → temel renk
- %35 açıklık → koyu gölge
- %20 açıklık → çok koyu gölge
H ve S'yi sabit tutarak L değerini ayarlayın.
CSS'de HEX, RGB veya HSL Ne Zaman Kullanılmalı
HEX kullanın: Bir tasarım sistemi veya marka kılavuzundan değere ihtiyaç duyduğunuz tek renkli referanslar için. HEX, tasarım özelliklerinde en yaygın formattır.
RGB kullanın: JavaScript'te renk kanallarını dinamik olarak değiştirmeniz gerektiğinde: rgb(${r}, ${g}, ${b}).
HSL kullanın: Tema sistemleri oluştururken, dinamik olarak paletler oluştururken veya erişilebilir açık/karanlık mod geçişi için CSS özel özellikleriyle çalışırken.
ToolDolfen'de Renkleri Dönüştürme
Şunları yapmak için Renk Seçici ve Dönüştürücü (Color Picker) kullanın:
- Renk tekerleği ve tayfı üzerinde görsel olarak herhangi bir rengi seçin
- Herhangi bir HEX, RGB veya HSL değerini girin ve üç format eşdeğerinin tümünü anında görün
- Bir formatla herhangi bir formatı panoya kopyalayın tıkla
- Ekranınızdaki renkleri örneklemek için damlalığı kullanın (yalnızca Chrome ve Edge)
Önerilen Yardımcı Kılavuzlar
Dijital iş akışınızı geliştirmek için bu konu kümesindeki tamamlayıcı eğitimleri ve yardımcı programları keşfedin: