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

ASCII Tablosu Referansı

NUL, LF ve DEL dahil her kod için ondalık, onaltılık, sekizlik ve ikili değerlerle HTML sayısal karakter başvurusu gösterimini sunan tam ASCII tablosu.

HTML Karakter Referansı

HTML varlıklarının aranabilir listesi; adlandırılmış ve sayısal kodlarıyla birlikte özel karakter ve semboller için tek tıkla kopyalama.

Klavye kısayolları başvurusu

macOS, Windows ve Linux’ta VS Code, Chrome ve GNU Readline kullanan Bash için belgelenmiş varsayılan kısayolları arayın.

Dosya Boyutu Dönüştürücü

Bayt, KB, MB, GB, TB ve ikili IEC birimleri (KiB, MiB, GiB, TiB) arasında, ondalık ve ikiliyi dilediğiniz gibi birleştirerek dönüşüm yapın.

JSON Minifier

API yanıtlarında ve gömülü yapılandırmalarda payload boyutunu küçültmek için boşlukları, satır sonlarını ve yorumları kaldırarak JSON'u küçültün.

CSS Fiyat Tablosu Oluşturucu

HTML + CSS ile tek bir fiyat kartı oluşturun: paket adı, fiyat ve marka vurgu rengi. Kodu açılış sayfanıza kopyalayın.

Araç diğer dillerde mevcuttur