Teknobench
Kategoriji ▾
Lingwa: mt ▾

Ġeneratur tat-tints u tax-shades

Iġġenera tints u shades ta’ kwalunkwe kulur b’passi ta’ 5, 10, 20 jew 25 %, imħallta f’OKLCH jew sRGB, u esportahom bħala varjabbli CSS jew Tailwind.

Tints (imħallta mal-abjad)

    Shades (imħallta mal-iswed)

      Kif tuża l-ġeneratur tat-tints u tax-shades

      1. Agħżel Kulur bażi bil-kampjun, jew ikteb valur f’Kodiċi tal-kulur: #1E90FF, rgb(30 144 255), hsl(210 100% 56%) jew isem CSS bħal teal.
      2. Agħżel Pass: 5 %, 10 %, 20 % jew 25 %. B’10 %, tikseb tints f’10 %, 20 % … 100 % u l-istess numru ta’ shades.
      3. Agħżel kif Ħallat f’: OKLCH (perċettwali) jew sRGB (klassiku). Iż-żewġ ringieli jinbidlu f’daqqa: Tints (imħallta mal-abjad) u Shades (imħallta mal-iswed), kull waħda tibda mill-bażi.
      4. Ikklikkja Ikkopja taħt kwalunkwe kampjun biex tikkopja l-kodiċi HEX tiegħu.
      5. Taħt Esporta bħala, agħżel Varjabbli CSS, Konfigurazzjoni Tailwind (v3), Tailwind @theme (v4), Varjabbli SCSS jew JSON, issettja Isem bħal primary jew brand, imbagħad Ikkopja jew Niżżel il-kodiċi.

      Kollox jaħdem fil-brawżer tiegħek; xejn minn dak li tikteb ma jintbagħat lil server.

      Tints, shades u toni

      Fit-teorija tal-kuluri, tint huwa kulur imħallat mal-abjad, shade huwa kulur imħallat mal-iswed, u ton huwa kulur imħallat mal-griż. Il-perċentwal jgħid kemm jiżdied abjad jew iswed: tint ta’ 30 % huwa 70 % kulur bażi u 30 % abjad. B’100 tilħaq abjad pur jew iswed pur, u għalhekk l-aħħar kampjun ta’ kull ringiela huwa dejjem #FFFFFF jew #000000; jimmarka t-tmiem tal-iskala.

      It-tints u x-shades huma l-aktar mod mgħaġġel biex tibni skala konsistenti minn kulur wieħed tal-brand: sfondi ċari u stati tal-hover mit-tints, borders, stati tal-buttuni ppressati u test skur mix-shades.

      Taħlit OKLCH jew sRGB?

      sRGB (klassiku) iħallat direttament il-valuri tal-aħmar, tal-aħdar u tal-blu. Hekk jagħmlu l-biċċa l-kbira tal-ġeneraturi ta’ qabel u jaqbel ma’ CSS color-mix(in srgb, …). Il-formula għal tint hija sempliċement kanal + (255 − kanal) × p, u għal shade kanal × (1 − p). Hija prevedibbli, imma l-passi mhumiex indaqs perċettwalment: il-blu għandu t-tendenza jmur lejn vjola kif jiċċara, u x-shades skuri spiss jidhru mċajprin.

      OKLCH (perċettwali) iħallat fl-ispazju tal-kuluri OKLCH iddisinjat minn Björn Ottosson fl-2020, bħal CSS color-mix(in oklch, …). Id-dawl, il-kroma u t-tonalità jiġu interpolati separatament. L-abjad u l-iswed m’għandhomx tonalità, allura t-tonalità tal-bażi tinżamm sal-aħħar, u kull pass ibiddel id-dawl b’ammont viżwalment simili. Kuluri li jaqgħu barra mill-gamma sRGB jinġiebu lura billi titnaqqas il-kroma, mhux billi jinqatgħu l-kanali, allura t-tonalità tibqa’ stabbli. Għal sistemi tad-disinn, dan normalment jagħti skali iktar nodfa u indaqs.

      L-użu tal-esportazzjoni

      • Varjabbli CSS jipproduċu blokk :root bħal --primary-tint-20 u --primary-shade-40, lest biex jitwaħħal fi stylesheet.
      • Konfigurazzjoni Tailwind (v3) tagħti oġġett colors għal theme.extend.colors; imbagħad tikteb klassijiet bħal bg-primary-tint-20 jew text-primary-shade-60. DEFAULT iżomm il-bażi, allura bg-primary jaħdem ukoll.
      • Tailwind @theme (v4) jagħti varjabbli --color-… għall-konfigurazzjoni CSS-first ta’ Tailwind 4.
      • Varjabbli SCSS u JSON jaqblu ma’ għodod tal-build oħra u design tokens.

      L-ismijiet jinkitbu b’ittri żgħar u l-ispazji jinbidlu b’hyphens (-): “Brand Blue” isir brand-blue.

      Mistoqsijiet frekwenti

      X’inhi d-differenza bejn tint u shade?

      Tint iżid l-abjad u jagħmel il-kulur iktar ċar; shade iżid l-iswed u jagħmlu iktar skur. Jekk iżżid griż tikseb ton, li jbaxxi s-saturazzjoni mingħajr ma jbiddel wisq id-dawl.

      Liema pass għandi nagħżel?

      10 % jagħti disa’ passi użabbli fuq kull naħa, biżżejjed għall-biċċa l-kbira tal-interfaces. Uża 20 % jew 25 % għal skala qasira f’preżentazzjoni, u 5 % meta teħtieġ varjazzjonijiet fini ħafna tal-hover jew tal-border.

      Għaliex it-tints sRGB tiegħi jidhru vjola?

      Li tħallat blu ma’ abjad f’sRGB iċaqlaq it-tonalità perċepita lejn il-vjola (effett magħruf tal-ispazju sRGB). Aqleb għal OKLCH (perċettwali) biex iżżomm it-tonalità stabbli.

      Dawn il-kuluri huma aċċessibbli?

      Il-ġeneratur ma jivverifikax il-kuntrast. Ittestja l-pari li bi ħsiebek tuża, bħal test fuq tint ċar, b’verifikatur tal-kuntrast: WCAG teħtieġ 4.5:1 għal test normali.

      Nista’ nuża l-output mal-iskala 50–950 ta’ Tailwind?

      L-esportazzjoni tuża ismijiet bil-perċentwal (tint-10, shade-30) biex it-tifsira tibqa’ ċara. Jekk tippreferi ċwievet numerati, semmi mill-ġdid ftit passi fil-kodiċi esportat, per eżempju t-tint ta’ 90 % bħala 50 u x-shade ta’ 80 % bħala 950.

      Għodod relatati