Ücretsiz Çevrimiçi Araç

Ücretsiz CSS ve Renk Araçları

Renk seç, gradyan oluştur, kontrastı kontrol et ve gölge/köşe yuvarlama CSS'i oluştur — hepsi tek yerde. Hiçbir şey yüklenmez, yazdıkça her şey anında güncellenir.

Renk seçmek için renk kutusuna tıkla

HEX

RGB

HSL

Herhangi bir alana yaz — HEX, RGB ya da HSL — diğer ikisi ve renk kutusu otomatik olarak güncellenir.

Bu CSS ve renk araçlarıyla neler yapabilirsin

Renk Dönüştürücü — bir rengi HEX, RGB ya da HSL olarak yaz, diğer ikisi anında güncellenir. Tasarım sana birini verip kodun başkasını istediğinde işe yarar.
Gradyan — renklerini seç, Doğrusal ya da Dairesel'i seç, açıyı ayarla, sonra CSS'i kopyala'ya tıkla.
Kontrast Kontrolü — bir metin rengi ve bir arka plan rengi seç, görme zayıflığı olan kişilerin de okuyup okuyamayacağını gör (WCAG AA ve AAA).
Gölge ve Köşe Yuvarlama — box-shadow oluşturmak için kaymayı, bulanıklığı ve yayılmayı ayarla, köşeleri border-radius ile yuvarla. Hoşuna gidince CSS'i kopyala.

Renk terimleri açıklandı

HEX — # işaretinden sonra altı harf ya da rakamla yazılan renk, örneğin #2563EB.
RGB — aynı rengin kırmızı, yeşil ve mavi için üç sayı olarak yazılışı.
HSL — ton, doygunluk ve açıklık. Elle ayarlaması daha kolaydır, örneğin bir rengi açmak için.
WCAG kontrastı — metnin okunaklı kalması için metin ile arka planın ne kadar farklı olması gerektiğini söyleyen kural. AA çoğu sitenin hedeflediği düzeydir, AAA daha katıdır.

Başlamadan önce bilmekte fayda var

Renkler tamamen opaktır: saydamlık (alfa) ve 8 haneli hex kodu yoktur.
HSL değerleri tam sayıya yuvarlanır, bu yüzden geri çevirince bir renk kanalı 1 farklı çıkabilir.
Kontrast geçti/kaldı kararı tam renkleri kullanır; gösterilen oran iki ondalığa yuvarlanır, yani 4,496 "4.50:1" görünür ama 4,5'i geçemez.
Gradyanlar eşit aralıklı en fazla 6 renk alır, doğrusal açı ya da dairesel radyal olarak.