Mai Juyar da Launi — HEX, RGB, HSL Kan Layi _

Mene ne juyar da launi?

Kowane launi da mai binciken ka ke nuna a ƙarshe shine triple na sRGB — lambobi uku tsakanin 0 da 255 don channels na ja, kore, da shuɗi, da kuma alpha zaɓi. Ƙa'idar CSS Color Level 4 tana bayyana tsarurai da yawa na rubutu waɗanda suke kewayawa zuwa triple ɗaya, da kuma sararin OKLCH mai daidaito na fahimta. Wannan kayan aiki yana karanta kowane daga cikinsu, yana juyar zuwa duk, kuma yana ba da rahoton daidaicin bambancin WCAG 2.1 da launi na biyu don ku iya aika interfaces masu saukin shiga da kwarin gwiwa.

Yadda juyar da launi ke aiki?

Juyarwa jerin sauye-sauye na layi da marasa layi da aka bayyana sosai ne. Kowane matakin yana aiki a cikin mai binciken ka — babu shigarwa da ke isa uwar garkenmu:

1. An bincike shigarwarku. Kayan aikin yana gano ta atomatik HEX na lambobi 3, 4, 6, ko 8, nau'ukan aiki na rgb()/rgba()/hsl()/hsla()/hsv()/hwb() a cikin ko tsarin legacy comma ko tsarin slash-alpha na zamani, ko kowane daga cikin launukan CSS 150 da aka sanya suna (rebeccapurple da ya haɗa).
2. An daidaita launin da aka bincike zuwa sRGB na yau da kullun — floats huɗu {r, g, b, a} kowannensu a cikin kewayen 0–1. Wannan shine hujja guda ɗaya ta gaskiya da ake samo daga gare ta duk tsarukan fitowar.
3. HEX yana fitowa daga zagayawa kowane channel zuwa ƙimar byte 0–255 da haɗa digits na hex. RGB / RGBA suna buga bytes ɗaya. HSL da HSV suna amfani da algorithms na ma'auni na W3C na cylindrical-coordinate; HWB yana samo hue daga HSV, farinta daga min(r, g, b), da baƙinta daga 1 - max(r, g, b).
4. CMYK kusan yana da kuskure — k = 1 - max(r, g, b), sannan c, m, y daga channels da suka rage. Yana dacewa don kallon allon amma ba don buga ba: fitowar CMYK na ainihin yana buƙatar profile na ICC wanda wannan kayan aiki da gangan ba ya saka.
5. OKLCH yana biye da hanyar gaba ta css-color-4: ana linearise sRGB, ana ninke ta matrix na LMS, ana cire tushen cube, ana ninke ta matrix na LMS-zuwa-OKLab, kuma a ƙarshe ana juyar daga OKLab mai lebur zuwa OKLCH na polar. OKLCH yana da daidaito na fahimta, wanda yana sanya shi sararin da ya dace don zana palettes da ke kama daidaituwa ga idon ɗan adam.

Me ya sa ake amfani da wannan mai juyar da launi?

• Sirri: kowane juyarwa yana aiki a cikin mai binciken ka ta amfani da JavaScript na yau. Launi da kuka lallaba ba ya taɓa barin na'urarku, wanda ke da mahimmanci don aikin alamar da ba a saki ba, tsarin zane na ciki, da kwafin abokin ciniki ƙarƙashin NDA.
• Miƙa hannun masu zane zuwa masu haɓakawa: lallaba HEX daga Figma da karanta baya string na rgb() don Tailwind config, string na hsl() don kadara ta CSS, ko string na oklch() don palette na zamani — kowane tsari a wuri ɗaya, ba tare da kwafi-lallaba tsakanin tabs ba.
• Daidaiton WCAG: mai duba bambanci yana amfani da tsarin luminance ta WCAG 2.1 daidai da ƙofofin AA (4.5 / 3.0) da AAA (7.0 / 4.5) da aka buga don rubutu na yau da kullun da manyan rubutu. Daidaicin da aka ba da rahoto yana daidaita masu ƙididdiga na hannu zuwa cikin 0.01.
• Yanayin duhu da samo palette: HSL da OKLCH suna bayyana haske a matsayin channel ɗaya, don haka yana sauƙin ɗaga launi na alamar kasuwanci sama ko ƙasa akan axis na haske don samo tokens masu haɗuwa na yanayin duhu ko samar da ramp na palette na matakai 10 daga iri ɗaya.

Menene abubuwan da ake amfani da juyar da launi a kullum?

Juyar da launi yana bayyana a cikin haɓakar yanar gizo, zane, da aikin saukin shiga:

• Tsarukan zane: juyar da HEX na alamar kasuwanci zuwa tokens na HSL da OKLCH masu haɗuwa don scale na kadara ta CSS, sannan tabbatar da cewa kowane haɗin token yana wuce WCAG AA da bango na shafi.
• Duba saukin shiga: lallaba ma'aurata na gaba da bango daga allon kayan aiki na ainihin da karanta daidaicin bambanci da hukuncin AA/AAA don rubutu na nauyi na yau da kullun da manyan rubutu ta duba guda ɗaya.
• Zagayowar kayan aiki: ciro launi daga picker na allon (HEX), lallaba shi anan, da kwafi string na hsl() ko oklch() kai tsaye a cikin Tailwind, tokens na Figma, ko jigo na CSS-in-JS.

Yaya misali na juyar da launi ke kama?

Dauki mashahuri rebeccapurple. Binciken launi da aka sanya suna yana warware shi zuwa #663399. Juyarwar RGB tana ba da rgb(102, 51, 153). Juyarwar HSL tana ba da hsl(270, 50%, 40%) — launi na violet, rabin cika, kashi huɗu na goma mai haske. Duba wannan launi da fari mai tsabta tare da kayan aikin bambanci yana dawo da daidaici kusa da 7.39, wanda ya wuce AAA (7.0) don rubutu na yau da kullun da AAA (4.5) don babban rubutu — zaɓin gaba mai ƙarfi kuma mai saukin shiga. Zagayar #663399 ta RGB → HSL → RGB → HEX tana dawo da string na asali daidai, byte biye da byte.

Yi amfani da wannan mai juyar da launi a matsayin hujja ta sauri don kowane launi da kuka gamu da shi — a cikin code, a cikin fayilolin zane, ko a cikin allon — da mai duba bambanci a matsayin duba lafiya kafin aika. Komai yana gudana gida, babu abin da aka yi rikodin, kuma lissafin juyarwa yana biye da ƙa'idodin W3C da WCAG da aka buga don lambobi su daidaita da abin da kayan aikin duba ko devtools na mai binciken za su ba da rahoto.