Hex Renk Seçici: HEX, RGB, HSL, OKLCH, Tonlar ve Gölgeler | We.Inc
Ücretsiz hex renk seçici: bir renk seçin veya yapıştırın; HEX, RGB, HSL ve OKLCH değerlerini, tonları ve gölgeleri, beyaza ve siyaha karşı kontrast puanlarını alın.
Hex Renk Seçici
Tasarım ve kod için ihtiyacınız olan her biçimi almak üzere bir renk seçin veya herhangi bir HEX, RGB ya da HSL değeri yapıştırın: HEX, RGB, HSL ve OKLCH. Bir ton ve gölge skalası görün ve üzerindeki metnin beyaza ve siyaha karşı ne kadar okunaklı olduğunu kontrol edin.
Renk seçiciyi kullanın veya #4F98FB, rgb(79, 152, 251) ya da hsl(215, 95%, 65%) gibi bir değer yazın.
Herhangi bir biçimi tek tıkla kopyalayın. OKLCH, tonlar arasında açıklığı tutarlı tutan modern CSS biçimidir.
Herhangi bir tonu veya gölgeyi tıklayarak geçerli renk yapın.
Bu renk üzerinde beyaz mı yoksa siyah metnin mi uygun olduğuna karar vermek için kontrast oranlarını okuyun.
Düğmeler için etiket ile düğme rengi arasında en az 4,5:1 kontrast hedefleyin.
Tek bir marka renginden bir palet oluşturun: arka planlar için açık bir ton, düğmeler için rengin kendisi, hover durumları ve metin için koyu bir gölge.
Ekranlar farklıdır. Marka renginizi bir dizüstü bilgisayarda olduğu kadar bir telefonda da kontrol edin.
Sıkça sorulan sorular
Hex renk kodu nedir?
Ekrandaki bir renk için, # işaretinden sonra kırmızı, yeşil ve mavi için üç onaltılık basamak çiftinden oluşan altı basamaklı bir kod. #FF0000 saf kırmızıdır; #000000 siyahtır; #FFFFFF beyazdır.
HEX, RGB ve HSL arasındaki fark nedir?
Aynı renkleri farklı şekillerde tanımlarlar. HEX ve RGB kırmızı, yeşil ve mavi miktarlarını verir. HSL, elle ayarlaması daha kolay olan ton (renk çemberindeki açı), doygunluk ve açıklık verir.
OKLCH nedir ve kullanmalı mıyım?
OKLCH, insanların rengi nasıl algıladığına dayanan daha yeni bir CSS renk biçimidir. Aynı L değerine sahip iki renk eşit derecede açık görünür, bu da tutarlı paletleri kolaylaştırır. Tüm güncel büyük tarayıcılar destekler.
Kontrast nasıl hesaplanır?
WCAG 2 formülü kullanılarak: daha açık rengin göreli parlaklığı artı 0,05, daha koyu rengin göreli parlaklığı artı 0,05'e bölünür. Tam bir iki renk kontrolü için We.Inc renk kontrast denetleyicisini kullanın.
Bir web sitesinde işe yarayan bir marka rengi seçmek
Bir marka renginin birkaç iş yapması gerekir: düğmelerde öne çıkmak, beyaz metnin arkasında okunaklı kalmak ve bir sayfa boyunca gözü yormamak. Orta tonlu maviler, yeşiller ve koyu kırmızılar genellikle üçünü de başarır. Çok açık renkler (sarı, pastel pembe) bir logoda iyi görünür ama zayıf düğmeler yapar, çünkü ne beyaz ne de siyah metin ayarlama yapılmadan üzerlerinde iyi okunur.
Kontrast paneli bunu hemen gösterir. Beyaz metin 4,5:1'in altında puan alırsa, ya siyah metin kullanın ya da düğmeler için skaladan daha koyu bir gölge seçin.
Tonlar, gölgeler ve basit bir palet
Tonlar renginizi beyazla karıştırır; gölgeler siyahla karıştırır. Pratik bir web sitesi paleti yalnızca birkaçına ihtiyaç duyar: bölüm arka planları için çok açık bir ton, düğmeler ve bağlantılar için ana renk ve hover durumları için bir koyu gölge. Metin ve kenarlıklar için nötr griler ekleyin, eksiksiz ve tutarlı bir set elde edin.
Belirli bir metin ve arka plan çiftini (örneğin tonlu bir arka planda gri metin) kontrol etmek için, hem WCAG AA hem de AAA puanlayan renk kontrast denetleyicisini kullanın.