Color Picker

Color Picker Web, 2026 yılında en iyi ücretsiz çevrimiçi renk seçim aracıdır. HEX, RGB, HSL, CMYK, HSB, LAB, XYZ, HWB ve daha fazlası dahil 20'den fazla renk formatını destekler. Canlı bir renk çarkı, WCAG kontrast kontrolü, renk körlüğü simülatörü, palet oluşturucu, görüntü renk seçici ve 6 uyum tipi içerir — hepsi tamamen ücretsizdir ve kayıt gerektirmez.

Bir görüntüden HEX renk kodu bulmak için Color Picker Web'deki Görüntü Renk Seçici'yi kullanın. Herhangi bir fotoğraf yükleyin, örneklemek istediğiniz alanın üzerine gelin ve herhangi bir pikselden tam HEX, RGB ve HSL kodlarını çıkarmak için tıklayın. Ayrıca, tek bir tıklamayla görüntüden tam bir renk paleti de otomatik olarak oluşturabilirsiniz.

Bir renk seçici aracı, renkleri seçmenizi, dönüştürmenizi ve analiz etmenizi sağlar. Renk değerlerini birden fazla formatta (HEX, RGB, HSL, CMYK) gösterir, tamamlayıcı renk paletleri oluşturur, WCAG erişilebilirlik kontrast oranlarını kontrol eder, renk körlüğünü simüle eder ve yüklenen görüntülerden renkleri çıkarır. Web tasarımcıları, geliştiriciler ve marka tasarımcıları için vazgeçilmezdir.

HEX'i RGB'ye dönüştürmek için yukarıdaki dönüştürme aracını kullanın. Herhangi bir HEX kodu girin (ör. #9333ea) ve anında RGB çıktısı alın (147, 51, 234). Manuel olarak: HEX'i 3 çift olarak ayırın (93, 33, ea), her birini onaltılık sayıdan ondalık sayıya dönüştürün. R=147, G=51, B=234. Color Picker Web bunu 20'den fazla format için anında yapar.

WCAG 2.2'ye göre, normal metin için minimum renk kontrast oranı 4,5:1 (Seviye AA) ve 7:1 (Seviye AAA) olarak belirlenmiştir. Büyük metinler (18pt+ veya 14pt+ kalın) için minimum oran, AA için 3:1, AAA için 4,5:1'dir. Kullanıcı arayüzü bileşenleri ve simgeler, bitişik renklere karşı en az 3:1 kontrast gerektirir. Renklerinizi test etmek için yukarıdaki WCAG Kontrast Kontrol Aracı'nı kullanın.

Bir web sitesinden renk seçmek için: (1) Tarayıcı Geliştirici Araçlarını kullanın — herhangi bir öğeye sağ tıklayın, inceleyin ve CSS panelindeki renk örneğine tıklayın. (2) ColorZilla gibi bir tarayıcı uzantısı kullanın. (3) Ekran görüntüsü alın ve herhangi bir pikseli örneklemek için Color Picker Web'in Görsel Renk Seçici aracına yükleyin. Chrome Geliştirici Araçları ayrıca renk seçici panelinde yerleşik bir damlalığa sahiptir.

HSL, Renk Tonu (Hue), Doygunluk (Saturation) ve Açıklık (Lightness) anlamına gelir. Renk Tonu (0°–360°), renk çemberindeki renk türüdür. Doygunluk (0%–100%), rengin ne kadar canlı veya gri olduğunu gösterir. Açıklık (0%–100%), rengin ne kadar koyu veya açık göründüğünü belirler. Örnek: hsl(270, 81%, 56%) orta mor renktir. HSL, her özelliğin bağımsız olarak ayarlanabilmesi nedeniyle CSS animasyonları ve dinamik renk temalandırması için en iyi formattır.

Complementary colors are pairs of colors that sit directly opposite each other on the color wheel, 180° apart. Examples: red & green, blue & orange, purple & yellow. When placed side by side, complementary colors create strong contrast and make each color appear more vivid. They are commonly used for CTAs, logos, and high-impact UI elements.

Bir renk seçici aracı, kullanıcıların herhangi bir rengi seçmesine ve onun tam kodunu birden çok formatta — HEX, RGB, HSL, CMYK ve daha fazlası — almasına olanak tanıyan dijital bir araçtır. Kullanıcı arayüzü ve kullanıcı deneyimi tasarımcıları tarafından arayüz renklerini seçmek, web geliştiriciler tarafından CSS renk değerlerini kodlamak, marka tasarımcıları tarafından renk tutarlılığını korumak, fotoğrafçılar tarafından görüntülerden renkler çıkarmak ve dijital sanatçılar tarafından renk paleti oluşturmak için günlük olarak kullanılır. Color Picker Web, 2026'da mevcut olan en kapsamlı ücretsiz renk seçici olup, 20'den fazla renk formatını, WCAG erişilebilirlik kontrolünü, renk körlüğü simülasyonunu ve 18 dili desteklemektedir.

Bir HEX renk kodu, web tasarımı ve CSS'te kullanılan bir rengin 6 karakterlik onaltılık gösterimidir. # sembolü ile başlar ve ardından her biri Kırmızı, Yeşil ve Mavi kanalların yoğunluğunu temsil eden üç çift karakter (00–FF) gelir. Örneğin: #FF0000 saf kırmızıdır (R=255, G=0, B=0), #FFFFFF beyazdır (tüm kanallar maksimumda), ve #000000 siyahtır (tüm kanallar sıfırda). #F00 gibi kısa 3 basamaklı HEX kodları #FF0000 olarak genişletilir. HEX, HTML, CSS, SVG ve Figma gibi tasarım araçları arasında en yaygın olarak desteklenen renk formatıdır.

Bir web sitesi için renk seçmek: (1) Markanızın birincil rengiyle başlayın ve HSL ayarlamaları kullanarak 9 kademeli tam bir renk skalası (50–900) oluşturun. (2) 60-30-10 kuralını uygulayın — %60 nötr arka plan, %30 ikincil renk, %10 CTA'lar için vurgu rengi. (3) Tüm metin/arka plan kombinasyonlarının WCAG AA kontrastını sağladığını doğrulayın (normal metin için minimum 4.5:1). (4) Renk Uyum aracı kullanarak uyumlu vurgu renkleri oluşturun — üçlü veya bölünmüş tamamlayıcı şemalar web siteleri için en iyi şekilde çalışır. (5) Tüm renk kombinasyonlarını renk körlüğü simülatörü ile test ederek tüm kullanıcılar için erişilebilir olmasını sağlayın.

Marka renklerini seçmek için: (1) Renk psikolojisini araştırın — mavi güven inşa eder, yeşil büyümeyi işaret eder, kırmızı aciliyet yaratır, mor lüks ve yaratıcılığı çağrıştırır. (2) Sektörünüzü analiz edin — teknoloji markaları maviyi ve grileri tercih eder, sağlık markaları yeşili kullanır, lüks markalar altın, siyah veya koyu mor kullanır. (3) Markanızın temel duygusunu yansıtan bir birincil marka rengi seçin. (4) HSL yöntemini kullanarak birincil renkten tam bir renk skalası oluşturun. (5) Uyumluluk teorisini kullanarak ikincil ve vurgulayıcı renk seçin. (6) Tüm kombinasyonların WCAG erişilebilirlik standartlarını geçtiğini doğrulayın. Tutarlılık için tasarım tokenları olarak belgeleyin.

HEX, RGB ve HSL, aynı rengi temsil etmenin üç yoludur: HEX (#9333ea), CSS ve HTML için ideal olan kompakt 6 haneli onaltılık bir formattır — en yaygın desteklenen formattır. RGB (rgb(147, 51, 234)) 0–255 arası Kırmızı, Yeşil ve Mavi kanal değerleriyle rengi tanımlar — JavaScript canvas, SVG ve ekran renderleme için en iyisidir. HSL (hsl(270, 81%, 56%)) rengi, Ton açısı (0–360°), Doygunluk (0–100%) ve Açıklık (0–100%) ile tanımlar — tasarımcılar için en sezgisel olanı çünkü her özellik bağımsız olarak ayarlanabilir, bu da onu CSS animasyonları ve dinamik temalandırma için ideal kılar. Üçü de aynı renkleri tanımlar ancak farklı iş akışlarına hizmet eder.

RGB ve CMYK, farklı çıktı türleri için temel olarak farklı renk modelleridir. RGB (Kırmızı, Yeşil, Mavi) dijital ekranlar için kullanılan bir toplamsal renk modelidir — renkleri birleştirmek ışık ekler ve tüm kanalları maksimumda karıştırmak beyaz üretir. CMYK (Camgöbeği, Macenta, Sarı, Ana/Siyah) fiziksel baskıda kullanılan bir çıkarıcı renk modelidir — mürekkepleri karıştırmak ışığı emer ve tümünü birleştirmek siyah üretir. Dijital/ekran çıktısı için her zaman RGB tasarımı yapın. Dosyaları ticari matbaalara göndermeden önce CMYK'ya dönüştürün. Dönüşüm asla mükemmel değildir — bazı RGB renkleri (özellikle parlak doygun renkler) CMYK baskıda yeniden üretilemez.

HSB (Ton, Doygunluk, Parlaklık) ve HSV (Ton, Doygunluk, Değer) aynı renk modeli olup farklı isimlerle adlandırılmıştır. Ton (0°–360°) renk ailesini tanımlar. Doygunluk (0–100%) renk canlılığını gri tonundan tam canlılığa kadar kontrol eder. Parlaklık/Değer (0–100%) rengin ne kadar ışık yaydığı görünümünü kontrol eder; siyah (0%) ile tamamen parlak (100%) arasında değişir. HSB, Adobe Photoshop, Illustrator ve Figma'nın renk seçici araçlarında varsayılan modeldir ve bu araçları kullanan tasarımcılar için önemlidir. HSL ile farkı, Işık ve Parlaklığın hesaplanma şeklidir — HSL'de %50 ışık saf renk iken, HSB'de %100 parlaklık saf renktir.

LAB (CIELAB) ve XYZ (CIEXYZ), insan görme bilimine dayalı, cihazdan bağımsız, algısal olarak düzgün renk uzaylarıdır. XYZ tüm modern renk biliminin temelidir — renkleri insan gözünün onları algılama biçimine göre üç koni (yaklaşık olarak kırmızı, yeşil, mavi duyarlılığına karşılık gelen X, Y, Z) kullanarak eşler. LAB XYZ'den türetilmiştir ve eşit sayısal mesafelerin eşit algılanan renk farklarını temsil etmesi için tasarlanmıştır, bu da onu renk karşılaştırması, görüntü işleme, makine öğrenimi ve baskı kalite kontrolü için ideal kılar. Her ikisi de profesyonel renk yönetimi, ICC renk profilleri ve ileri düzey görüntü düzenleme iş akışlarında kullanılır. CSS artık modern tarayıcılarda color(xyz …) ve lab(…) sözdizimi aracılığıyla her ikisini de desteklemektedir.

Color Picker Web'deki Görüntü Renk Seçici, herhangi bir fotoğraf, ekran görüntüsü, logo veya sanat eserinden tam renkleri çıkarmanızı sağlar. Herhangi bir resim dosyası yükleyin, ardından herhangi bir piksele tıklayarak HEX, RGB ve HSL değerlerini anında çıkarın. Araç ayrıca görüntünüzdeki baskın renklerden otomatik olarak tam bir renk paleti oluşturur. Bu, mevcut materyallerden marka renklerini eşleştirmek, duygu panolarından paletler oluşturmak, ürün fotoğraflarından renkleri çıkarmak ve rakip web sitelerinden renk şemalarını tersine mühendislikle almak için kullanışlıdır. Hesap oluşturmanıza veya yazılım yüklemenize gerek yok — tamamen tarayıcıda çalışır.

Renk Seçici Web, renk çarkı teorisine dayalı tüm altı ana renk uyumu türünü destekler: Tamamlayıcı — doğrudan karşıt (180° ayrı) iki renk, maksimum kontrast. Bölünmüş-Tamamlayıcı — bir temel renk artı onun tamamlayıcısına bitişik iki renk (150° ve 210°). Triadik — eşit aralıklarla yerleştirilmiş üç renk (120° arayla), dengeli ve canlı. Analog — üç bitişik renk (30° arayla), uyumlu ve doğal. Monokromatik — Farklı doygunluk ve parlaklık seviyelerindeki tek bir tonun varyasyonları. Tetradik — dört renk eşit aralıklarla (90° ayrı), karmaşık ve zengin. Renkleri seçtikçe tüm armoniler gerçek zamanlı olarak matematiksel şekilde hesaplanır.

Evet, Color Picker Web kullanımı tamamen ücretsizdir — renk seçici, palet oluşturucu, resim renk seçici, WCAG kontrast kontrolü, renk körlüğü simülatörü, renk uyumları, ton ve gölge oluşturucu ve 20'den fazla renk formatı dönüşümü dahil tüm özellikler ücretsiz olarak kullanılabilir. Hesap, e-posta adresi veya kayıt gerekmemektedir. Reklam yok, kullanım sınırı yok ve premium katman yok — tüm özellikler kalıcı olarak ücretsizdir. Araç ayrıca 18 dilde mevcuttur: İngilizce, Hintçe, İspanyolca, Rusça, Fransızca, Almanca, İtalyanca, Portekizce, Bengalce, Japonca, Korece, Malayca, Lehçe, Endonezce, Arapça, Bulgarca, Türkçe ve İsveççe.

WCAG (Web İçeriği Erişilebilirlik Yönergeleri) renk kontrastı gereksinimleri, düşük görme yetisine sahip kullanıcılar, renk körlüğü olanlar veya yaşlanan gözler tarafından metnin okunabilir olmasını sağlar. Kontrast oranı, metin rengi ile arka plan arasındaki parlaklık farkını ölçer — 1:1 (kontrast yok) ile 21:1 (maksimum, beyaz üzerinde siyah) arasında değişir. WCAG 2.2 Seviye AA, normal metin için minimum 4.5:1, büyük metin için 3:1 oranını gerektirir. Seviye AAA, normal metin için 7:1 gerektirir. Uyumsuzluk durumunda, ABD’de ADA, Avrupa’da EAA ve Bölüm 508’e göre yasal sorumluluk doğabilir. Sadece 2023 yılında ABD’de 4.600’den fazla erişilebilirlik davası açılmış olup, kontrast hataları en çok belirtilen sorunlar arasında yer almaktadır.

Renk Seçici Web, 8 tür renk görme bozukluğunu simüle eder: Protanopi — kırmızı körlüğü (erkeklerin %1,3'ü). Protanomali — azalmış kırmızı duyarlılığı (%1,3 erkeklerde). Döteranopi — yeşil körlüğü (%1,2 erkeklerde). Döteranomali — azalmiş yeşil duyarlılığı (erkeklerin %5’i, en yaygın tür). Tritanopi — mavi körlüğü (nüfusun %0,001'i). Tritanomali — azalmış mavi duyarlılığı (nadir). Akromatopsi — tam renk körlüğü, yalnızca gri tonlarını görür (nüfusun %0,003'ü). Akromatomali — tüm kanallarda azalmış renk algısı (çok nadir). Her simülasyon, seçtiğiniz renge gerçek zamanlı olarak uygulanan klinik bir renk dönüşüm matrisi kullanır.

UI tasarımında renk psikolojisi, renklerin kullanıcı duygularını, algılarını ve davranışlarını nasıl etkilediğini inceler. Temel ilişkiler: Mavi — güven, güvenilirlik, sakinlik (Facebook, Twitter, PayPal, LinkedIn tarafından kullanılır). Yeşil — büyüme, sağlık, doğa, başarı (Spotify, WhatsApp, tam gıda markaları tarafından kullanılır). Kırmızı — aciliyet, tutku, enerji, iştah (satış pankartları, gıda markaları, CTA’lar için kullanılır). Mor — lüks, yaratıcılık, bilgelik (Cadbury, Hallmark, kozmetik markaları tarafından kullanılmıştır). Sarı — iyimserlik, sıcaklık, ilgi (uyarılar, satış vurguları için kullanılır). Portakal — coşku, arkadaş canlısı (Amazon, Fanta, Harley-Davidson tarafından kullanılır). Renk psikolojisi dönüşüm oranlarını, marka algısını ve kullanıcı tutumunu etkiler.

Bir tasarım sistemi renk paleti oluşturmak 5 adımı içerir: (1) Birincil marka renginizi tanımlayın ve HSL’ye dönüştürün. (2) Açıklığa sistematik olarak ayarlayarak 9 basamaklı bir renk skalası (50–900) oluşturun — daha açık basamaklar (50–300) arka planlar ve tonlar için, daha koyu basamaklar (600–900) metin ve koyu mod için. (3) İkincil, vurgu, başarı, uyarı, hata ve nötr renkler için tekrarlayın. (4) Skala basamaklarınızı referans alan semantik tokenlar (--color-primary, --color-primary-hover, --color-surface) oluşturun. (5) Her metin/arka plan kombinasyonunun WCAG AA standartlarını geçtiğini doğrulayın. Renk Seçici Web’i kullanarak skalalarınızı oluşturun, kontrastı doğrulayın ve Figma veya CSS için HEX/HSL değerlerini tasarım tokenları olarak dışa aktarın.

60-30-10 kuralı, dengeli ve görsel olarak çekici renk şemaları oluşturmak için klasik bir tasarım ilkesidir. 60% — baskın/nötr renk (arka planlar, duvarlar, büyük yüzeyler) — genellikle genel tonu belirleyen açık bir nötr renk. 30% — ikincil renk (mobilya, başlıklar, yan çubuklar) — baskın rengi tamamlar ve derinlik katar. 10% — vurgu rengi (CTA'lar, düğmeler, vurgular, önemli bağlantılar) — görsel ilgi yaratır ve önemli eylemlere dikkat çeker. Web tasarımında bu, şunlara dönüşür: %60 arka plan ve temel yüzeyler, %30 içerik alanları ve ikincil kullanıcı arayüzü öğeleri, %10 birincil düğmeler, aktif durumlar ve önemli vurgular. Bu oran, hiyerarşiyi korurken görsel aşırılığı önler.

Göreli parlaklık, bir rengin algılanan parlaklığını 0 (siyah) ile 1 (beyaz) arasında bir ölçek üzerinde ölçer. Hesaplama: (1) Her RGB kanalını (0–255) 255’e bölerek ondalık (0–1) formata dönüştürün. (2) Gama düzeltmesini kaldırın: değer ≤ 0,04045 ise 12,92’ye bölün; aksi takdirde (değer + 0,055) / 1,055 işlemini yapıp 2,4 üssünü uygulayın. (3) Ağırlıklı formülü uygulayın: L = 0,2126 × R + 0,7152 × G + 0,0722 × B. Bu ağırlıklar insan gözünün hassasiyetini yansıtır — en duyarlı olduğu yeşil, daha az kırmızı, en az maviye duyarlıdır. (4) Kontrast oranı = (L_açık + 0,05) / (L_koyu + 0,05). 0,05 ofseti tipik bir ekrandaki ortam ışığını temsil eder. Color Picker Web bu hesaplamayı anında gerçekleştirir.

HSL (Ton, Doygunluk, Parlaklık) ve HSB/HSV (Ton, Doygunluk, Parlaklık/Değer) her ikisi de Ton ve Doygunluk kullanır ancak üçüncü kanalda farklılık gösterir. In HSL, %50 ışıklılık saf, tamamen doygun renktir; %0 siyahtır ve %100 beyazdır. Bu simetriktir. İçinde HSB/HSV, 100% Parlaklık/Değeri saf renktir; 0% her zaman diğer değerlerden bağımsız olarak siyahtır. HSB renkleri seçmek için daha sezgiseldir çünkü önce %100 parlaklıkta canlı rengi seçebilir ve sonra karartabilirsiniz — bu nedenle Photoshop, Figma ve Illustrator'da varsayılan olarak kullanılır. HSL ise CSS için daha sezgiseldir çünkü aynı tonun koyu ve açık versiyonları arasında düzgün bir geçiş yapabilirsiniz.

Katkılı renk karıştırma (RGB) ve çıkarmalı renk karıştırma (CMYK) iki temel renk modelidir. Toplayıcı (RGB) — ışık yayan cihazlar (ekranlar, projektörler, LED'ler) tarafından kullanılır. Renkler ışık eklenerek oluşturulur. Üç kanalın tamamının maksimum seviyede birleştirilmesi (R=255, G=255, B=255) beyazı üretir. Işık yokluğu (R=0, G=0, B=0) siyahı üretir. Subtraktif (CMYK) — baskıda kullanılır. Mürekkepler ışığın dalga boylarını emer (çıkarır). Tüm mürekkepleri maksimumda birleştirmek, teoride tüm ışığı emerek siyah üretir (pratikte mürekkep karışımı kusurlu olduğundan Key/siyah mürekkep eklenir). Pratik sonuç: dijital çalışmayı RGB olarak tasarlayın, ardından baskı için CMYK’ye dönüştürün — bazı canlı RGB renklerinin CMYK’de çoğaltılamayabileceğini göz önünde bulundurarak.

Renk sıcaklığı, bir rengin sıcaklığını veya soğukluğunu tanımlar; ışık kaynakları için Kelvin (K) cinsinden ölçülür ve tasarım renkleri için algısal olarak algılanır. Sıcak renkler (kırmızılar, turuncular, sarılar — tonlar 0°–60° ve 300°–360°) enerjik, acil ve davetkar hissettirir. Görsel olarak öne çıkarlar — sıcak renklerdeki öğeler daha yakın görünür. Soğuk renkler (maviler, yeşiller, morlar — 120°–240° tonları) sakin, güvenilir ve profesyonel hissettirir. Görsel olarak geri planda dururlar — soğuk renklerdeki öğeler daha uzakta görünür. Nötr (beyazlar, griler, bejler, 90°–120° yakınındaki teal tonları) dengeli ve çok yönlüdür. UI tasarımında, sıcak renkler eylemi tetikler (CTA'lar), soğuk renkler güven oluşturur (başlıklar, arka planlar) ve nötr renkler yapı sağlar. Color Picker Web'ün Renk Hakkında bölümü, seçilen herhangi bir rengin algılanan sıcaklığını gösterir.