Renk karıştırıcı: hızlı başlangıç rehberi

İlk başarılı çalışma için gereken her şey: ne yapıştırılır, hangi seçenek gerçekten önemlidir ve sonuç nasıl okunur.

Giriş Renk karıştırıcı Çıkış %100 tarayıcınızda çalışır — verileriniz cihazınızdan çıkmaz.
Renk karıştırıcı — Giriş → Çıkış. %100 tarayıcınızda çalışır — verileriniz cihazınızdan çıkmaz.

Nasıl kullanılır

  1. Aracı açın ve girdinizi sol bölmeye yapıştırın.
  2. Yalnızca görevinizin gerçekten gerektirdiği seçenekleri ayarlayın; varsayılanlar çoğu girdi için doğrudur.
  3. Sonucu sağ bölmde okuyun; yazdıkça güncellenir.
  4. Sonucu almak için Kopyala, dosya olarak kaydetmek için İndir kullanın.
Nasıl kullanılır · Renk karıştırıcı 1 Verileri girişkutusuna yapıştırın(veya örneğiyükleyin). 2 Hedef biçime göreseçenekleri ayarlayın. 3 Çıktıyı kopyalayın,indirin veya inceleyin— yazarken canlıgüncellenir.
Nasıl kullanılır — 3

Örnekler

Mix against #ffffff at 50% and switch the space to CIE Lab for a perceptually even ramp.

Giriş

#0ea5b7

Çıkış — Sonuçlar

#0ea5b7 + #ffffff at 50% (mixed in RGB)

Result
  HEX   #87d2db
  RGB   rgb(135, 210, 219)
  HSL   hsl(186.4, 54.0%, 69.3%)

Contrast against white : 1.71:1
Contrast against black : 12.26:1

Ramp (9 steps)
    0%  #0ea5b7
   13%  #2cb0c0
   25%  #4abcc9
   38%  #68c7d2
   50%  #87d2db
   63%  #a5dde4
   75%  #c3e9ed
   88%  #e1f4f6
  100%  #ffffff

CSS
  --mix: #87d2db;
  background: linear-gradient(90deg, #0ea5b7, #ffffff);

Çalıştır

Açıklama

Blend two colours in sRGB, HSL or perceptual CIE Lab and generate a ramp with contrast ratios.

Renk karıştırıcı → · Nasıl kullanılır → · Renk araçları →

İlgili araçlar

Ondalık Renk seçiciInteractive picker with HEX, RGB and HSL output.Renk Code dönüştürücüConvert between HEX, RGB, HSL and named colors.Renk Ad denetleyici (WCAG)Verify text contrast ratios against WCAG AA/AAA.Renk Kontrast üreteciShades, tints and complementary schemes from one color.Yaş Renk üreteciBatch random colors with copyable codes.CSS Adlı Renkler ReferansAll 148 CSS color names with codes and previews.