Css Değişken Oluşturucu

Tek bir temel rengi tam bir tasarım-token CSS değişken setine dönüştürün. Bir hex temel renk seçin, değişkeni adlandırın, bir önek seçin ve isteğe bağlı olarak bir 50–950 ton ölçeği ve/veya bir HSL kanal dökümü üretin. Çıktı, temel renginizden hue ve doygunluğu korurken HSL parlaklığını ayarlayarak türetilen ton düzeyleriyle hazır yapıştırılabilir bir :root { ... } bloğudur.

1. Renk seçiciyle bir Base Color seçin (veya bir hex değeri yazın). 2. Bir Variable Name girin (ör. primary) — önekinizden sonra sonek olarak kullanılır. 3. Prefix'i ayarlayın (varsayılan --, eksikse otomatik olarak sonda bir tire alır). 4. 50–950 ölçeğini yaymak için Generate Shades'i ve/veya ham HSL kanal dökümünü yaymak için Generate HSL'i işaretleyin. 5. Generate'e tıklayın, ardından CSS bloğunu kopyalamak için Copy'ye tıklayın.

Tonlar, temel rengi HSL'ye dönüştürerek ve sabit parlaklık düzeylerini değiştirerek üretilir: 50→97%, 100→94%, 200→86%, 300→76%, 400→64%, 500 (temel renginiz değişmeden), 600→42%, 700→34%, 800→26%, 900→20%, 950→12%. Hue ve doygunluk temel renkten alınır. HSL varyant bloğu boşlukla ayrılmış HSL (ör. --primary: 217 91% 60%) artı modern color-mix/relative-color işlevlerinde kullanım için ayrı -h, -s, -l kanalları yayar.