DESIGN.md Doğrulayıcı
Bir DESIGN.md yapıştır, yapısını ve token'larını kontrol et ve önizle, doğrudan tarayıcında.
DESIGN.md Doğrulayıcı aracını açÜcretsiz araç, kayıt gerekmez
Sitenin marka, metin, arka plan ve vurgu renklerini hex kodlarıyla, kullanıma göre sıralanmış olarak almak için bir URL yapıştır. Ücretsiz, kayıt gerekmez. Stripe'ın DESIGN.md dosyası ve Linear'ın DESIGN.md dosyası için tam örneklere bak ya da bir DESIGN.md dosyasının bunun üstüne neler eklediğini öğren.
Çıkarıcı renkleri role göre (arka plan, yüzey, metin, marka, vurgu ve kenarlık) gruplar ve her birinin sayfanın ne kadarını kapladığına göre sıralar. Bunları yeniden kullanmak için hex kodlarını stillerine dağıtmak yerine her role bir ad ver; böylece tek bir değişiklik rengin geçtiği her yeri günceller.
1. Renkleri tona göre değil, role göre adlandır. --color-text-muted bir yeniden tasarımdan sonra da anlamlıdır; --gray-600 ise nereye ait olduğunu söylemez. Kopyaladığın hex kodlarını yerleştir.
:root {
--color-brand: #635bff;
--color-text: #0a2540;
--color-text-muted: #425466;
--color-surface: #ffffff;
--color-surface-muted: #f6f9fc;
--color-border: #e3e8ee;
}
body { background: var(--color-surface); color: var(--color-text); }
a, .button-primary { color: var(--color-brand); }2. Tailwind'de kullan. Her değişken bg-surface, text-ink-muted ve border-line gibi bir dizi yardımcı sınıfa dönüşür.
/* app.css, Tailwind CSS v4 */
@theme {
--color-brand: #635bff;
--color-ink: #0a2540;
--color-ink-muted: #425466;
--color-surface: #ffffff;
--color-surface-muted: #f6f9fc;
--color-line: #e3e8ee;
}3. Kullandığın çiftleri kontrol et. Gövde metninin arka planına karşı en az 4.5:1, büyük metnin ise 3:1 kontrast oranına ihtiyacı vardır. Çıkarıcı, ana metin renginin sayfa arka planına karşı oranını gösterir; kullanmayı planladığın diğer çiftleri yayına almadan önce kontrol et.
Renkler bir tasarım sisteminin bir katmanıdır. Bir DESIGN.md onları yazı ölçeği, boşluklar ve bileşen kurallarıyla bir arada tutar; böylece kodlama ajanın doğru rengi doğru yerde kullanır.
SSS
Ücretsiz Web Sitesi Renk Paleti Çıkarıcı hakkında kısa yanıtlar.
Sayfa gerçek bir tarayıcıda yüklenir ve boyadığı renkler sayfanın ne kadarını kapladıklarına göre ölçülür. Her renge en olası rol atanır: arka plan, panel, metin, marka, vurgu ya da kenarlık.
Palet, sayfanın gerçekten kullandığı renkleri kapsama alanına göre sıralayarak en fazla on iki tane listeler. Görsellerin ya da videoların içindeki renkler, yalnızca üzerine gelindiğinde görünen renkler ve sitenin diğer sayfalarında kullanılan renkler sayılmaz.
Hayır. Sayfayı, yeni bir ziyaretçinin varsayılan olarak gördüğü temada okur; bu genellikle açık temadır. Varsayılan olarak karanlık olan siteler karanlık olarak gelir. Sitenin karanlık modu varsa tam bir DESIGN.md onu da kapsar.
Dosya olarak değil. Hex kodlarını kopyalayabilirsin: tek bir renk için bir renk örneği seç ya da hepsini birden, her satıra bir tane olacak şekilde kopyala.
Evet, her seferinde bir piksel. Chrome veya Edge'de bir öğeye sağ tıkla, İncele'yi (Inspect) seç ve Styles (Stiller) bölmesinde herhangi bir rengin yanındaki renk karesine tıkla; açılan seçicide sayfadaki herhangi bir noktayı okuyan bir damlalık vardır. Firefox'ta aynı damlalık Denetçi (Inspector) araç çubuğunda bulunur.
Bu araç yalnızca renkleri listeler. Bir DESIGN.md ise bir sitenin renklerini rolleriyle birlikte, yazı ölçeğini, boşluklarını ve bileşen kurallarını, kodlama ajanının izleyebileceği tek bir dosyada toplar.
Bir DESIGN.md yapıştır, yapısını ve token'larını kontrol et ve önizle, doğrudan tarayıcında.
DESIGN.md Doğrulayıcı aracını açBir web sitesinin hangi fontları kullandığını görmek için URL gir, ücretsiz ve kayıt olmadan.
Web Sitesi Font Bulucu aracını açHerhangi bir sitenin renklerini, yazı ölçeğini, boşluklarını ve bileşenlerini içeren, kodlama ajanın için hazır bir DESIGN.md al.