Arayüz ve ürün tasarımı
Ekranlar arasında tutarlı kalan birincil, ikincil ve yüzey renkleri oluşturun.
Ücretsiz · kayıt gerekmezRenk teorisi uyumlarıCSS · Tailwind · JSONTarayıcınızda çalışır
Paletleri neden burada oluşturmalısınız
Altı uyum motoru
Tamamlayıcı, analog, üçlü, dörtlü, tek renkli ve bölünmüş tamamlayıcı — klasik renk teorisine dayalı.
Kilitleyin ve iyileştirin
Sevdiğiniz renkleri kilitleyin, geri kalanını yeniden üretin ve şema doğru gelene kadar yinelemeye devam edin.
Geliştiriciye hazır dışa aktarımlar
CSS değişkenlerini, Tailwind tokenlarını, SCSS haritalarını veya JSON'u kopyalayın — doğrudan tasarım sisteminize yapıştırın.
WCAG kontrast kontrolleri
Arayüzün okunabilir ve erişilebilir kalması için paletinizdeki metin-üzeri-arka plan çiftlerini test edin.
Anında geri bildirim
Renk örnekleri, arayüz maketleri ve kodlar canlı güncellenir. Yükleme yok, bekleme yok, hesap yok.
Ücretsiz ve sınırsız
Kişisel ve ticari projeler için sınırsız palet. Filigran yok.
Renk paleti nasıl oluşturulur
- 1
Bir temel renk seçin
Renk seçiciyi kullanın veya bir HEX kodu yazın. Bu, her uyum hesabını bağlar.
- 2
Bir uyum kuralı seçin
Farklı ruh hallerini keşfetmek için tamamlayıcı, analog, üçlü ve daha fazlası arasında geçiş yapın.
- 3
Kilitleyin, rastgele üretin, iyileştirin
Korumak istediklerinizi kilitleyin, yeni bir taban için yeniden üret veya Boşluk'a basın ve markanıza uyana kadar ince ayar yapın.
- 4
Kendi stack'inize dışa aktarın
HEX/RGB/HSL kopyalayın veya tasarımcılar ve geliştiriciler için CSS, Tailwind, SCSS ya da JSON dışa aktarın.
Tek bir HEX kodundan tam bir tasarım sistemi tohumuna
Tasarımcıların ve geliştiricilerin gerçekten yayınladığı uyum kuralları, kontrast kontrolleri ve dışa aktarma formatları.
01
Renk uyumu neden rastgele renk örneklerinden iyidir
Rastgele renkler nadiren bir ilişki paylaşır. Uyum kuralları, tonları renk çarkına bilinçli olarak yerleştirir — enerji için zıt, sakinlik için komşu, neşe için eşit aralıklı — böylece arayüzler gürültülü değil bilinçli hissettirir.
02
Ürün arayüzü için tamamlayıcı vs analog
Tamamlayıcı çiftler CTA'ları arka planlara karşı öne çıkarır. Analog setler, sakin sürekliliğin önemli olduğu panolar ve uzun okuma yerleşimleri için uygundur. Ruh hallerini anında karşılaştırmak için aynı tabanda kuralları değiştirin.
03
Modern stack'ler için dışa aktarma yolları
CSS değişkenleri herhangi bir çerçeveyi besler. Tailwind haritaları yapılandırma dosyalarına eklenir. SCSS haritaları Sass tasarım sistemlerini besler. JSON, tasarım araçlarına ve dokümantasyona taşınır. Tek palet, her teslimat.
04
Erişilebilirlik birinci sınıf bir özellik olarak
Gövde metni AA'yı geçemiyorsa güzellik yeterli değildir. Seçici açıkken kontrastı kontrol etmek, erişilebilirlik incelemesinden sonra maliyetli yeniden tasarımları önler.
Renk paleti oluşturucuyu kimler kullanır
Marka kitlerinden ürün arayüzüne — dengeli şemalar sağlam renk teorisiyle başlar.
Marka kimliği
Marka kılavuzlarına bağlanmadan önce tamamlayıcı veya tek renkli sistemleri keşfedin.
Ön uç geliştirme
Mühendisliğin tasarım dosyasıyla eşleşmesi için CSS değişkenleri veya Tailwind tokenları dışa aktarın.
Pazarlama ve sosyal medya
Reklamlar, sunumlar ve açılış sayfalarında marka çizgisinde kalan kampanya paletleri oluşturun.
Veri görselleştirme
Daha net grafikler için sıralı tek renkli veya kategorik üçlü setler seçin.
Renk teorisini öğrenme
Uyum kurallarının tek bir tabanı profesyonel çok renkli şemalara nasıl dönüştürdüğünü görün.
Gerçekten işe yarayan renk paleti ipuçları
"Güzel renk örneklerini" kullanılabilir tasarım sistemlerinden ayıran küçük alışkanlıklar.
- 1
Marka veya ürün kısıtlarıyla başlayın
Zaten bir birincil marka HEX'iniz varsa onu kilitleyin ve çevresinde üretin — beşinci rastgele bir vurgu rengi icat etmeyin.
- 2
Kontrastı erken kontrol edin
WCAG AA'yı geçemeyen güzel bir çift, düğmeleri, gövde metnini ve formları bozar. Yayınlamadan önce metni yüzeylerde test edin.
- 3
Daha az ama daha güçlü rolü tercih edin
Renkleri yalnızca tona göre değil role göre adlandırın (birincil, vurgu, sönük, tehlike). Roller net olduğunda beş renk örneği bir sistem haline gelir.
- 4
Bir kez dışa aktarın, her yerde yeniden kullanın
Pazarlama siteleri ve ürün arayüzü kaymasın diye CSS değişkenlerini veya Tailwind tokenlarını tek bir doğruluk kaynağında tutun.
FAQ
Sıkça sorulan sorular
Renk paleti oluşturucu nedir?
Bir başlangıç renginden veya kuraldan uyumlu bir renk seti oluşturan bir araçtır. Bu oluşturucu, ortaya çıkan renk örneklerinin arayüz, marka ve tasarım sistemleri için birlikte çalışmasını sağlamak üzere renk teorisi uyumlarını uygular.
Hangi uyum kuralları destekleniyor?
Tamamlayıcı, analog, üçlü, dörtlü (dikdörtgen), tek renkli ve bölünmüş tamamlayıcı — tasarımcıların dengeli şemalar için en çok kullandığı altı kural.
Sevdiğim renkleri kilitleyebilir miyim?
Evet. Herhangi bir renk örneğini kilitleyin, ardından kilitli olmayan renkleri yeniden üretin veya tabanı rastgele değiştirin. Kilitli renkler yerinde kalır; böylece favorileri kaybetmeden iyileştirme yapabilirsiniz.
Kod için paleti nasıl dışa aktarırım?
CSS özel özelliklerini, Tailwind renk haritasını, SCSS haritasını veya JSON'u kopyalamak için Dışa Aktar'ı kullanın. Ayrıca HEX, RGB veya HSL kopyalamak için her renk örneğine tıklayabilirsiniz.
WCAG kontrastı nedir ve neden kontrol edilir?
WCAG, erişilebilirlik için metin ile arka plan arasındaki minimum kontrastı tanımlar. Dahili denetleyici, arayüz metninin okunabilir kalması için paletinizdeki çiftleri ölçer.
Bu ticari projeler için ücretsiz mi?
Evet. Sınırsız palet, hesap yok ve filigran yok. Üretilen renkler ve dışa aktarılan kod, müşteri veya ticari işlerde kullanım içindir.
Verilerim tarayıcıdan ayrılıyor mu?
Hayır. Renk hesapları, kontrast kontrolleri ve pano dışa aktarımları istemci tarafında çalışır. Hiçbir şey bir sunucuya yüklenmez.
Her palette kaç renk var?
Her uyum, beş uyumlu renk örneği döndürür — sisteminizi boğmadan birincil, vurgu ve destekleyici yüzeyler için yeterlidir.
Renk teorisinden profesyonel renk paletleri
BosConvertPro Renk Paleti Oluşturucu, kanıtlanmış uyum kurallarını kullanarak tek bir temel rengi dengeli çok renkli bir şemaya dönüştürür. Tasarımcılar ve geliştiriciler favorileri kilitleyebilir, kontrastı doğrulayabilir, arayüzü önizleyebilir ve üretime hazır tokenları dışa aktarabilir — tamamen tarayıcıda, ücretsiz ve kayıtsız.
- Altı renk teorisi uyum modu
- Diğerleri yeniden üretilirken renkleri kilitleme
- WCAG kontrast oranı denetleyicisi
- CSS, Tailwind, SCSS ve JSON dışa aktarımı
- HEX, RGB, HSL kopyalama formatları
- Tarayıcıda ücretsiz sınırsız kullanım