Teknobench
Catagóirí ▾
Teanga: ga ▾

Gineadóir Tintí agus Scátha

Gin tintí agus scátha aon datha i gcéimeanna 5, 10, 20 nó 25 %, measctha in OKLCH nó sRGB, agus easpórtáil iad mar athróga CSS nó mar chumraíocht Tailwind.

Tintí (measctha le bán)

    Scátha (measctha le dubh)

      Conas an gineadóir tintí agus scátha a úsáid

      1. Roghnaigh Bundath leis an sampla, nó clóscríobh luach i Cód datha: #1E90FF, rgb(30 144 255), hsl(210 100% 56%) nó ainm CSS mar teal.
      2. Roghnaigh Céim: 5 %, 10 %, 20 % nó 25 %. Le 10 %, faigheann tú tintí ag 10 %, 20 % … 100 % agus an líon céanna scátha.
      3. Roghnaigh conas Measc i: OKLCH (tuisceana) nó sRGB (clasaiceach). Nuashonraíonn an dá shraith ag an am céanna: Tintí (measctha le bán) agus Scátha (measctha le dubh), gach ceann ag tosú ón mbundath.
      4. Cliceáil Cóipeáil faoi aon sampla chun a chód HEX a chóipeáil.
      5. Faoi Easpórtáil mar, roghnaigh Athróga CSS, Cumraíocht Tailwind (v3), Tailwind @theme (v4), Athróga SCSS nó JSON, socraigh Ainm mar primary nó brand, ansin Cóipeáil nó Íoslódáil an cód.

      Oibríonn an uirlis seo i do bhrabhsálaí. Ní chuirtear aon rud chuig freastalaí.

      Tintí, scátha agus tonnta

      I dteoiric datha, is dath measctha le bán é tint, is dath measctha le dubh é scáth, agus is tone dath measctha le liath. Insíonn an céatadán cé mhéad bán nó dubh a chuirtear leis: is ionann tint 30 % agus 70 % bundath agus 30 % bán. Ag 100 % sroicheann tú bán glan nó dubh glan, agus sin an fáth gurb é #FFFFFF nó #000000 an sampla deireanach i ngach sraith i gcónaí; marcálann sé deireadh an scála.

      Is iad tintí agus scátha an bealach is tapa chun scála comhsheasmhach a thógáil ó dhath branda amháin: cúlraí éadroma agus staideanna hover ó na tintí, imill, staideanna brúite agus téacs dorcha ó na scátha.

      Measc OKLCH nó sRGB?

      Measctha sRGB (clasaiceach) na luachanna dearg, glas agus gorm go díreach. Is é an rud a dhéanann formhór na ngineadóirí níos sine é agus meaitseálann sé CSS color-mix(in srgb, …). Is é foirmle tinte go simplí channel + (255 − channel) × p, agus do scáth channel × (1 − p). Tá sé intuartha, ach níl na céimeanna cothrom ó thaobh na tuisceana de: claonann gormacha i dtreo corcra agus iad ag éadromú, agus is minic go mbreathnaíonn scátha dorcha lathúil.

      Measctha OKLCH (tuisceana) sa spás datha OKLCH a dhear Björn Ottosson in 2020, cosúil le CSS color-mix(in oklch, …). Idirshuíomhaítear gile, cróma agus ton ar leithligh. Níl aon ton ag bán agus dubh, mar sin coimeádtar an buntón an bealach ar fad, agus athraíonn gach céim gile faoi mhéid cosúil go hamhairc. Tugtar dathanna a thitfeadh lasmuigh de ghamut sRGB ar ais trí chróma a laghdú, ní trí chainéil a ghearradh, mar sin fanann an ton seasta. Do chórais dearaidh, tugann sé seo scálaí níos glaine agus níos cothroime de ghnáth.

      An easpórtáil a úsáid

      • Táirgeann Athróga CSS bloc :root mar --primary-tint-20 agus --primary-shade-40, réidh le greamú i scarbhileog stíle.
      • Tugann Cumraíocht Tailwind (v3) réad colors do theme.extend.colors; scríobhann tú ranganna mar bg-primary-tint-20 nó text-primary-shade-60 ansin. Coimeádann DEFAULT an bundath, mar sin oibríonn bg-primary freisin.
      • Tugann Tailwind @theme (v4) athróga --color-… do chumraíocht CSS-ar-dtús Tailwind 4.
      • Oireann Athróga SCSS agus JSON d’uirlisí tógála eile agus do chomharthaí dearaidh.

      Déantar na hainmneacha a íoslitriú agus éiríonn spásanna ina hifin, mar sin éiríonn “Brand Blue” ina brand-blue.

      Ceisteanna coitianta

      Cad é an difríocht idir tint agus scáth?

      Cuireann tint bán leis agus déanann sí an dath níos éadroime; cuireann scáth dubh leis agus déanann sé níos dorcha é. Tugann liath a chur leis tone, a laghdaíonn sáithiú gan an ghile a athrú mórán.

      Cén chéim ba cheart dom a roghnú?

      Tugann 10 % naoi gcéim úsáideacha ar gach taobh, go leor d’fhormhór na gcomhéadan. Úsáid 20 % nó 25 % do scála gearr i gcur i láthair, agus 5 % nuair atá athruithe an-mhíne hover nó imill de dhíth ort.

      Cén fáth a mbreathnaíonn mo thintí sRGB corcra?

      Aistríonn gorm a mheascadh le bán in sRGB an ton braite i dtreo violet (éifeacht aitheanta de spás sRGB). Aistrigh go OKLCH (tuisceana) chun an ton a choimeád seasta.

      An bhfuil na dathanna seo inrochtana?

      Ní sheiceálann an gineadóir codarsnacht. Tástáil na péirí a bhfuil sé i gceist agat a úsáid, mar théacs ar thint éadrom, le seiceálaí codarsnachta: éilíonn WCAG 4.5:1 do ghnáth-théacs.

      An féidir liom an t-aschur a úsáid le scála 50–950 Tailwind?

      Úsáideann an easpórtáil ainmneacha céatadáin (tint-10, shade-30) ionas go bhfanann an bhrí soiléir. Más fearr leat eochracha uimhrithe, athainmnigh cúpla céim sa chód easpórtáilte, mar shampla an tint 90 % mar 50 agus an scáth 80 % mar 950.

      Uirlisí gaolmhara