Renk paleti oluşturucu
Ana rengi HEX, RGB veya HSL olarak girin ya da renk seçiciyle seçin, sonra bir renk uyumu seçin. Oluşturucu tonu HSL renk çemberinde döndürür ve her rengi kopyalanmaya hazır HEX, RGB ve HSL kodlarıyla bir örnek olarak gösterir.
Nasıl hesaplanır?
Renk uyumları nasıl oluşturulur?
Oluşturucu ana rengi HSL modeline çevirir (CSS Color Module Level 4’teki tanıma göre derece cinsinden ton H, yüzde cinsinden doygunluk S ve açıklık L). Her uyumda yalnızca ton döndürülür; doygunluk ve açıklık aynı kalır. Ardından her renk tekrar sRGB’ye çevrilir ve 0–255 arası tam sayılara yuvarlanır.
| Uyum | Ton döndürme | Renk |
|---|---|---|
| Tamamlayıcı | 0°, 180° | 2 |
| Analog | −30°, 0°, +30° | 3 |
| Üçlü | 0°, 120°, 240° | 3 |
| Ayrık tamamlayıcı | 0°, 150°, 210° | 3 |
| Dörtlü (dikdörtgen) | 0°, 60°, 180°, 240° | 4 |
| Kare | 0°, 90°, 180°, 270° | 4 |
| Tek renkli | döndürme yok; açıklık 5 kademede | 5 |
Örnek: saf kırmızı #FF0000’ın değerleri H = 0°, S = %100, L = %50’dir. 180° döndürülünce H = 180° olur – bu, tamamlayıcı rengi olan camgöbeği #00FFFF’tir. Üçlü palet 120° (yeşil #00FF00) ve 240° (mavi #0000FF) ekler.
Tek renkli palet
“Tek renkli” seçeneğinde ton değişmez. Açıklık iki eşit adımda siyaha, iki adımda beyaza doğru kayar. Varsayılan renk #3B82F6 (L ≈ %60) için kademeler yaklaşık %20, %40, %60, %73 ve %87’dir.
Renk örneklerinde okunaklı metin
Her örnekteki yazı siyah ya da beyazdır – WCAG göreli parlaklık formülüne göre hangisi daha yüksek kontrast veriyorsa. Böylece metin her zaman en az 4,58:1’e ulaşır. Paletinizdeki iki rengin metin ve arka plan olarak uyup uymadığını kontrol etmek için renk kontrastı kontrol aracını kullanın.
Sınırlar
HSL basit bir geometrik modeldir, algısal olarak eşit dağılımlı değildir: aynı L değerinde sarı, maviden çok daha açık görünür. Hesaplanan uyumları bir başlangıç noktası olarak görün ve gözle ince ayar yapın. Grilerin tonu olmadığından döndürmek aynı rengi verir.
Sıkça sorulan sorular
Mavinin tamamlayıcı rengi nedir?
HSL renk çemberinde 180° karşısındaki renktir. Mavi #0000FF (H = 240°) için bu sarı #FFFF00 (H = 60°); #3B82F6 (H ≈ 217°) için #F6AF3B civarında bir turuncudur.
Oluşturucu hangi renk biçimlerini kabul eder?
3, 4, 6 veya 8 haneli HEX (# ile veya #’siz), rgb() ve rgba(), hsl() ve hsla(), hsv()/hsb(), hwb() ve “59, 130, 246” gibi üç düz sayı (RGB olarak okunur). CSS Color 4’ün hem virgüllü hem boşluklu yazımı çalışır.
Renkleri CSS’te veya bir tasarım programında nasıl kullanırım?
Her örneğin HEX kodu için bir kopyalama düğmesi vardır. “CSS değişkenleri olarak kopyala”, --farbe-1, --farbe-2 … içeren bir :root bloğunu panoya koyar. RGB ve HSL kodları aşağıdaki tabloda listelenir.
Bazı uyumlar neden dengesiz görünüyor?
HSL açıklığı tamamen matematiksel ölçer. Aynı L değerinde sarı ve camgöbeği, mavi veya mordan çok daha parlak görünür. Gerekirse tek tek renklerin açıklığını ayarlayın ya da daha az doygun bir ana renkle başlayın.
Birbirine uyan renkler nasıl seçilir?
En güvenlisi analog ve tek renkli paletlerdir – renkler çemberde birbirine yakındır. Tamamlayıcı ve üçlü paletler daha güçlü kontrast verir; o zaman genellikle bir renk baskın olur, diğerleri vurgu olarak kullanılır.
Kaynaklar ve yasal dayanak
- CSS Color 4, § 7: W3C – CSS Color Module Level 4: HSL colors
- CSS Color 4, § 5.2: W3C – CSS Color Module Level 4: RGB hex notation
- WCAG 2.2: W3C – WCAG 2.2: Definition “relative luminance”
Güncelleme:
Benzer araçlar
- Renk dönüştürücü: HEX, RGB, HSL, HSV, CMYKRenk kodu dönüştürücü: HEX kodunu RGB’ye, RGB’yi HEX’e, HSL, HSV, HWB ve CMYK’ye çevirin. Rengi istediğiniz formatta girin ya da seçiciden seçip kopyalayın.
- Renk kontrastı kontrolü (WCAG 2.2)Metin ve arka plan renkleri arasındaki renk kontrastını kontrol edin: normal metin, büyük metin ve arayüz öğeleri için AA/AAA değerlendirmeli WCAG 2.2 oranı.
- Resimden renk kodu bulma (renk seçici)Resimden renk kodu bulma: fotoğraf açın, bir noktaya tıklayın, HEX, RGB veya HSL değerini kopyalayın – ana renklerle. Yükleme yok, her şey tarayıcıda.
- 1RM hesaplama (tek tekrar maksimum)1RM hesaplama: kaldırdığınız ağırlık ve tekrar sayısından tek tekrarlık maksimumu Epley ve Brzycki formülleriyle tahmin edin – %1RM tablosuyla, kg veya lb.
- Adım sayısını kilometreye çevirinAdım kaç km hesaplayın: 10.000 adım kaç km eder? Araç kendi adım uzunluğunuzu kullanır ve km cinsinden mesafeyi de adım sayısına çevirir.
- Bazal metabolizma hızı (BMR) ve günlük kalori ihtiyacı hesaplamaBazal metabolizma hızınızı Mifflin-St Jeor formülüyle, günlük toplam enerji ihtiyacınızı FAO/WHO aktivite düzeyleriyle (PAL) hesaplayın – kcal ve kJ olarak.