Kamerayla Seçilen Rengi Web Siteniz İçin CSS Değişkenlerine Nasıl Dönüştürürsünüz
========================================================================

Kamerayla gerçek dünya renklerini nasıl yakalayacağınızı, HSL'ye dönüştüreceğinizi ve tutarlı bir tasarım sistemi için doğrudan CSS özel özellikleri olarak kullanacağınızı öğrenin.

Author: Lubor Šimůnek
Published: 2026-08-25
Category: Tasarım

Tasarımcılar Neden Gerçek Dünyadan Renk Alır

En 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 Temelleri

CSS ö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şkenine

Color Picker Camera: HEX RGB (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237)'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 Entegrasyonu

Color Picker Camera: HEX RGB (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237), 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 (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) veya Android (https://play.google.com/store/apps/details?id=com.tomas.color_picker) için ücretsiz indirin — reklamsız, izlemesiz ve tamamen çevrimdışı çalışır.

--
Source: https://appstoryo.com/tr/blog/camera-color-to-css-variables-web
License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
Cite as: Lubor Šimůnek (2026). Kamerayla Seçilen Rengi Web Siteniz İçin CSS Değişkenlerine Nasıl Dönüştürürsünüz. AppStoryo, lapnito.cz s.r.o. https://appstoryo.com/tr/blog/camera-color-to-css-variables-web