Ücretsiz Renk Paleti Oluşturucu

Çalışılmış örnek

Sayfayı açın; “Temel renk” kutusunda zaten #14b8a6 vardır ve “Marka paleti” seçilidir. “Marka paleti · 7 renk” altında yedi renk örneği görünür: #14B8A6 (Ana renk), #EE66BA (Vurgu), #E5FAF8 (Açık ton), #14524A (Koyu ton) ve aynı tonla renklendirilmiş üç nötr: #F3F6F6, #63837F ve #1A2322. Ana renk kartı “Beyaz üzerinde 2.5” ile “Başarısız” ve “Siyah üzerinde 8.4” ile “AAA” gösterir. “Tamamlayıcı”ya basın; şerit iki renge, #14B8A6 ve #EF7381’e düşer. “Kopyalama biçimi” altında RGB’yi seçin, sonra “Tümünü kopyala”ya basın. Bir bildirim “2 renk kopyalandı” der ve panoda rgb(20, 184, 166), rgb(239, 115, 129) bulunur. “Metin ve arka plan kontrolü”nde metin rengi #14B8A6 arka planında #000000 olarak başlar ve 8.44:1, “Normal metin AAA”, “Büyük metin AAA” gösterir.

Hangi ayarların kullanılacağı ve sınırlar

• Rengi elinizdeki biçimde yazın. “Temel renk” kutusu, # ile ya da # olmadan 3 veya 6 basamaklı bir hex kodunu, teal veya tomato gibi bir CSS adını, bir rgb() ya da hsl() değerini (herhangi bir alfa yok sayılır) veya 20 184 166 gibi çıplak sayıları kabul eder. Adlardaki boşluklar yok sayılır, bu yüzden “rebecca purple” çalışır. Tam 6 basamaklı bir hex siz yazdıkça uygulanır. Başka her şey Enter’a bastığınızda ya da kutudan ayrıldığınızda uygulanır. 8 basamaklı hex ve oklch() okunmaz. Yuvarlak noktalar sekiz başlangıç renginden birini ayarlar, kare ise sisteminizin renk seçicisini açar.
• İşe uygun palet türünü seçin. “Marka paleti” rollerle 7 renk verir: Ana renk, Vurgu, Açık ton, Koyu ton ve üç nötr. “Tamamlayıcı” 2, “Benzer” 4, “Triadik” 3, “Bölünmüş Tamamlayıcı” 3, “Tetratik” 4, “Monokromatik” 5 ve “Tonlar” 7 verir. Monokromatik rengi korur ve açıklığı kademelendirir. Tonlar, sizin renk tonunuzda ve doygunluğunuzda yüzde 10 ile 90 açıklık arasında sabit bir merdivendir ve tam renginizi içermez. Renk tonunu çeviren türler (Tamamlayıcı, Benzer, Triadik, Bölünmüş Tamamlayıcı, Tetratik) orta aralıkta tutulan, algılanan benzer bir açıklığı hedefler.
• Beğendiğinizi kilitleyin, sonra yeniden karıştırın. Bir renk örneğinde “Bu rengi kilitle”ye basın, sonra “Karıştır”a basın ya da yeni bir temel renk seçin. Kilitli renk örnekleri renklerini korur, geri kalanı değişir. “Karıştır”, HSL doygunluğu 50 ile 84 ve açıklığı 40 ile 57 olan rastgele bir temel renk seçer; bu yüzden orta tonlara düşer. Kilitler rengi değil renk örneğinin konumunu izler: 1. renk örneğini kilitleyin, temel rengi değiştirin; 1. renk örneği eski rengini korur. “Bu rengi düzenle”, tek bir renk örneği için bir renk seçici açar ve başlığa “(düzenlendi)” ekler. Kilitlemediğiniz düzenlenmiş bir renk örneği, palet bir sonraki yeniden oluştuğunda değiştirilir.
• Yayınlamadan önce kontrastı denetleyin. Her kart, bir rozetle “Beyaz üzerinde” ve “Siyah üzerinde” oranlarını gösterir: 7:1’den itibaren “AAA”, 4.5:1’den “AA”, 3:1’den “AA büyük”, aksi hâlde “Başarısız”. Oranlar WCAG göreli parlaklık formülünü kullanır. “Metin ve arka plan kontrolü”nde paletten ve ayrıca beyaz ile siyahtan bir metin rengi ve bir arka plan seçersiniz. “Normal metin” satırı AAA’yı 7’de, AA’yı 4.5’te derecelendirir. “Büyük metin” satırı AAA’yı 4.5’te, AA’yı 3’te derecelendirir. Kullanmayı planladığınız tam çiftleri sınayın, çünkü her renk okunabilir diye bir palet okunabilir olmaz.
• Kopyalama biçimini, sonra dışa aktarmayı seçin. “Kopyalama biçimi”, bir renk örneğine, bir ton ya da gölge çipine tıklamanın ve “Tümünü kopyala”nın neyi kopyalayacağını belirler: hex, rgb, hsl veya oklch. Temel renk için bu #14B8A6, rgb(20, 184, 166), hsl(173, 80%, 40%) ve oklch(70.4% 0.123 182.5) olarak okunur. “Dışa aktar:” altındaki düğmeler palette.css, palette.scss, tailwind-colors.js, tailwind-scales.js (“Tailwind 50-950”), palette.json, palette.png, palette.svg, palette.gpl, palette.ase ve palette.aco dosyalarını kaydeder. Metin dosyaları hex değerlerini içerir, JSON ise rgb, hsl ve oklch dizeleri ekler. PNG renk örneği başına 200 px, SVG 160 px genişliğindedir. “PNG/SVG üzerinde hex etiketleri” varsayılan olarak işaretlidir.
• Bağlantıyı paylaşın ya da hazır bir ayardan başlayın. “Sonucu paylaş”, adresteki # işaretinden sonra temel rengi, türü, düzenlemeleri ve kilitleri koruyan bir bağlantı oluşturur; bunu destekleyen bir dokunmatik cihazda paylaşım sayfasını açar. Paylaşılan bir palet 1 ile 12 renk içerebilir. “Bunları deneyin” altında “Pastel”, “Toprak tonları”, “Neon” ve “Marka uyumlu (AA)” her biri 5 rengi bir “Özel” palet olarak yükler ve sonradan temel rengi değiştirmek “Marka paleti”ne geri döner. “Ekrandan seç” yalnızca EyeDropper özelliği olan tarayıcılarda, çoğunlukla Chromium tabanlı olanlarda görünür.

Yaygın sorunlar ve nasıl düzeltileceği

“Bu bir renk olarak tanınmadı. #14b8a6, teal veya rgb(20, 184, 166) deneyin.” yazıyor.

Metin bir renk olarak okunamadı ve kutu geçerli temel renge döner. Sık nedenler #14b8a680 gibi 4 veya 8 basamaklı hex, bir oklch() değeri, CSS adı olmayan bir renk adı ve rgb(300, 0, 0) ya da hsl(10, 120%, 50%) gibi aralık dışı sayılardır. Onu 3 veya 6 basamaklı hex, bir CSS adı ya da değerleri aralık içinde rgb() veya hsl() olarak yeniden yazın, sonra Enter’a basın.

Yeni bir temel renk seçtiniz ama bir renk örneği eski rengini korudu.

O renk örneği kilitli. Karttaki kilit düğmesi turkuaza döner ve ipucu “Bu rengin kilidini aç” der. Kilitli renk örnekleri, yeni bir temel renk, yeni bir tür ya da “Karıştır” sonrası dahil, palet her yeniden oluştuğunda korunur. Bırakmak için kilide yeniden basın. Kilitler renk örneğinin konumuna bağlıdır; bu yüzden 1. renk örneğindeki bir kilit, “Marka paleti”nden “Triadik”e geçtikten sonra da geçerlidir.

Bir bildirim “Kopyalanamadı” diyor.

İki pano yolu da başarısız oldu: tarayıcının pano API’si, ardından kopyalama komutu olan gizli bir metin kutusu. Pano API’si güvenli olmayan sayfalarda ve bazı korumalı çerçevelerde yoktur ve sayfa odakta değilken tarayıcı onu reddedebilir. Sayfaya bir kez tıklayıp yeniden deneyin ya da sayfayı normal bir tarayıcı sekmesinde açın. Kopyalama engelli kalırsa bunun yerine bir dosya kaydetmek için CSS, JSON veya Tailwind dışa aktarma düğmelerini kullanın.

“Ekrandan seç” düğmesi yok.

Düğme yalnızca tarayıcıda EyeDropper özelliği olduğunda eklenir ve sayfanın SSS bölümü bunun çoğunlukla Chromium tabanlı tarayıcılar olduğunu söyler. Olmadığı yerde metin alanının yanındaki kare renk kutusunu kullanın ya da başka bir uygulamadan okuduğunuz hex kodunu yazın. Seçim sırasında Esc’ye basmak onu sessizce iptal eder ve başka bir nedenle başarısız olan bir seçim sayfada ileti göstermez.

Kaydedilen PNG ya da SVG’de renk örneklerinde hex kodları yok.

“PNG/SVG üzerinde hex etiketleri” kutusunun işareti kaldırılmış. Sayfa açıldığında işaretlidir, yani biri onu temizlemiş. İşaretliyken her renk örneği hex kodunu, karşıtlığa göre seçilmiş koyu ya da açık mürekkeple, büyük harflerle taşır. Kutu yalnızca PNG ve SVG dosyalarını etkiler. Diğer dışa aktarmalar renk değerlerinin kendisini içerir ve etiket taşımaz. Kutuyu işaretleyin, sonra PNG veya SVG’ye yeniden basın.

Nasıl karşılaştırılır

Bu sayfa tek bir renkten sabit renk çemberi kurallarıyla bir palet oluşturur, kontrastı WCAG oranlarıyla derecelendirir ve kod ile tasarım dosyalarına dışa aktarır. Bir fotoğraftan renk çekmez (bunun için sayfa görsel renk çıkarıcıya bağlanır), renk körlüğünü önizlemez, renklere ad vermez ya da paletleri bir hesapta tutmaz. Çalışmanız adres çubuğunda # işaretinden sonra saklanır; bu yüzden yeniden yükleme ya da bir yer imi onu geri getirir. Uyum kuralları bir başlangıç noktası verir, bitmiş bir marka değil. Rollere karar vermek ve paleti gerçek düzenlerde sınamak için doğru yer hâlâ bir tasarım uygulaması ya da bir marka kılavuzudur.