Renk Seçimi
Renk Kodu Girin
Hızlı Renkler
Renk Bilgisi
Renk Kodları
Son Renkler
Renk Teorisi ve Uyumları
Renk uyumları, görsel olarak hoş tasarımlar oluşturan bilimsel olarak kanıtlanmış renk kombinasyonlarıdır. Bu ilişkileri anlamak, web siteleri, uygulamalar ve grafikler için profesyonel renk şemaları oluşturmaya yardımcı olur.
Her Uyum için Profesyonel İpuçları:
- Tamamlayıcı: Tamamlayıcı: Yüksek kontrast, CTA'lar için kullanın
- Analog: Analog: Sakin ve uyumlu, arka planlar için harika
- Üçlü: Üçlü: Canlı ve dengeli, ölçülü kullanın
- Tek Renkli: Tek Renkli: Sofistike, tonlarla derinlik oluşturur
Renk Teorisi Prensipleri:
- Ana, ikincil ve vurgu renkleri için 60-30-10 kuralını kullanın
- Tasarımlarınızda renk psikolojisini dikkate alın
- Erişilebilirlik için WCAG uyumluluğunu sağlayın
Renk Uyumları
Renk Varyasyonları: Koyu, Açık ve Orta Tonlar
Temel bir renkten varyasyonlar oluşturmak, tutarlı tasarım sistemleri oluşturmaya yardımcı olur. Koyu, açık ve orta tonlar arasındaki farkı anlamak, profesyonel renk paleti oluşturma için çok önemlidir.
Koyu Tonlar
Bir renge siyah eklenerek oluşturulur.
Profesyonel ipucu: Fare üzerine gelme durumları, kenarlıklar ve derinlik efektleri için koyu tonları kullanın.
Açık Tonlar
Bir renge beyaz eklenerek oluşturulur.
Profesyonel ipucu: Arka planlar, vurgular ve daha açık UI öğeleri için açık tonları kullanın.
Orta Tonlar
Bir renge gri eklenerek oluşturulur.
Profesyonel ipucu: Soluk tasarımlar, devre dışı durumlar ve ince varyasyonlar için orta tonları kullanın.
Renk Varyasyonları
Koyu Tonlar
Açık Tonlar
Orta Tonlar
Erişilebilirlik ve WCAG Standartları
Renk kontrastı, erişilebilirlik için esastır. WCAG (Web İçeriği Erişilebilirlik Kılavuzları), içeriğin görme engelli kişiler için erişilebilir olmasını sağlamak için standartlar sağlar.
WCAG 2.1 Gereksinimleri:
- AA (Minimum): AA Minimum: Normal metin için 4.5:1
- AA Büyük: Büyük metin (18pt+) için 3:1
- AAA (Gelişmiş): AAA Gelişmiş: Normal metin için 7:1
Tasarım Sistemi İpuçları:
- Erişilebilirlik için tüm renk kombinasyonlarını test edin
- Renk körlüğünü dikkate alın (erkeklerin %8'i etkilenir)
- Tasarımları önizlemek için renk körlüğü simülatörümüzü kullanın
Erişilebilirlik Sonuçları
Neden Renk Seçicimizi Kullanmalısınız?
Web Geliştiricileri İçin
Anında CSS, Tailwind ve SCSS renk kodlarını alın. Tasarım sisteminiz için tam renk paletlerini dışa aktarın.
Tasarımcılar İçin
Uyumlu renk şemaları oluşturun, erişilebilirliği test edin ve kusursuz iş akışı entegrasyonu için Figma'ya aktarın.
En İyi Uygulamalar
- Temel bir renkle başlayın ve uyumlar oluşturun
- Tasarım sürecinin erken aşamalarında kontrast oranlarını test edin
- Kapsayıcı tasarım için renk körlüğünü dikkate alın
Yaygın Renk Formatları
İpuçları
- HEX kodunu kopyalamak için herhangi bir renk çipine tıklayın
- Herhangi bir yerden renk seçmek için "Ekrandan Seç" özelliğini kullanın
- Erişilebilirlik uyumu için kontrast oranlarını kontrol edin
- Profesyonel renk şemaları için uyumları kullanın
Klavye Kısayolları
Renk Seçici Nedir?
Bir renk seçici aracı, tasarımcılar ve geliştiriciler için çeşitli formatlarda renkleri seçmenize, tanımlamanıza ve bunlarla çalışmanıza olanak tanıyan temel bir araçtır.
Gelişmiş Renk Seçim Aracı
Gelişmiş renk seçicimiz HEX, RGB, HSL, HSV, CMYK, LAB ve XYZ formatları dahil olmak üzere birden fazla renk modelini destekler.
İş Akışınızı Verimli Hale Getirin
İster web sitesi tasarlıyor olun, ister grafik oluşturuyor veya uygulama geliştiriyor olun, doğru online renk seçiciye sahip olmak iş akışınızı verimli hale getirebilir ve projeler arasında renk tutarlılığını sağlayabilir.
Çeşitli Endüstrilerde Profesyoneller Tarafından Kullanılır:
Temel Özellikler
PremiumBirden Fazla Renk Formatı
HEX, RGB, HSL, HSV, CMYK, LAB ve XYZ arasında sorunsuz bir şekilde hassasiyetle dönüşüm yapın.
Ekran Renk Seçici
Ekranınızın herhangi bir yerinden renk seçmek için hassas damlalık aracını kullanın.
Renk Uyumları
Tamamlayıcı, analog, üçlü ve dörtlü renk şemalarını anında oluşturun.
Erişilebilirlik Araçları
WCAG kontrast kontrolcüsü, renk körlüğü simülatörü ve erişilebilirlik puanlaması.
Dışa Aktarma Seçenekleri
CSS, SCSS, Tailwind, Figma, SVG, JSON ve Adobe formatlarına aktarın.
Ek Yetenekler:
Tasarım İş Akışınızı Geliştirmeye Hazır mısınız?
Gelişmiş renk seçicimizi bugün kullanmaya başlayın
Renk Modelleri Açıklandı
Farklı renk modelleri, dijital tasarım, baskı ve bilimsel uygulamalarda çeşitli amaçlara hizmet eder. Bu formatları anlamak, özel ihtiyaçlarınız için doğru olanı seçmenize yardımcı olur.
HEX
#2596be
Onaltılık değerler kullanan bir web standardı formatı. CSS, HTML ve dijital tasarımda yaygın olarak kullanılır.
Web geliştirme, CSS stillendirme Web geliştirme, CSS stillendirme
RGB
rgb(37,150,190)
Ekran görüntüleri için Kırmızı, Yeşil, Mavi eklemeli renk modeli. Monitörlerde, TV'lerde ve dijital görüntülemede kullanılır.
Dijital ekranlar, web grafikleri Dijital ekranlar, web grafikleri
HSL
hsl(196,67%,45%)
İnsanların renkleri nasıl algıladığına karşılık gelen Renk Tonu, Doygunluk, Açıklık modeli. Ayarlamalar için sezgiseldir.
Renk manipülasyonu, tasarım araçları Renk manipülasyonu, tasarım araçları
CMYK
cmyk(81,21,0,25)
Baskı için Camgöbeği, Macenta, Sarı, Siyah çıkarıcı modeli. Mürekkep yüzdelerini temsil eder.
Baskı tasarımı, fiziksel medya Baskı tasarımı, fiziksel medya
HSV/HSB
Format: hsv(196,81%,75%)
Renk Tonu, Doygunluk, Değer (veya Parlaklık). HSL'ye benzer ancak farklı bir açıklık hesaplamasına sahiptir. Renk seçicilerde sıklıkla kullanılır.
Tasarım yazılımlarında yaygınLAB
Format: lab(58,-17,-29)
Algısal olarak tekdüze olacak şekilde tasarlanmış CIELAB renk uzayı. Açıklık için L*, yeşil-kırmızı için a*, mavi-sarı için b*.
Algısal olarak tekdüzeXYZ
Format: xyz(21,26,53)
Farklı renk modelleri arasında dönüşüm için standart referans görevi gören CIE 1931 renk uzayı.
Referans standardıHWB
Format: hwb(196,15%,25%)
Renk Tonu, Beyazlık, Siyahlık - beyaz ve siyahla renkleri karıştırmak için sezgisel bir model. Modern CSS'de desteklenir.
PANTONE ve NCS
Örnek: PMS 7461 C
Renk tutarlılığı için profesyonel baskı ve ürün tasarımında kullanılan özel renk eşleştirme sistemleri.
Renk Modeli Hızlı Referans
| Model | Birincil Kullanım | Format Örneği | Renk Uzayı | Temel Özellikler |
|---|---|---|---|---|
| HEX | Web geliştirme, CSS stillendirme | #2596be |
sRGB | Kompakt, tarayıcı yerel, büyük/küçük harfe duyarsız |
| RGB | Dijital ekranlar, web grafikleri | rgb(37,150,190) |
sRGB | Eklemeli, cihaza bağlı, 0-255 aralığı |
| HSL | Renk manipülasyonu, tasarım araçları | hsl(196,67%,45%) |
sRGB | İnsan algısal, sezgisel ayarlamalar |
| CMYK | Baskı tasarımı, fiziksel medya | cmyk(81,21,0,25) |
CMYK | Çıkarıcı, mürekkep tabanlı, yüzde tabanlı |