HedgieTools

Renk Paleti Oluşturucu

Ana renginden başla, eksiksiz bir arayüz paleti elde et: ikincil, üçüncül, başarı, uyarı, tehlike ve nötr renkler; tonları ve kontrast kontrolleriyle birlikte.

Ana rengin

Bir değer yaz ya da bir renk seç: paletin geri kalanı onun etrafında oluşturulur.

İkincil ve üçüncül
Değer biçimi

#2563EB gibi bir HEX değeri yaz ya da rengi seçmek için kareye tıkla.

Renk paletin

Kopyalamak için bir değere ya da bir tona (50–950) tıkla. Kalem, önerilen bir rengi kendi renginle değiştirir: ana rengi değiştirdiğinde bu renk sabit kalır.

  • —

    Birincil

    senin rengin
  • —

    İkincil

    tamamlayıcı
  • —

    Üçüncül

    tamamlayıcıya yakın
  • —

    Bilgi

    mavi
  • —

    Başarı

    yeşil
  • —

    Uyarı

    turuncu
  • —

    Tehlike

    kırmızı
  • —

    Nötr

    renk tonlu gri

Açık ve koyu token’lar

Arayüzünün kullanım renkleri, açık ve koyu temaya hazır. Her biri paletteki bir tona karşılık gelir. Kopyalamak için tıkla.

  • --backgroundSayfa arka planı
  • --surfaceKartlar ve paneller
  • --surface-mutedİkincil alanlar
  • --borderKenarlıklar ve ayırıcılar
  • --textAna metin
  • --text-mutedİkincil metin
  • --primaryDüğmeler ve bağlantılar
  • --primary-hoverÜzerine gelme durumu
  • --on-primaryBirincil renk üzerindeki metin
  • --focus-ringOdak çerçevesi
  • --secondaryİkincil vurgu
  • --tertiaryÜçüncül vurgu
  • --infoBilgi
  • --info-softBilgi arka planı
  • --successBaşarı
  • --success-softBaşarı arka planı
  • --warningUyarı
  • --warning-softUyarı arka planı
  • --dangerTehlike, hata
  • --danger-softHata arka planı

Uyumlu renkler

Ana renginin etrafındaki klasik renk uyumları; illüstrasyonlar, grafikler veya vurgular için.

  • Tamamlayıcı

    karşıt renk

  • Bölünmüş tamamlayıcı

    karşıt renkten daha yumuşak

  • Analog

    komşu renkler

  • Üçlü

    dengeli üç renk

  • Dörtlü

    kare oluşturan dört renk

  • Monokromatik

    tek renk tonu, farklı yoğunluklar

Önizleme ve kontrast

Paletin birkaç arayüz öğesine uygulanmış hali ve her eşleşmenin WCAG kurallarına göre okunabilirliği.

Önizleme teması
Sayfa başlığıBaşlığın altında, daha az önemli ikincil metin.
Bağlantı ve düğmeler içeren bir kart.
BirincilİkincilÜçüncül
Bilgi · Bir güncelleme mevcut.
Başarı · Değişikliklerin kaydedildi.
Uyarı · Aboneliğin yakında sona eriyor.
Hata · Ödeme başarısız oldu.
  • Arka plan üzerinde metin
    Oran—Normal metin—Büyük metin—AAA—
  • Arka plan üzerinde ikincil metin
    Oran—Normal metin—Büyük metin—AAA—
  • Arka plan üzerinde bağlantı
    Oran—Normal metin—Büyük metin—AAA—
  • Birincil düğme
    Oran—Normal metin—Büyük metin—AAA—
  • İkincil düğme
    Oran—Normal metin—Büyük metin—AAA—
  • Arka plan üzerinde üçüncül metin
    Oran—Normal metin—Büyük metin—AAA—
  • Bilgi bildirimi
    Oran—Normal metin—Büyük metin—AAA—
  • Başarı bildirimi
    Oran—Normal metin—Büyük metin—AAA—
  • Uyarı bildirimi
    Oran—Normal metin—Büyük metin—AAA—
  • Tehlike bildirimi
    Oran—Normal metin—Büyük metin—AAA—

Dışa aktar

Paleti yukarıda seçilen biçimde al (HEX).

Kodu oluşturmak için bir ana renk gir.

Paletin CSS değişkenleri (--color-primary-500…). Token’lar bu değişkenlere işaret eder; koyu temayı açmak için html öğesine data-theme="dark" ekle.

Renk paleti oluşturucu hakkında

Markanın ana rengini seç ve bir arayüzün ihtiyaç duyduğu her şeyi onun etrafında elde et: eşlik eden renkler, durum renkleri, nötrler, tonlar, açık ve koyu token’lar, kontrast kontrolleri ve yapıştırmaya hazır kod; üstelik tarayıcından hiç çıkmadan.

Tek renkten eksiksiz bir renk paleti

Araç, ana renginden bir ikincil ve bir üçüncül renk, onun tarzına uyan durum renkleri (bilgi, başarı, uyarı, tehlike) ve arka planlar ile metinler için hafifçe renklendirilmiş griler türetir.

Kullanıma hazır tonlar

Her renk, en açıktan (50) en koyuya (950) on bir tonda gelir; arka planlar, kenarlıklar, üzerine gelme durumları ve metinler için. Önerilen bir renk sana uymazsa onu kendi renginle değiştir: tonları da ona göre güncellenir.

Açık ve koyu token’lar

Arka plan, yüzey, kenarlık, metin, üzerine gelme, odak ve bildirim arka planları: her kullanım rengi paletteki bir tona karşılık gelir ve açık tema için bir, koyu tema için bir değer taşır.

Kontrol edilen kontrast

Her metin ve arka plan eşleşmesi WCAG kurallarına göre değerlendirilir: normal metin için 4,5:1, büyük metin için 3:1 ve AAA düzeyi için 7:1.

CSS, Tailwind, JSON olarak dışa aktar

Her değeri HEX, RGB, HSL veya OKLCH olarak kopyala ya da bir CSS değişkenleri dosyası, bir Tailwind v4 teması, bir Tailwind v3 yapılandırması, JSON veya düz bir liste indir. Her şey tarayıcında gerçekleşir: hiçbir şey gönderilmez ya da kaydedilmez.

İlgili araçlar