CSS Color Mix Generator

İki renk ile karışım oranını seçin ve CSS color-mix(in srgb, ...) bildirimi alın; tarayıcı desteğini hedeflerinizde kontrol edin.

Bu aracın ana girdisi tarayıcınızda işlenir ve harici API’ye gönderilmez. Yazı tipi ve arayüz dosyaları harici sağlayıcılardan yüklenebilir.

YULATOOLS · KULLANIM REHBERİ

CSS Color Mix Generator

CSS color-mix oluşturucu, iki HEX rengini ve birinci rengin karışımdaki yüzdesini alarak `color-mix(in srgb, ...)` bildirimi üretir. Renk örneği ve oran değiştikçe kod otomatik güncellenir.

`color-mix()` tarayıcıların modern CSS renk işlevlerinden biridir; eski istemciler veya proje derleyicileri bunu aynı şekilde desteklemeyebilir. Üretilen satırı bir bileşene ekleyip hedef tarayıcılarda test edin ve gerekiyorsa yedek renk tanımlayın.

Hangi durumlarda kullanılır?

  • İki marka renginden ara ton üreterek hover durumu tasarlamak.
  • Yüzde oranının CSS renk karışımını nasıl değiştirdiğini hızlıca denemek.

Nasıl kullanılır?

  1. İki renk seçicisinden karıştırılacak HEX renklerini belirleyin.
  2. Kaydırıcıyla birinci rengin yüzde katkısını ayarlayın; ikinci renk kalan katkıyı oluşturur.
  3. Üretilen color-mix satırını CSS'e ekleyin ve hedef tarayıcı ile kontrast ölçümünde doğrulayın.

Örnek

Girdi: #00d9ff, #f5b942; birinci renk %50

Çıktı: background: color-mix(in srgb, #00d9ff 50%, #f5b942);

Kimler için?

  • CSS geliştiricileri
  • Tasarım sistemi tokenları hazırlayan ekipler
  • Renk geçişlerini prototipleyen UI tasarımcıları

Gizlilik ve sınırlar

Renk seçimi ve CSS satırı tarayıcıda üretilir; araç girdi renklerini harici API'ye göndermez. Üretilen kodun tarayıcı uyumluluğu bu araç tarafından test edilmez.

Sık sorulan sorular

Araç renkleri hangi uzayda karıştırıyor?

Üretilen kod `color-mix(in srgb, ...)` kullanır. Renk uzayı CSS içinde açıktır; başka bir renk uzayı gerekiyorsa çıktıyı elle değiştirin.

Yüzde 50 ne demektir?

Birinci renk için 50% katkı belirtilir. İkinci renk, color-mix() işlevinde kalan yüzdeyi tamamlar.

Eski tarayıcılarda çalışır mı?

Tarayıcı ve sürüm desteği değişebilir. CSS özellik desteğini hedeflediğiniz cihazlarda kontrol edin ve proje gerektiriyorsa yedek renk tanımlayın.

Çıktı erişilebilir renk sağlar mı?

Hayır. Karışım kodu üretir; WCAG kontrastını ölçmez. Metin ve arka plan kullanımlarını ayrıca test edin.