Tiontaigh dath idir RGB, HSL agus heicsidheachúil

Is éard atá i gceist le hoibriú le dath ar an ngréasán ná juggling i gcónaí idir roinnt nodaireacht. Seachnaíonn tiontaire datha earráidí láimhe agus ligeann sé duit aistriú láithreach ó fhormáid amháin go formáid eile ag brath ar an gcomhthéacs úsáide. Tá a láidreachtaí ag gach formáid, agus fios a bheith aige cé acu ceann le húsáid atá ar cheann de na hathfhillteacha atá ag an bhforbróir tosaigh.

Seo iad na húsáidí tipiciúla a spreagann tiontú datha:

Tá
• RGB dúchasach i CSS agus JavaScript, inléite ag daoine chun ceannasach a thuiscint (cainéil dhearga, ghlasa, ghorma ar 0-255).
Déanann
• HSL athrú fánach ar lí: ní gá ach an sáithiúchán nó an gile a choigeartú gan gach cainéal a athríomh.
Is é
• HEX an fhormáid chanónach le haghaidh cóipeála agus greamaigh: sé charachtar, comhoiriúnach i ngach áit, atá oiriúnach do mhúnlaí Figma, Sceitseála nó treoracha stíle.
• Is iad na tiontuithe HEX go RGB, RGB go HEX, HEX go HSL agus a gcómhalartuithe na hoibríochtaí is coitianta i CSS agus JavaScript.

RGB agus RGBA (Dearg, Glas, Gorm, Alfa)

Déantar gach cainéal a chódú mar shlánuimhir idir 0 agus 255, a fhreagraíonn do bheart amháin in aghaidh an chomhpháirte agus a thugann 16,777,216 dathanna féideartha. Téann cainéal alfa RGBA ó 0 (trédhearcach) go 1 (teimhneach) agus rialaíonn sé trédhearcacht.

.cnaipe {
    dath an chúlra: rgb(20, 0, 182);
    dath teorann: rgba(20, 0, 182, 0.5);
}

HEX agus HEX8 (nodaireacht heicsidheachúil)

Formáid dhlúth a bhfuil an-tóir uirthi: #RRGGBB ar shé charachtar, áit a seasann gach péire cainéal RGB i mbonn 16. Cuireann an malairt #RRGGBBAA ar ocht gcarachtar an cainéal alfa i heicsidheachúlach (00 trédhearcach, FF teimhneach). Tá an nodaireacht ghearr #RGB ann freisin: is ionann #F53 agus #FF5533.

.title { dath: #1400B6; }
.scáth {dath: #1400B680; } /* alfa 50% */
.accent {dath: #F53; } /* foirm ghearr */

HSL agus HSLA (Lí, Sáithiú, Gile, Alfa)

Déanann HSL cur síos ar dhath ó thaobh dearcadh. Is uillinn é Lí ar an roth datha (0 go 360°), Sáithiú agus Gile ina gcéatadáin. Is é seo an fhormáid is fearr chun éagsúlachtaí a ghiniúint: cnaipe a lasadh os a chionn, staid dhíghníomhaithe a dhí-sáithiú, pailéad comhleanúnach a chruthú agus an dath a athrú amháin.

$bunscoil: hsl(247, 100%, 36%);
$bunscoil-hover: hsl(247, 100%, 46%);   /* níos soiléire */
$bunleibhéal balbhaithe: hsl(247, 30%, 36%);    /* níos lú sáithithe */

Formáidí eile atá ann cheana

Úsáidtear CMYK (Cian, Mageanta, Buí, Eochair) sa phriontáil: cuireann sé síos ar dhath trí dúigh a dhealú agus níl sé ábhartha ar an scáileán. Is spásanna aonfhoirmeacha iad OKLCH agus LAB a bhí le feiceáil i CSS Dath Leibhéal 4; ceadaíonn siad rialú níos fearr ar an gile a bhraith. Díríonn an uirlis seo ar thiontuithe RGB, HEX agus HSL, a chlúdaíonn formhór mór na riachtanas gréasáin.

Is ionann HEX go RGB agus an teaghrán a pharsáil i bpéirí carachtar agus gach péire a léirmhíniú mar bhunuimhir 16:

const heics = '#1400B6';
const r = parseInt(hex.slice(1, 3), 16); //20
const g = parseInt(hex.slice(3, 5), 16); //0
const b = parseInt(hex.slice(5, 7), 16); // 182

Is é RGB go HEX an oibríocht droim ar ais: tiontaítear gach cainéal go bonn 16, stuáilte go dhá charachtair, ansin comhghatáilte.

const toHex = (n) => n.toString(16).padStart(2, '0');
const heics = '#' + toHex(20) + toHex(0) + toHex(182); // '#1400b6'

Tá RGB go HSL níos algartamúla. Gnáthnóimid na bealaí idir 0 agus 1, ríomhaimid an min agus an uas chun an gile a asbhaint, ansin an saturation, ansin an lí de réir an chainéil ceannasach. Tá an fhoirmle iomlán doiciméadaithe i sonraíocht CSS Modúl Dathanna Leibhéal 3.

Oibríonn an uirlis sa dá threo idir RGB, HEX agus HSL. Chun tiontú a dhéanamh:

1. Roghnaigh an fhormáid ionchuir: RGB, HEX nó HSL.
2. Cuir isteach an luach (mar shampla #1400B6, rgb(20, 0, 182) nó hsl(247, 100%, 36%)).
3. Cuir tús leis an gcomhshó: taispeántar na coibhéisí sa dá fhormáid eile láithreach.
4. Cóipeáil an toradh inmhianaithe leis an gcnaipe tiomnaithe agus greamaigh isteach i do stílbhileog nó i do leagan amach.

Déantar an ríomh ar thaobh an bhrabhsálaí, ní sheoltar aon sonraí chuig freastalaí.

• Dearadh Gréasáin agus CSS: faigh HEX ó mhúnla agus faigh an HSL comhionann le hover nó staid ghníomhach a ghiniúint gan imeacht ón lí.
• Aitheantas amhairc agus pailéad: laghdaigh dath príomhúil i roinnt éagsúlachtaí (éadrom, dorcha, balbhaithe) trí imirt ar ghile nó ar sháithiú HSL.
• Léaráid agus grafaic: traschuir dath scáileáin (RGB) isteach i gcód heicsidheachúlach chun é a tharchur chuig bogearraí nó cliant.
• Inrochtaineacht: tiontaigh go formáid RGB chun cóimheas codarsnachta a ríomh ansin (éilíonn WCAG AA 4.5:1 do ghnáth-théacs) le dath an chúlra.
• Athróga agus Réamhphróiseálaithe CSS: Fothaí dearaidh fothaí isteach i gcomhad SASS nó i dtéama Tailwind ó dhath tagartha amháin.

Roinnt tiontuithe iomlána chun an comhfhreagras idir na trí fhormáid a léiriú:

#1400B6 -> rgb(20, 0, 182) -> hsl(247, 100%, 36%)
#FF5733 -> rgb(255, 87, 51) -> hsl(11, 100%, 60%)
#2ECC71 -> rgb(46, 204, 113) -> hsl(145, 63%, 49%)
#F1C40F -> rgb(241, 196, 15) -> hsl(48, 89%, 50%)
#FFFFFF -> rgb(255, 255, 255) -> hsl(0, 0%, 100%)
#000000 -> rgb(0, 0, 0) -> hsl(0, 0%, 0%)

Le cainéal alfa:

#1400B680 -> rgba(20, 0, 182, 0.50) -> hsla(247, 100%, 36%, 0.50)
#FF5733CC -> rgba(255, 87, 51, 0.80) -> hsla(11, 100%, 60%, 0.80)

Cad é an difríocht idir HEX agus HEX8?

Ionchódaíonn HEX clasaiceach trí chainéal RGB thar sé charachtar (#RRGGBB). Cuireann HEX8 dhá charachtar leis an gcainéal alfa (#RRGGBBAA), rud a chabhraíonn le trédhearcacht a bhainistiú in aon teaghrán amháin. Tugann #1400B6FF agus #1400B6 an dath céanna, teimhneach.

Arbh fhearr linn HSL nó RGB in CSS?

Tá an dá rud comhionann i rindreáil. Tá HSL níos sainráiteach maidir le pailéad comhleanúnach nó malairtí stáit (hover, focus) a ghiniúint, toisc go modhnaimid paraiméadar aireachtála amháin. Tá RGB fós praiticiúil agus tú ag obair le sonraí ó chanbhás nó braiteoir.

Cén fáth a dtugann mo HEX scáthú difriúil ná mar a bhíothas ag súil leis?

Trí chúis choitianta: mearbhall idir #RGB gearr agus #RRGGBB fada (déantar na carachtair a mhacasamhlú, níl siad comhcheangailte), earráid a chóipeáil ar charachtar, nó taispeáint ar scáileán neamhchalabraithe. Cinntigh freisin nach ndéanann do CSS forleagan ar theimhneacht tuismitheora a athraíonn an rindreáil deiridh.

Cén úsáid a bhaintear as cainéal alfa RGBA agus HSLA?

Rialaíonn an cainéal alfa teimhneacht an dath, ó 0 (go hiomlán trédhearcach) go 1 (go hiomlán teimhneach). Tá sé úsáideach le haghaidh forleagan, scáthanna, stáit faoi mhíchumas nó forleagan íomhá. Murab ionann agus an t-airí CSS teimhneachta, ní dhéanann RGBA agus HSLA difear ach don dath spriocdhírithe agus ní ar a leanaí.

An féidir linn dath a thiontú gan cruinneas a chailliúint?

Idir RGB agus HEX tá an tiontú cruinn, ionchódaíonn an dá fhormáid an fhaisnéis chéanna ar 24 giotán. Is éard atá i gceist le hathrú go HSL ná slánú ar lí, sáithiú agus gile; mar sin is féidir le turas cruinn RGB > HSL > RGB luach a aistrítear in aonad amháin ar chainéil áirithe a thabhairt ar ais.

Cén fáth a n-úsáideann tú tiontaire ar líne seachas feidhm intí?

Le haghaidh tástála aonuaire, pailéad a fhréamhshamhail nó seiceáil go tapa an coibhéis HEX de dhath HSL a bhaintear as samhail, cuirtear tiontaire ar líne láithreach. Le haghaidh riachtanas ríomhchláraithe athfhillteach, tá leabharlann ar nós color, chroma-js nó tinycolor2 níos oiriúnaí i gcónaí.