Pulsuz alət
Bir rəngdən
tam palitra
Brend rənginizin kodunu yazın. Alət ondan 11 tonluq şkala qurur, hər tonun harada işlədiyini və mətn üçün yararlı olub-olmadığını göstərir. Kodu bir düymə ilə kopyalayırsınız.
Sizin palitranız
Tona toxunun, kodu kopyalanır. 500 sizin əsas rənginizdir.
Fon
Sərhəd, ikon
Düymə
Hover, basılı
Mətn
Kontrast WCAG qaydası ilə ölçülür: adi mətn üçün ən az 4,5:1, iri yazı və ikon üçün 3:1.
Saytda belə görünəcək
Nümunə yalnız bu şkaladan qurulub. Tünd temada şkala tərsinə oxunur: 50 ilə 950, 100 ilə 900 yer dəyişir.
Yay endirimləri başladı
Seçilmiş məhsullarda endirim həftənin sonuna qədər davam edir.
Bakı daxilində çatdırılma pulsuzdur.
Yay endirimləri başladı
Seçilmiş məhsullarda endirim həftənin sonuna qədər davam edir.
Bakı daxilində çatdırılma pulsuzdur.
Ağ və qara qatmaqla belə alınardı
Çox yayılmış üsul: açıq tonlar üçün rəngə ağ, tündlər üçün qara qatmaq. Açıq tonlar solur, tündlər bulanır. Yuxarıdakı şkala rəngin canlılığını OKLCH hesabı ilə saxlayır.
Bu alət
Ağ və qara qatmaqla
Kodu götürün
:root {
--brand-50: #f2f0ff;
--brand-100: #e1ddff;
--brand-200: #cac3ff;
--brand-300: #ab9eff;
--brand-400: #8066ff;
--brand-500: #5f1fff;
--brand-600: #5000df;
--brand-700: #4300be;
--brand-800: #36009e;
--brand-900: #2c0085;
--brand-950: #1a0356;
}Palitra ilə iş
Hər ton öz yerində
Şkala hazır seçimlər dəstidir. Rəngi hər dəfə gözlə seçmək əvəzinə, hər işə öz tonunu verirsiniz və bütün sayt bir ailə kimi görünür.
Ən açıq tonlar: fon
Bölmələrin, kartların və bildiriş qutularının fonu. Gözü yormur, amma marka rəngini hiss etdirir.
Açıq-orta tonlar: sərhəd və ikon
Xətlər, çərçivələr, ikonlar. Ağ fonda bunlardan adi mətn üçün istifadə etməyin: kontrast çatmır.
Əsas ton: düymə
Düymələr, keçidlər, vurğular. Bütün saytda eyni ton qalır, ona görə istifadəçi nəyin basıla biləcəyini tez öyrənir.
Bir-iki pillə tünd: hover və basılı
Siçan üstünə gələndə düymə bir pillə, basılanda daha bir pillə tündləşir. Yeni rəng uydurmaq lazım gəlmir.
Ən tünd tonlar: mətn
Başlıqlar və mətn. Adi boz əvəzinə markanın tünd tonu mətni də rəng ailəsinin üzvü edir.
Başlamaq üçün üç şkala bəs edir
- Marka şkalası: düymə, keçid, vurğu
- Boz şkala: mətn, sərhəd, fon
- Status rəngləri: uğur, xəbərdarlıq, xəta, məlumat
- Tünd tema üçün yeni rəng yox: eyni şkala tərsinə
Saytda işlənən rənglərin qaydalı siyahısıdır. Hər rəngin bir neçə tonu olur və hər ton öz işini görür: biri fon, biri düymə, biri mətn üçün. Belə olanda saytda təsadüfi rəng qalmır.
50-dən 950-yə qədər 11 pillə Tailwind CSS və bir çox dizayn sistemində standartdır. Pillələr arasındakı addım kiçik olduğundan fon ilə mətn arasında lazımi kontrastı verən tonu tapmaq asanlaşır.
Əsas rəng şkalanın ortasıdır: açıq tonlar ondan ağa, tünd tonlar qaraya doğru hesablanır. Rənginiz çox açıq və ya çox tünddürsə, alət xəbərdarlıq edir: belə rəngi fon və ya mətn kimi işlətmək, düymə üçün başqa ton seçmək daha düzgündür.
Yazı ilə fon arasındakı parlaqlıq fərqidir. WCAG qaydasına görə adi mətn üçün ən az 4,5:1, iri yazı və ikon üçün ən az 3:1 lazımdır. Alət hər tonu ağ və tünd fonda ölçür və nə üçün yararlı olduğunu yazır.
Ağ qatanda rəng solur, qara qatanda bulanıq və boz görünür. Alət OKLCH rəng modelində işləyir: işıqlığı dəyişir, rəngin canlılığını isə hər pillədə ayrıca hesablayır.
CSS dəyişənləri istənilən saytda, Tailwind kodu Tailwind CSS layihələrində, JSON isə Figma pluginləri və digər alətlər üçündür. Kodu kopyalayıb layihənizə qoymaq kifayətdir.
Növbəti addım
Layihənizi danışaq!
