Zana ya Kuchagua Rangi Rahisi na ya Mtumiaji

Utangulizi

Zana ya Kuchagua Rangi ni programu rahisi kutumia iliyoundwa kusaidia watumiaji kuchagua, kuonyesha, na kubadilisha rangi katika mifumo mbalimbali ya rangi. Iwe wewe ni mbunifu wa wavuti unayeunda mpangilio wa rangi, msanii wa kidijitali unayetafuta kivuli sahihi, au mendelezi unayeweka kiolesura cha mtumiaji, zana hii ya kuchagua rangi inatoa njia rahisi ya kufanya kazi na rangi katika mifumo ya RGB, Hexadecimal, CMYK, na HSV. Kwa spika ya rangi ya mwingiliano, slaidi ya mwangaza, na chaguzi sahihi za kuingiza, unaweza kupata, kurekebisha, na nakala ya thamani za rangi kwa miradi yako kwa haraka.

Kuelewa Mifumo ya Rangi

Kabla ya kuangazia jinsi ya kutumia zana ya kuchagua rangi, ni muhimu kuelewa mifumo tofauti ya rangi inayoungwa mkono:

RGB (Nyekundu, Kijani, Bluu)

RGB ni mfumo wa rangi wa kuongeza ambapo mwanga wa nyekundu, kijani, na buluu unachanganywa kwa njia mbalimbali ili kuzalisha rangi nyingi. Katika matumizi ya dijitali:

• Kila kipengele (R, G, B) kinatoka 0 hadi 255
• RGB(255, 0, 0) inawakilisha nyekundu safi
• RGB(0, 255, 0) inawakilisha kijani safi
• RGB(0, 0, 255) inawakilisha buluu safi
• RGB(255, 255, 255) inawakilisha nyeupe
• RGB(0, 0, 0) inawakilisha nyeusi

Mfumo wa RGB unahusiana moja kwa moja na jinsi rangi zinavyoonyeshwa kwenye skrini, na kufanya kuwa chaguo kuu kwa muundo wa dijitali.

Hexadecimal (Hex)

Mikodi ya rangi ya hexadecimal ni njia ya kuwakilisha rangi za RGB kwa kutumia mfumo wa nambari wa msingi-16:

• Rangi ya hex huanza na alama ya pauni (#) ikifuatiwa na wahusika sita
• Kiwango cha kwanza kinawakilisha nyekundu, cha pili kijani, na cha tatu buluu
• Kila kiwango kinatoka 00 hadi FF (0-255 katika desimali)
• #FF0000 inawakilisha nyekundu safi
• #00FF00 inawakilisha kijani safi
• #0000FF inawakilisha buluu safi
• Maandishi ya kifupi yanapatikana kwa rangi fulani (mfano, #F00 kwa nyekundu)

Mikodi ya hex inatumika sana katika maendeleo ya wavuti (CSS, HTML) na programu za muundo wa dijitali.

CMYK (Cyan, Magenta, Yellow, Key/Nyeusi)

CMYK ni mfumo wa rangi wa kupunguza ambao hutumiwa hasa katika uchapishaji wa rangi:

• Kila kipengele kinatoka 0% hadi 100%
• CMYK(0, 100, 100, 0) inawakilisha nyekundu safi
• CMYK(100, 0, 100, 0) inawakilisha kijani safi
• CMYK(100, 100, 0, 0) inawakilisha buluu safi
• CMYK(0, 0, 0, 100) inawakilisha nyeusi
• CMYK(0, 0, 0, 0) inawakilisha nyeupe (rangi ya karatasi)

Ingawa inatumika hasa kwa uchapishaji, kuelewa thamani za CMYK kunaweza kusaidia unapounda maudhui ambayo hatimaye yatachapishwa.

HSV (Hue, Saturation, Value)

HSV inawakilisha rangi kwa njia ya:

• Hue: Aina ya rangi (nyekundu, njano, kijani, nk), inayopimwa kwa digrii (0-360°)
• Saturation: Uwezo au usafi wa rangi (0-100%)
• Value: Mwangaza wa rangi (0-100%)

HSV ni muhimu sana kwa uchaguaji wa rangi kwani inatenganisha uchaguzi wa rangi (hue) kutoka kwa nguvu yake (saturation) na mwangaza (value), na kufanya iwe rahisi zaidi kurekebisha rangi.

Mifumo ya Kubadilisha Rangi

Zana ya kuchagua rangi inabadilisha kiautomati kati ya mifumo tofauti ya rangi kwa kutumia fomula hizi za kihesabu:

Kubadilisha RGB hadi Hex

Ili kubadilisha RGB kuwa hexadecimal:

1. Badilisha kila kipengele cha RGB (0-255) kuwa nambari ya hexadecimal ya tarakimu mbili
2. Unganisha thamani tatu za hexadecimal na alama ya # mwanzoni

$\text{Hex} = \text{\#} + \text{toHex}(R) + \text{toHex}(G) + \text{toHex}(B)$

Ambapo toHex() inabadili nambari ya desimali kuwa uwakilishi wake wa hexadecimal.

Kubadilisha RGB hadi CMYK

Kubadilisha kutoka RGB hadi CMYK kunahusisha hatua hizi:

1. Sanidi thamani za RGB katika kiwango 0-1
2. Hesabu kipengele cha msingi (K)
3. Hesabu C, M, na Y kulingana na K

$R' = R/255, G' = G/255, B' = B/255$ $K = 1 - \max(R', G', B')$ $C = \frac{(1-R'-K)}{(1-K)} \times 100\%$ $M = \frac{(1-G'-K)}{(1-K)} \times 100\%$ $Y = \frac{(1-B'-K)}{(1-K)} \times 100\%$

Kubadilisha RGB hadi HSV

Kubadilisha RGB hadi HSV:

$R' = R/255, G' = G/255, B' = B/255$ $C_{max} = \max(R', G', B')$ $C_{min} = \min(R', G', B')$ $\Delta = C_{max} - C_{min}$

Kwa Hue (H):

0° & \text{if } \Delta = 0 \\ 60° \times (\frac{G' - B'}{\Delta} \mod 6) & \text{if } C_{max} = R' \\ 60° \times (\frac{B' - R'}{\Delta} + 2) & \text{if } C_{max} = G' \\ 60° \times (\frac{R' - G'}{\Delta} + 4) & \text{if } C_{max} = B' \end{cases}$$ Kwa Saturation (S): $$S = \begin{cases} 0 & \text{if } C_{max} = 0 \\ \frac{\Delta}{C_{max}} \times 100\% & \text{otherwise} \end{cases}$$ Kwa Value (V): $$V = C_{max} \times 100\%$$ ## Jinsi ya Kutumia Zana ya Kuchagua Rangi Zana yetu ya kuchagua rangi inatoa njia nyingi za kuchagua na kurekebisha rangi. Hapa kuna mwongozo wa hatua kwa hatua juu ya jinsi ya kutumia kila kipengele: ### Kutumia Spika ya Rangi 1. **Chagua Rangi ya Msingi**: Bonyeza au gonga popote kwenye spika ya rangi ili kuchagua rangi ya msingi. Nafasi ya usawa inamua hue, wakati nafasi ya wima inaathiri saturation. 2. **Rekebisha Uchaguzi**: Unaweza kuhamasisha duara la mteule ili kupata kivuli sahihi cha rangi. 3. **Tazama Mapitio ya Rangi**: Kadri unavyohamisha mteule, eneo la mapitio ya rangi linaweza kubadilika kwa wakati halisi, likionyesha uchaguzi wako wa sasa. ### Kurekebisha Mwangaza 1. **Tumia Slaidi ya Mwangaza**: Chini ya spika ya rangi, utaona slaidi ya usawa inayodhibiti mwangaza (thamani) ya rangi uliyochagua. 2. **Hamisha Kushoto au Kulia**: Hamisha slaidi kwenda kushoto ili kupunguza mwangaza wa rangi au kwenda kulia ili kuangaza. 3. **Tazama Mabadiliko**: Mapitio ya rangi na thamani zote za rangi yanaweza kubadilika mara moja unavyorekebisha mwangaza. ### Kuingiza Thamani za Rangi Sahihi Kwa uchaguzi sahihi wa rangi, unaweza moja kwa moja kuingiza thamani katika mifumo yoyote inayoungwa mkono: #### Kuingiza Hex 1. Ingiza msimbo sahihi wa rangi ya hexadecimal kwenye uwanja wa Hex (mfano, #FF5733) 2. Kuingiza kunaweza kuthibitisha kiatomati kuingia kwako 3. Bonyeza Enter au bonyeza nje ya uwanja ili kutekeleza rangi #### Kuingiza RGB 1. Ingiza thamani kati ya 0-255 kwa kila kipengele cha RGB 2. Nyumba zingine za mfumo wa rangi zitaweza kubadilika kiatomati 3. Thamani zisizo sahihi (zaidi ya 0-255) zitaweza kuwekewa mipaka kwenye kiwango sahihi #### Kuingiza CMYK 1. Ingiza thamani za asilimia (0-100) kwa Cyan, Magenta, Yellow, na Nyeusi 2. Mifumo mingine ya rangi itabadilika kulingana na kuingiza kwako CMYK 3. Thamani zinazozidi kiwango cha 0-100 zitaweza kurekebishwa kiatomati ### Nakala ya Thamani za Rangi 1. **Bonyeza Kitufe cha Nakala**: Kando ya kila mfumo wa rangi, utaona kitufe cha nakala (ikoni ya clipboard) 2. **Mrejesho wa Mara Moja**: Baada ya kubonyeza, ujumbe wa "Nakala!" utaonekana kwa muda mfupi 3. **Weka Mahali Popote**: Thamani iliyokopwa inaweza sasa kuwekwa kwenye programu yako ya muundo, mhariri wa msimbo, au programu nyingine yoyote ## Matumizi Zana ya kuchagua rangi inatumika kwa madhumuni mbalimbali katika nyanja tofauti: ### Maendeleo ya Wavuti Wendelezi wa wavuti wanaweza kutumia zana ya kuchagua rangi ili: - Kuchagua rangi za mandhari na vipengele vya UI vya tovuti - Kupata mchanganyiko wa rangi zinazoweza kufikiwa zinazokidhi viwango vya WCAG - Kubadilisha kati ya mikodi ya hex (inayotumiwa katika CSS) na thamani za RGB - Kuunda paleti za rangi kwa ajili ya uwekaji wa alama thabiti kwenye tovuti Mfano wa mchakato: 1. Tumia spika ya rangi kupata rangi ya msingi kwa mandhari ya tovuti 2. Rekebisha mwangaza ili kuunda tofauti kwa hali za hover na mandharinyuma 3. Nakala ya msimbo wa hex moja kwa moja kwenye stylesheet za CSS 4. Tumia thamani za RGB kwa kazi za rgba() wakati inahitajika uwazi ### Ubunifu wa Picha Wasanii wa picha wanapata faida kutokana na: - Uchaguzi sahihi wa rangi kwa kazi za kidijitali - Kubadilisha kati ya RGB (kwa dijitali) na CMYK (kwa uchapishaji) - Kuunda mipango ya rangi yenye usawa - Kulinganisha rangi maalum za chapa Mfano wa mchakato: 1. Ingiza rangi maalum ya chapa kwa mfumo wa hex 2. Tumia spika ya rangi kupata rangi zinazokamilishana 3. Angalia thamani za CMYK ili kuhakikisha ulinganifu wa uchapishaji 4. Nakala ya thamani kwenye programu za muundo kama Adobe Illustrator au Photoshop ### Ubunifu wa UI/UX Wasanifu wa UI/UX wanaweza: - Kuchagua rangi zinazoboreshwa matumizi na usomaji - Kuunda mifumo ya rangi thabiti kwa maombi - Kupima mchanganyiko tofauti ya rangi haraka - Kuhakikisha kutofautiana kwa kutosha kati ya maandiko na mandharinyuma Mfano wa mchakato: 1. Chagua rangi ya msingi kwa kutumia spika ya rangi 2. Rekebisha mwangaza ili kuunda rangi za sekondari na za tatu 3. Jaribu mchanganyiko tofauti katika eneo la mapitio 4. Nakala za thamani kwenye mifumo ya muundo au zana za kuunda mfano ### Sanaa ya Kidijitali Wasanii wa kidijitali hutumia zana za kuchagua rangi ili: - Kupata kivuli sahihi kwa picha za kidijitali - Kuunda mipango ya rangi maalum - Kulinganisha rangi kutoka kwa picha za rejea - Kujaribu dhana za nadharia ya rangi Mfano wa mchakato: 1. Tumia udhibiti wa HSV kuchagua hue maalum 2. Rekebisha saturation na mwangaza kwa athari inayohitajika 3. Nakala ya thamani za RGB kwenye programu ya kuchora kidijitali 4. Kuunda tofauti kwa kurekebisha kidogo hue au saturation ### Elimu Zana ya kuchagua rangi inatumika kama zana ya elimu kwa: - Kufundisha dhana za nadharia ya rangi - Kuonyesha kubadilisha mifumo ya rangi - Kuelezea uwakilishi wa rangi za dijitali - Kusaidia wanafunzi kuelewa uhusiano wa rangi Mfano wa mchakato: 1. Onyesha jinsi kurekebisha hue kunabadilisha rangi wakati wa kudumisha mwangaza 2. Onyesha jinsi thamani za RGB zinavyohusiana na rangi zinazoonekana 3. Eleza uhusiano kati ya mikodi ya hex na thamani za RGB 4. Eleza jinsi CMYK inavyotofautiana na RGB kwa uchapishaji dhidi ya matumizi ya dijitali ### Mbadala Ingawa zana yetu ya kuchagua rangi inatoa kazi kamili, kuna njia mbadala za uchaguzi wa rangi: #### Watengenezaji wa Paleti za Rangi Zana kama Adobe Color, Coolors, na Paletton zinazingatia kuunda mipango ya rangi yenye usawa badala ya kuchagua rangi binafsi. Hizi ni bora unapohitaji kuunda paleti kamili ya rangi kulingana na kanuni za nadharia ya rangi. #### Watoa Rangi Wanaotokana na Picha Zana kama ColorZilla na ImageColorPicker zinakuruhusu kutoa rangi moja kwa moja kutoka kwa picha au mahali popote kwenye skrini yako. Hizi ni muhimu hasa unapohitaji kulinganisha rangi zilizopo kutoka kwa picha au muundo. #### Mifumo ya Rangi ya Kimwili Kwa kazi zinazolenga uchapishaji, mifumo ya rangi ya kimwili kama Pantone, vitabu vya rangi za CMYK, au chati za rangi za RAL zinatoa rejea zilizowekwa ambazo zinaweza kuhakikisha usahihi wa rangi katika michakato tofauti ya uchapishaji. #### Zana za Programu Zilizojumuishwa Programu nyingi za muundo (Adobe Photoshop, Illustrator, Figma, nk) zinajumuisha zana za kuchagua rangi zilizo ndani. Ingawa ni rahisi, hizi mara nyingi zimepungukiwa kwa programu na hazitoi kubadilisha kati ya mifumo tofauti kama zana yetu inavyofanya. ## Historia ya Uchaguzi wa Rangi wa Kidijitali Mabadiliko ya zana za uchaguzi wa rangi yanafanana na maendeleo ya muundo wa dijitali wenyewe: ### Rangi za Kwanza za Kidijitali (1970s-1980s) Mifumo ya kwanza ya rangi za kidijitali ilikuwa na mipaka kubwa kutokana na vizuizi vya vifaa: - Monita za kwanza za kompyuta zilikuwa zinaweza kuonyesha rangi 16 au 256 pekee - Rangi zilichaguliwa kutoka kwa paleti zilizowekwa - Paleti ya rangi salama ya wavuti (rangi 216) ilitengenezwa ili kuhakikisha ulinganifu wa kuvuka kivinjari ### Viwango vya RGB na Hex (1990s) Kadri teknolojia ilivyopiga hatua: - Rangi ya 24-bit ikawa kiwango, ikiruhusu rangi milioni 16.7 - Uwakilishi wa hexadecimal ulipitishwa kwa HTML na CSS - Zana za msingi za kuchagua rangi zilionekana katika programu za muundo - Wabunifu wa wavuti walikuwa na mipaka kwa rangi zilizopangwa na mikodi ya hex ### Uchaguzi wa Rangi wa Kisasa (2000s-Hadi Sasa) Zana za uchaguzi wa rangi za leo zinaonyesha uelewa wetu wa hali ya juu wa rangi za dijitali: - Zana za kuchagua rangi za wakati halisi zenye interfaces za kuona - Uungwaji mkono wa mifumo mbalimbali ya rangi (RGB, HSL, HSV, CMYK) - Zana za upatikanaji wa rangi ili kuangalia uwiano wa kutofautiana - Algorithimu za usawa wa rangi za hali ya juu - Ujumuishaji na mifumo ya muundo na maktaba za vipengele Maendeleo ya zana za uchaguzi wa rangi yanaendelea kuongezeka na maendeleo katika teknolojia ya kuonyesha, sayansi ya rangi, na mbinu za muundo. ## Masuala ya Upatikanaji wa Rangi Wakati wa kuchagua rangi, ni muhimu kuzingatia upatikanaji kwa watumiaji wenye matatizo ya kuona rangi: ### Aina za Uoni wa Rangi - **Protanopia**: Ugumu wa kuelewa rangi nyekundu - **Deuteranopia**: Ugumu wa kuelewa rangi kijani - **Tritanopia**: Ugumu wa kuelewa rangi buluu - **Achromatopsia**: Upofu wa rangi wa kamili (kuona tu kwa rangi za kijivu) ### Vidokezo vya Upatikanaji 1. **Usitegemee rangi pekee** kuwasilisha habari 2. **Hakikisha kutofautiana kwa kutosha** kati ya maandiko na mandharinyuma (kasi ya chini 4.5:1 kwa maandiko ya kawaida) 3. **Tumia mifumo au muundo** pamoja na rangi kwa chati na grafu 4. **Jaribu chaguo zako za rangi** na simulator za upofu wa rangi 5. **Fikiria kutumia paleti za rangi rafiki kwa watu wenye matatizo ya kuona rangi** ambazo zinakwepa mchanganyiko wa rangi zenye matatizo ## Maswali Yanayoulizwa Mara kwa Mara ### Ni tofauti gani kati ya mifumo ya rangi ya RGB na CMYK? RGB (Nyekundu, Kijani, Bluu) ni mfumo wa rangi wa kuongeza unaotumiwa kwaonyesha dijitali ambapo rangi zinaundwa kwa kuongeza mwanga. CMYK (Cyan, Magenta, Yellow, Black) ni mfumo wa kupunguza unaotumiwa katika uchapishaji ambapo rangi zinaundwa kwa kunyonya (kupunguza) mwanga. RGB inazalisha rangi za mwangaza zaidi, zenye nguvu zinazofaa kwa vyombo vya dijitali, wakati CMYK kwa kawaida ina gama ndogo inayofaa zaidi kwa vifaa vya uchapishaji. ### Kwa nini rangi zinaonekana tofauti kwenye skrini yangu ikilinganishwa na wakati zimechapishwa? Tofauti hii inatokea kwa sababu skrini hutumia mfumo wa rangi wa RGB ambao unaweza kuonyesha gama pana ya rangi kuliko inavyowezekana na rangi za uchapishaji za CMYK. Zaidi ya hayo, skrini huangaza mwanga wakati vifaa vilivyochapishwa vinaakisi mwanga. Tofauti za kalibra kati ya vifaa, ubora wa karatasi, na tofauti za rangi pia zinachangia tofauti hii. Kwa kazi zinazolenga uchapishaji, kila wakati angalia thamani za CMYK na fikiria kuomba uthibitisho wa kimwili. ### Ninawezaje kupata msimbo wa hex wa rangi maalum ninayoiona mtandaoni? Unaweza kutumia nyongeza za kivinjari kama ColorZilla au zana za mhandisi zilizojumuishwa. Katika Chrome au Firefox, bonyeza kulia kwenye kipengele, chagua "Kagua," kisha tumia zana ya kuchagua rangi katika paneli ya mhandisi. Vinginevyo, chukua picha ya skrini na uiweke kwenye zana yetu ya kuchagua rangi, kisha bonyeza kwenye rangi inayotaka ili kupata msimbo wake wa hex. ### Njia bora ya kuunda mpango wa rangi unaofanana ni ipi? Anza na rangi ya msingi inayowakilisha chapa yako au hisia ya mradi. Kisha tumia kanuni za nadharia ya rangi kama mchanganyiko (kinyume kwenye gurudumu la rangi), rangi zinazofanana (zinazo karibu kwenye gurudumu la rangi), au rangi tatu (zilizoangaziwa sawasawa kwenye gurudumu la rangi) kuchagua rangi za ziada. Rekebisha saturation na mwangaza ili kuunda hierarchi. Zana yetu ya kuchagua rangi inakusaidia kuona uhusiano hizi na kuboresha uchaguzi wako. ### Ninawezaje kuhakikisha rangi zangu zilizochaguliwa zinaweza kupatikana? Angalia uwiano wa kutofautiana kati ya rangi za maandiko na mandharinyuma kwa kutumia zana kama WebAIM Contrast Checker. Kwa maandiko ya kawaida, lengo ni uwiano wa chini wa 4.5:1, na kwa maandiko makubwa, 3:1. Epuka mchanganyiko wa rangi wenye matatizo kwa watumiaji wenye matatizo ya kuona rangi (kama nyekundu/kijani). Jaribu muundo wako na simulator za upofu wa rangi. Kumbuka kwamba takriban 8% ya wanaume na 0.5% ya wanawake wana aina fulani ya matatizo ya kuona rangi. ### Ni nini maana ya alama ya # katika mikodi ya rangi ya hex? Alama ya hash au pauni (#) ni kiashiria kinachoonyesha wahusika wanaofuata wanawakilisha msimbo wa rangi ya hexadecimal. Ni uwakilishi wa kawaida katika HTML, CSS, na programu nyingi za muundo. Tarakimu sita zinazofuata zinawakilisha thamani za RGB katika mfumo wa msingi-16, ambapo kila jozi inawakilisha nyekundu, kijani, na buluu. ### Ninawezaje kubadilisha rangi kutoka RGB hadi CMYK kwa uchapishaji? Zana yetu ya kuchagua rangi inabadilisha kiatomati thamani za RGB kuwa sawa na CMYK. Ingiza thamani zako za RGB, na thamani zinazohusiana za CMYK zitaonyeshwa. Hata hivyo, kumbuka kwamba baadhi ya rangi za RGB ziko nje ya gama ya CMYK na haziwezi kuonyeshwa kwa usahihi katika uchapishaji. Programu za kitaaluma za muundo kama Adobe Illustrator au Photoshop pia hutoa kubadilisha hali ya rangi na onyo la gama. ### Kwa nini kuna mikodi ya hex ya tarakimu 3 na 6? Mkodishaji wa hex wa tarakimu 3 ni uwakilishi wa maandiko ya kifupi ambayo yanaweza kutumika wakati kila jozi ya kipengele ina tarakimu zinazofanana. Kwa mfano, #FF0000 inaweza kufupishwa hadi #F00 kwa sababu F=FF, 0=00, na 0=00. Maandishi haya ya kifupi yanapatikana tu kwa rangi ambapo kila kipengele kinaweza kuwakilishwa na tarakimu zinazojirudia. Ilianzishwa awali ili kuokoa ukubwa wa faili katika siku za mapema za wavuti lakini inabaki kuwa rahisi. ### Uhakika wa kubadilisha kati ya mifumo tofauti ni upi? Kubadilisha kati ya RGB na hex ni sahihi kihesabu kwa sababu ni uwakilishi wa moja kwa moja wa thamani sawa katika mifumo tofauti. Kubadilisha kati ya RGB na CMYK ni makadirio kutokana na tofauti za msingi katika gama za rangi na mali za kimwili za utoaji wa mwanga dhidi ya kunyonya kwa rangi. Zana yetu inatumia fomula za viwango vya tasnia kutoa mabadiliko sahihi zaidi yanayowezekana ndani ya mipaka hii. ### Naweza kuhifadhi au kusafirisha rangi zangu zilizochaguliwa? Kwa sasa, unaweza nakala thamani za rangi binafsi kwenye clipboard yako. Tunapendekeza kuunda hati au kutumia zana maalum za paleti za rangi kuhifadhi rangi nyingi kwa miradi yako. Sasisho za baadaye zinaweza kujumuisha vipengele vya kuhifadhi paleti za rangi moja kwa moja ndani ya zana. ## Mifano ya Msimbo kwa Mabadiliko ya Rangi Hapa kuna baadhi ya mifano ya msimbo unaoonyesha jinsi ya kubadilisha kati ya mifumo tofauti ya rangi:

1// Kubadilisha RGB hadi Hex
2function rgbToHex(r, g, b) {
3  const toHex = (c) => {
4    const hex = Math.round(c).toString(16);
5    return hex.length === 1 ? '0' + hex : hex;
6  };
7  
8  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
9}
10
11// Kubadilisha Hex hadi RGB
12function hexToRgb(hex) {
13  // Ondoa # ikiwa inapatikana
14  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15  
16  // Shughulikia hex za tarakimu 3 na 6
17  const expandedHex = cleanHex.length === 3 
18    ? cleanHex.split('').map(char => char + char).join('')
19    : cleanHex;
20    
21  const r = parseInt(expandedHex.substring(0, 2), 16);
22  const g = parseInt(expandedHex.substring(2, 4), 16);
23  const b = parseInt(expandedHex.substring(4, 6), 16);
24  
25  return { r, g, b };
26}
27
28// Kubadilisha RGB hadi CMYK
29function rgbToCmyk(r, g, b) {
30  // Sanidi thamani za RGB
31  const normalizedR = r / 255;
32  const normalizedG = g / 255;
33  const normalizedB = b / 255;
34  
35  // Hesabu K (nyeusi)
36  const k = 1 - Math.max(normalizedR, normalizedG, normalizedB);
37  
38  // Shughulikia nyeusi safi
39  if (k === 1) {
40    return { c: 0, m: 0, y: 0, k: 100 };
41  }
42  
43  // Hesabu C, M, Y
44  const c = ((1 - normalizedR - k) / (1 - k)) * 100;
45  const m = ((1 - normalizedG - k) / (1 - k)) * 100;
46  const y = ((1 - normalizedB - k) / (1 - k)) * 100;
47  
48  return {
49    c: Math.round(c),
50    m: Math.round(m),
51    y: Math.round(y),
52    k: Math.round(k * 100)
53  };
54}
55
56// Mfano wa matumizi
57const rgb = { r: 255, g: 0, b: 0 }; // Nyekundu safi
58console.log(`Hex: ${rgbToHex(rgb.r, rgb.g, rgb.b)}`);
59console.log(`CMYK:`, rgbToCmyk(rgb.r, rgb.g, rgb.b));
60

1# Kubadilisha RGB hadi Hex
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# Kubadilisha Hex hadi RGB
6def hex_to_rgb(hex_color):
7    # Ondoa # ikiwa inapatikana
8    hex_color = hex_color.lstrip('#')
9    
10    # Shughulikia hex za tarakimu 3 na 6
11    if len(hex_color) == 3:
12        hex_color = ''.join([c*2 for c in hex_color])
13    
14    return {
15        'r': int(hex_color[0:2], 16),
16        'g': int(hex_color[2:4], 16),
17        'b': int(hex_color[4:6], 16)
18    }
19
20# Kubadilisha RGB hadi CMYK
21def rgb_to_cmyk(r, g, b):
22    # Sanidi thamani za RGB
23    r_norm = r / 255
24    g_norm = g / 255
25    b_norm = b / 255
26    
27    # Hesabu K (nyeusi)
28    k = 1 - max(r_norm, g_norm, b_norm)
29    
30    # Shughulikia nyeusi safi
31    if k == 1:
32        return {'c': 0, 'm': 0, 'y': 0, 'k': 100}
33    
34    # Hesabu C, M, Y
35    c = ((1 - r_norm - k) / (1 - k)) * 100
36    m = ((1 - g_norm - k) / (1 - k)) * 100
37    y = ((1 - b_norm - k) / (1 - k)) * 100
38    
39    return {
40        'c': round(c),
41        'm': round(m),
42        'y': round(y),
43        'k': round(k * 100)
44    }
45
46# Mfano wa matumizi
47rgb = {'r': 0, 'g': 128, 'b': 255}  # Buluu wa anga
48hex_color = rgb_to_hex(rgb['r'], rgb['g'], rgb['b'])
49cmyk = rgb_to_cmyk(rgb['r'], rgb['g'], rgb['b'])
50
51print(f"Hex: {hex_color}")
52print(f"CMYK: C={cmyk['c']}%, M={cmyk['m']}%, Y={cmyk['y']}%, K={cmyk['k']}%")
53

1public class ColorConverter {
2    // Kubadilisha RGB hadi Hex
3    public static String rgbToHex(int r, int g, int b) {
4        return String.format("#%02x%02x%02x", r, g, b);
5    }
6    
7    // Kubadilisha Hex hadi RGB
8    public static int[] hexToRgb(String hexColor) {
9        // Ondoa # ikiwa inapatikana
10        if (hexColor.startsWith("#")) {
11            hexColor = hexColor.substring(1);
12        }
13        
14        // Shughulikia hex za tarakimu 3 na 6
15        if (hexColor.length() == 3) {
16            String expandedHex = "";
17            for (char c : hexColor.toCharArray()) {
18                expandedHex += c + String.valueOf(c);
19            }
20            hexColor = expandedHex;
21        }
22        
23        int r = Integer.parseInt(hexColor.substring(0, 2), 16);
24        int g = Integer.parseInt(hexColor.substring(2, 4), 16);
25        int b = Integer.parseInt(hexColor.substring(4, 6), 16);
26        
27        return new int[]{r, g, b};
28    }
29    
30    // Kubadilisha RGB hadi CMYK
31    public static double[] rgbToCmyk(int r, int g, int b) {
32        // Sanidi thamani za RGB
33        double normalizedR = r / 255.0;
34        double normalizedG = g / 255.0;
35        double normalizedB = b / 255.0;
36        
37        // Hesabu K (nyeusi)
38        double k = 1 - Math.max(Math.max(normalizedR, normalizedG), normalizedB);
39        
40        // Shughulikia nyeusi safi
41        if (k == 1) {
42            return new double[]{0, 0, 0, 100};
43        }
44        
45        // Hesabu C, M, Y
46        double c = ((1 - normalizedR - k) / (1 - k)) * 100;
47        double m = ((1 - normalizedG - k) / (1 - k)) * 100;
48        double y = ((1 - normalizedB - k) / (1 - k)) * 100;
49        
50        return new double[]{
51            Math.round(c),
52            Math.round(m),
53            Math.round(y),
54            Math.round(k * 100)
55        };
56    }
57    
58    public static void main(String[] args) {
59        // Mfano wa matumizi
60        int r = 75, g = 0, b = 130;  // Zambarau
61        String hexColor = rgbToHex(r, g, b);
62        double[] cmyk = rgbToCmyk(r, g, b);
63        
64        System.out.println("Hex: " + hexColor);
65        System.out.printf("CMYK: C=%.0f%%, M=%.0f%%, Y=%.0f%%, K=%.0f%%\n", 
66                          cmyk[0], cmyk[1], cmyk[2], cmyk[3]);
67    }
68}
69

Marejeleo

1. Agoston, M. K. (2013). Computer Graphics and Geometric Modeling: Implementation and Algorithms. Springer Science & Business Media.

2. Adobe Systems. (2000). Adobe RGB (1998) Color Image Encoding. Adobe Systems Incorporated.

3. Fairchild, M. D. (2013). Color Appearance Models. John Wiley & Sons.

4. Hunt, R. W. G., & Pointer, M. R. (2011). Measuring Colour. John Wiley & Sons.

5. Poynton, C. (2012). Digital Video and HD: Algorithms and Interfaces. Elsevier.

6. W3C. (2018). CSS Color Module Level 4. W3C Working Draft. Retrieved from https://www.w3.org/TR/css-color-4/

7. Web Content Accessibility Guidelines (WCAG) 2.1. (2018). Retrieved from https://www.w3.org/TR/WCAG21/

8. International Color Consortium. (2004). Specification ICC.1:2004-10 (Profile version 4.2.0.0). Retrieved from http://www.color.org/specification/ICC1v42_2006-05.pdf

Jaribu Zana Yetu ya Kuchagua Rangi Leo!

Tayari kupata rangi kamili kwa mradi wako? Zana yetu ya kuchagua rangi rahisi inafanya iwe rahisi kuchagua, kurekebisha, na kubadilisha rangi kati ya mifumo tofauti. Iwe unaunda tovuti, unaunda sanaa ya kidijitali, au kupanga vifaa vya uchapishaji, zana yetu inatoa usahihi na kubadilika unayohitaji.

Anza kujaribu rangi sasa na upeleke muundo wako kwenye kiwango kingine!