Olùmúdásílẹ̀ Àwọ̀-Àkójọpọ̀ Ọ̀fẹ́

Bí Ó Ṣe Ń Ṣiṣẹ́

A kọ́ irinṣẹ́ náà láìsí ìwé-ìṣirò ìta kankan — gbogbo ìṣírò àwọ̀ ń ṣiṣẹ́ ní JavaScript tí a fi ọwọ́ kọ tààrà nínú aṣàwákiri rẹ. Ó ń yí àwọ̀ tí o yàn padà láàrin hex àti HSL, ó sì fi àwọn òfin ìbámu ẹ̀kọ́ àwọ̀ kíláásíkì (complementary, triadic, analogous, àti bẹ́ẹ̀ bẹ́ẹ̀ lọ) sílo nípasẹ̀ ìṣírò lórí kẹ̀kẹ́ hue láti mú àwò̩n-àwọ̀ kọ̀ọ̀kan jáde.

1. 1
   Ìyípadà hex-sí-HSL

   Nígbà tí o bá yan àwọ̀ kan, irinṣẹ́ náà ń pín ọ̀wọ́ ọ̀rọ̀ hex náà sí àwọn ẹ̀ka RGB tí ó sì ń yí wọn padà sí HSL (hue, saturation, fífúyẹ́). Hue ni ipò 0–360 ìwọ̀n lórí kẹ̀kẹ́ àwọ̀ náà; gbogbo ìṣírò àwò̩n-àwọ̀ ń ṣẹlẹ̀ nínú àyè yìí.
2. 2
   Ìṣírò hue fún ìbámu

   Irú àwò̩n-àwọ̀ kọ̀ọ̀kan jẹ́ fọ́rmúlà yíyí tí a dá kalẹ̀ tí a fi sílo sí hue ìpìlẹ̀ṣẹ̀ náà. Complementary ń fi 180° kún un, triadic ń fi 120° àti 240° kún un, tetradic ń gbé lọ ní 90°, split-complementary ń lo 150° àti 210°. Monochromatic àti shades ń pa hue àti saturation dúró nígbà tí ó ń gbé fífúyẹ́ sókè àti sìsàlẹ̀.
3. 3
   Ìtọjade HSL-sí-hex

   A ń yí ọ̀wọ́-mẹ́ta HSL tí a ṣírò kọ̀ọ̀kan padà sí àwọ̀ hex ní lílo fọ́rmúlà chroma déédéé. Àwọn àbájáde ń farahàn gẹ́gẹ́ bí ìlà àwọ̀ pẹ̀lú àwọn àmì tí a ṣe àyè-àyè aládàáṣe (ọ̀rọ̀ dúdú lórí swatch fífúyẹ́, ọ̀rọ̀ fífúyẹ́ lórí àwọn tí ó dúdú) tí a pinnu nípasẹ̀ ààlà luminance rọrùn.
4. 4
   Gbé jáde ní ìrísí tí o fẹ́

   A lè dàkọ àwò̩n-àwọ̀ náà gẹ́gẹ́ bí ọ̀wọ́ ọ̀rọ̀ hex tàbí gbé e jáde gẹ́gẹ́ bí fáìlì àwọn ìtọ́ka CSS (:root { --color-1: … }), àwọn ìtọ́ka SCSS, apá ìtò Tailwind kan, ohun JSON kan, tàbí ìlà àwọ̀ PNG kan. Gbígbé PNG jáde ń lo API Canvas aṣàwákiri (toDataURL) láti yà swatch kọ̀ọ̀kan pẹ̀lú àmì hex rẹ̀ — gbogbo rẹ̀ ni a ṣẹ̀dá ládùúgbò nígbà tí a bá tẹ̀ ẹ́.

Àwọn Irinṣẹ Tó Jọra