Renk kodu dönüştürücü
Herhangi bir CSS biçiminde bir renk yapıştırın, diğer tüm biçimleri ve kontrastını alın.
HEX, rgb(), hsl(), hwb() veya bir CSS renk adı yapıştırın ya da bir renk seçin
Açık ve koyu tonlar
Değerler
- HEX
- #3a5bd9
- RGB
- rgb(58, 91, 217)
- HSL
- hsl(227.5, 67.7%, 53.9%)
- HSV / HSB
- hsv(227.5, 73.3%, 85.1%)
- HWB
- hwb(227.5 22.7% 14.9%)
- CMYK
- cmyk(73%, 58%, 0%, 15%)
- Yaklaşık bir değerdir. Basılı renk mürekkeplere ve kâğıda bağlıdır, bu yüzden kesin değerleri matbaanıza sorun.
- OKLCH
- oklch(52.35% 0.1965 267.75)
- En yakın CSS adı
- royalblue
Kontrast (WCAG)
Bu renkteki metnin her arka plandaki görünümü. Normal metin AA için 4.5:1, AAA için 7:1 ister; büyük metin (18pt veya kalın 14pt) 3:1 ve 4.5:1 ister.
Beyaz üzerinde
Büyük metin
Pijamalı hasta yağız şoföre çabucak güvendi
5.71:1
- AA normal geçer
- AAA normal kalır
- AA büyük geçer
- AAA büyük geçer
Siyah üzerinde
Büyük metin
Pijamalı hasta yağız şoföre çabucak güvendi
3.68:1
- AA normal kalır
- AAA normal kalır
- AA büyük geçer
- AAA büyük kalır
#ffffff üzerinde
Büyük metin
Pijamalı hasta yağız şoföre çabucak güvendi
5.71:1
- AA normal geçer
- AAA normal kalır
- AA büyük geçer
- AAA büyük geçer
Sonraki: Arka Planı Şeffaf Yap · Grafik Oluşturucu
Bu araçla ilgili bir sorun bildir
Renk dönüştürücü nasıl kullanılır
Bir renk girin
Bir HEX kodu, rgb(), hsl(), hwb() ya da tomato gibi bir ad yapıştırın veya renk seçiciyle bir renk seçin.
İhtiyacınız olan biçimi kopyalayın
Siz yazarken tüm biçimler güncellenir. Herhangi birini kendi düğmesiyle kopyalayın ya da büyük Kopyala düğmesi için alışık olduğunuz biçimi seçin.
Kontrastı kontrol edin
Beyaz, siyah ve seçtiğiniz bir arka plan üzerindeki WCAG kontrast oranını, normal ve büyük metin için AA ve AAA sonuçlarıyla görün.
Neden Utils365 kullanılmalı
Her CSS rengini okur
3, 4, 6 ve 8 haneli HEX, eski virgüllü veya yeni boşluklu söz diziminde rgb() ve hsl(), hwb(), yüzdeler, ton birimleri ve 148 renk adının tamamı.
Modern biçimler de var
Tasarım sistemleri ve geniş gamlı CSS için OKLCH, renk seçiciler için HWB ve HSV, yarı saydam renkler için alfalı HEX alın.
Erişilebilirlik yerleşik
Kontrast oranları WCAG 2’yi birebir izler ve geçmek için asla yukarı yuvarlanmaz, bu yüzden 4.49:1, 4.5:1 olarak geçmez.
Açık ve koyu tonlar
Örneğin altında beş açık ve beş koyu adım bulunur. Geçerli renk yapmak için birine tıklayın.
Sıkça sorulan sorular
HEX ile RGB arasındaki fark nedir?
Rengin kendisinde hiçbir fark yok. İkisi de 0–255 arası kırmızı, yeşil ve mavi verir. HEX her birini iki onaltılık haneyle yazar, yani rgb(58, 91, 217), #3a5bd9’dur. HEX daha kısadır, rgb() ise elle okumak ve ayarlamak için daha kolaydır.
HSL nedir?
Ton, doygunluk ve açıklık. Ton, renk çemberindeki derece cinsinden konumdur (0 kırmızı, 120 yeşil, 240 mavi), doygunluk rengin ne kadar canlı olduğudur, açıklık ise %0’da siyahtan %100’de beyaza gider. Bir rengin daha açık, daha koyu veya daha soluk sürümlerini yazmayı kolaylaştırır.
CMYK neden basılı rengimle eşleşmiyor?
Ekranlar ışığı, yazıcılar mürekkebi karıştırır ve sonuç mürekkeplere, kâğıda ve yazıcı profiline bağlıdır. Gösterilen CMYK basit standart formülü kullanır; bunu bir başlangıç noktası olarak görün ve kesin değerleri matbaanıza sorun.
WCAG kontrast oranı nedir?
İki rengin parlaklık bakımından ne kadar farklı olduğunun ölçüsüdür; 1:1’den (aynı) 21:1’e (beyaz üzerinde siyah) kadar. WCAG AA, normal metin için en az 4.5:1, büyük metin için 3:1 ister; AAA ise 7:1 ve 4.5:1 ister.
OKLCH nedir?
CSS’te renkleri açıklık, kroma ve tonla yazmanın, insanların rengi nasıl gördüğüne dayanan daha yeni bir yoludur. Açıklığı değiştirmek tonu aynı görünümde tutar, bu da onu tasarım sistemleri ve renk skalaları için popüler kılar.
Renk adı nasıl çalışır?
Renk, 148 CSS renk adından biriyle tam eşleşirse o ad gösterilir. Aksi hâlde görünüşçe en yakın olanı alırsınız; bu, bir rengi kelimelerle tarif etmek için kullanışlıdır.