Softonic

Renk Karıştırıcı

Adım 1 / 2
Sonuçlar

İki HEX rengi girin, kaç adım istediğinizi seçin; Renk Karıştırıcı başlangıç rengini, bitiş rengini ve ikisi arasındaki eşit aralıklı renkleri gösterir. Hızlı UI renk aralıkları, gradyan planlama, ikon durumları ve CSS ya da tasarım dosyasına geçmeden önce kesin HEX duraklarını kontrol etmek için kullanışlıdır.

HEX karışımı nasıl hesaplanır

  1. 1

    İki HEX rengi girin

    3 veya 6 haneli HEX kullanın; # işareti olabilir ya da olmayabilir. Örnekler: #FF6B35, #1E3A8A, F60.

  2. 2

    2-20 adım seçin

    İlk renk örneği birinci renk, son renk örneği ikinci renktir; ortadaki örnekler ikisi arasında hesaplanır.

  3. 3

    RGB kanallarını enterpole edin

    Araç HEX değerini kırmızı, yeşil ve mavi kanal değerlerine çevirir, her kanalı doğrusal olarak enterpole eder ve en yakın tam sayıya yuvarlar.

  4. 4

    HEX duraklarını okuyun

    Her renk örneği, seçip tasarımınızda veya stil dosyasında yeniden kullanabileceğiniz 6 haneli büyük harfli HEX koduyla gösterilir.

Bu araç ne yapar

Renk Karıştırıcı yalnızca standart HEX renk gösterimiyle çalışır. #F60 gibi kısa HEX ve #FF6B35 gibi tam HEX değerlerini kabul eder, değerleri içeride normalleştirir ve her sonucu 6 haneli büyük harfli HEX kodu olarak verir.

Karışım, RGB/sRGB kanallarında basit doğrusal interpolasyondur:

  1. Her HEX rengini 0 ile 255 arasındaki R, G ve B değerlerine dönüştür.
  2. Her adım için t değerini 0 ile 1 arasında hesapla.
  3. Her kanal için başlangıç + (bitiş - başlangıç) * t formülünü kullan.
  4. Her kanalı en yakın tam sayıya yuvarla ve sonucu tekrar HEX değerine çevir.

Uç noktalar dahil edildiği için 2 adım “yalnızca başlangıç ve bitiş” anlamına gelir. #FF6B35 değerinden #1E3A8A değerine 7 adımda sonuç şöyledir:

Adım Konum HEX
1 %0 #FF6B35
2 %16,67 #DA6343
3 %33,33 #B45B51
4 %50 #8F5360
5 %66,67 #694A6E
6 %83,33 #44427C
7 %100 #1E3A8A

Uygun kullanım alanları

  • UI durum aralıkları: hover, aktif, seçili veya devre dışı durumları için ara renkler oluşturun.
  • Gradyan planlama: başka bir araçta CSS gradyanı yazmadan önce kesin HEX duraklarını belirleyin.
  • İkon ve illüstrasyon varyantları: ilişkili küçük bir renk setini tutarlı tutun.
  • Tasarım QA: göz kararı yerine kanal bazında hesaplanan orta noktayı karşılaştırın.

Aklınızda bulunsun

Bu karıştırıcı rgb(), hsl(), renk adları, alpha değerleri veya 8 haneli HEX kabul etmez. RGB, HSL, LAB, LCH, CSS snippet’leri, kontrast kontrolleri veya erişilebilirlik puanları dışa aktarmaz. Bunlara ihtiyacınız varsa HEX duraklarını aldıktan sonra bir dönüştürücü, kontrast kontrol aracı veya gradyan oluşturucu kullanın.

Sık Sorulan Sorular

Yalnızca HEX: başında # olsun ya da olmasın 3 veya 6 hane. Araç rgb(), hsl(), alpha kanalları veya renk adlarını okumaz.

Evet. İlk adım birinci renk, son adım ikinci renktir. Kalan adımlar, ikisi arasında enterpole edilen renklerdir.

Karışım RGB/sRGB içinde kanal kanal hesaplanır. Bu öngörülebilir ve kodda yeniden kullanması kolaydır, ancak algısal LAB veya LCH interpolasyonu ile aynı değildir.

Hayır. Yalnızca renk örnekleri ve HEX kodları gösterir. Üretilen HEX değerlerini CSS içinde kullanın veya erişilebilirlik oranları önemliyse bir kontrast kontrol aracına aktarın.

İlgili Araçlar

Gradyan Duvar Kağıdı Oluşturucu

Dizüstü bilgisayar, telefon veya Zoom arka planları için bulanık üç renkli gradyan duvar kağıtları oluşturun. Açıyı ve bulanıklığı rastgele belirleyin ya da elle ayarlayın.

FPS Sayacı

requestAnimationFrame ile tarayıcı FPS değerini ölçün: yumuşatma, en düşük ve en yüksek kare hızı, uyarı eşiği ve isteğe bağlı grafik. Yerel çalışır, yükleme ve API yoktur.

JSON Biçimlendirici

JSON metnini 2 veya 4 boşlukla okunabilir hale getirmek, kompakt çıktıya küçültmek ya da sonucu kopyalamadan önce söz dizimini hızlıca kontrol etmek için yapıştırın.

Renk Paleti Jeneratörü

Temel bir HEX renginden monokromatik, analog, tamamlayıcı, triadik veya tetradik paletler oluşturun ve kopyalamaya hazır CSS değişkenleri alın.

İkiliden Sekizliye Dönüştürücü

Bitleri üçer üçer gruplayarak ikiliyi sekizliye dönüştürün. Unix izinleri, eski sistemler ve kompakt sayısal gösterim için yararlıdır.

HAR Dosyası Görüntüleyici

HAR ağ kayıtlarını yerel olarak açın, istekleri filtreleyin, maskeli üstbilgileri ve zamanlama aşamalarını inceleyip temizlenmiş özetleri yüklemeden dışa aktarın.