appstoryoAppStoryolapnito.cz s.r.o.blog/camera-color-to-css-variables-web/trKamerayla Seçilen Rengi Web Siteniz İçin CSS Değişkenlerine Nasıl DönüştürürsünüzLubor Šimůnek25082026© 2026 lapnito.cz s.r.o.2026lapnito.cz s.r.o.CC BY 4.0Kamerayla gerçek renkleri yakalayın, HSL'ye dönüştürün ve dakikalar içinde CSS değişkenleri ve tasarım token'ları oluşturun. Adım adım kılavuz.
TasarımarticleAppStoryoTasarımcılar Neden Gerçek Dünyadan Renk AlırEn iyi renk paletleri nadiren bir ekranda doğar. Bir moda markasının kimliğini tanımlayan bir kumaştan, seyahat sırasında fotoğraflanan bir duvarın seyahat sitesinin ana rengi haline gelmesinden ya da dijital dünyada doğru şekilde yeniden üretilmesi gereken bir müşterinin fiziksel ürününden gelir. Fiziksel materyaller, sentetik renk örneklerinin zor taklit ettiği duygusal bir özgünlük taşır.
Zorluk her zaman çeviri adımında olmuştur: rengi görürsünüz, koda ihtiyacınız vardır.
CSS Değişkenlerinin TemelleriCSS özel özellikleri — CSS değişkenleri olarak bilinir — bir değeri bir kez tanımlamanıza ve her yerde yeniden kullanmanıza olanak tanır. Sayfadaki her öğenin onları miras alabilmesi için :root'ta bildirin:
:root {
--color-brand-500: hsl(220, 60%, 45%);
}Bir yerde değeri değiştirin ve güncelleme onu kullanan tüm bileşenlere yayılır.
Adım Adım: Kameradan CSS DeğişkenineColor Picker Camera: HEX RGB'yi açın, canlı kamerayı herhangi bir materyale — duvar, ambalaj, basılı katalog — yöneltin ve rengi sabitlemek için dokunun. Uygulama anında HEX, RGB ve HSL değerlerini gösterir. HSL değerini tek dokunuşla kopyalayın.
Doğrudan stil sayfanıza yapıştırın ve yalnızca parlaklığı ayarlayarak tam bir renk skalası oluşturun:
:root {
--color-brand-900: hsl(220, 60%, 20%);
--color-brand-500: hsl(220, 60%, 45%);
--color-brand-100: hsl(220, 60%, 90%);
}Tasarım Token'ları ve Figma EntegrasyonuColor Picker Camera: HEX RGB, kaydedilen paleti JSON dosyası olarak dışa aktarmanıza olanak tanır — bu, Figma'nın Tokens eklentisi ve Style Dictionary gibi araçların yerel olarak tükettiği formattır. Renk harmonileri özelliği, rengi seçer seçmez tamamlayıcı ve triadik varyantlar önerir; böylece laptopu açmadan önce eksiksiz bir palet oluşturabilirsiniz.
Tüm iş akışı — kamerayla yakalama, JSON dışa aktarma, CSS değişkenleri — fiziksel dünya ile stil sayfanız arasındaki mesafeyi yalnızca birkaç dakikaya indirir.
Color Picker Camera: HEX RGB uygulamasını iOS veya Android için ücretsiz indirin — reklamsız, izlemesiz ve tamamen çevrimdışı çalışır.