Paprastas ir vartotojui patogus spalvų pasirinkimo įrankis

Įvadas

Spalvų pasirinkimo įrankis yra intuityvi, lengvai naudojama programa, skirta padėti vartotojams pasirinkti, vizualizuoti ir konvertuoti spalvas įvairiais spalvų formatais. Nesvarbu, ar esate tinklalapio dizaineris, kuriantis spalvų schemą, skaitmeninis menininkas, ieškantis tobulos atspalvio, ar programuotojas, įgyvendinantis vartotojo sąsają, šis spalvų pasirinkimo įrankis suteikia paprastą būdą dirbti su spalvomis RGB, šešiakampiu, CMYK ir HSV formatais. Su interaktyvia spalvų spektru, ryškumo slankikliu ir tiksliomis įvedimo galimybėmis galite greitai rasti, koreguoti ir kopijuoti spalvų vertes savo projektams.

Spalvų modelių supratimas

Prieš pradedant naudoti spalvų pasirinkimo įrankį, naudinga suprasti skirtingus spalvų modelius, kuriuos jis palaiko:

RGB (Raudona, Žalia, Mėlyna)

RGB yra adityvus spalvų modelis, kuriame raudona, žalia ir mėlyna šviesa sujungiama įvairiais būdais, kad būtų atkurtas platus spalvų spektras. Skaitmeninėse programose:

• Kiekvienas komponentas (R, G, B) svyruoja nuo 0 iki 255
• RGB(255, 0, 0) atspindi gryną raudoną
• RGB(0, 255, 0) atspindi gryną žalią
• RGB(0, 0, 255) atspindi gryną mėlyną
• RGB(255, 255, 255) atspindi baltą
• RGB(0, 0, 0) atspindi juodą

RGB modelis tiesiogiai susijęs su tuo, kaip spalvos rodomos ekranuose, todėl jis yra pagrindinis pasirinkimas skaitmeniniam dizainui.

Šešiakampis (Hex)

Šešiakampės spalvų kodai yra būdas atstovauti RGB spalvas naudojant šešiakampę skaičiavimo sistemą:

• Šešiakampė spalva prasideda nuo diakritinio ženklo (#), po kurio seka šeši simboliai
• Pirmasis pora atspindi raudoną, antrasis žalią, o trečiasis mėlyną
• Kiekviena pora svyruoja nuo 00 iki FF (0-255 dešimtainiu)
• #FF0000 atspindi gryną raudoną
• #00FF00 atspindi gryną žalią
• #0000FF atspindi gryną mėlyną
• Yra trumpinimo notacija tam tikroms spalvoms (pvz., #F00 raudonai)

Šešiakampiai kodai plačiai naudojami tinklalapių kūrime (CSS, HTML) ir skaitmeninio dizaino programose.

CMYK (Cianas, Magenta, Geltona, Juoda)

CMYK yra atimantis spalvų modelis, daugiausia naudojamas spalvų spausdinimui:

• Kiekvienas komponentas svyruoja nuo 0% iki 100%
• CMYK(0, 100, 100, 0) atspindi gryną raudoną
• CMYK(100, 0, 100, 0) atspindi gryną žalią
• CMYK(100, 100, 0, 0) atspindi gryną mėlyną
• CMYK(0, 0, 0, 100) atspindi juodą
• CMYK(0, 0, 0, 0) atspindi baltą (popieriaus spalva)

Nors jis daugiausia naudojamas spausdinimui, CMYK vertių supratimas gali būti naudingas kuriant turinį, kuris galiausiai bus spausdinamas.

HSV (Atspalvis, Sodrumas, Vertė)

HSV atspindi spalvas pagal:

• Atspalvį: spalvos tipą (raudona, geltona, žalia ir kt.), matuojamą laipsniais (0-360°)
• Sodrumą: spalvos intensyvumą arba grynumą (0-100%)
• Vertę: spalvos ryškumą (0-100%)

HSV yra ypač naudingas spalvų pasirinkimui, nes jis atskiria spalvos pasirinkimą (atspalvį) nuo jos intensyvumo (sodrumo) ir ryškumo (vertės), todėl lengviau koreguoti spalvas.

Spalvų konversijos formulės

Spalvų pasirinkimo įrankis automatiškai konvertuoja tarp skirtingų spalvų modelių naudodamas šias matematikos formules:

RGB į Hex konversija

Norint konvertuoti RGB į šešiakampį:

1. Kiekvieną RGB komponentą (0-255) konvertuokite į dvi skaitmenis šešiakampėje sistemoje
2. Sujunkite tris šešiakampes vertes su # prefiksu

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

Kur toHex() konvertuoja dešimtainį skaičių į jo šešiakampę atvaizdą.

RGB į CMYK konversija

Konversija iš RGB į CMYK apima šiuos žingsnius:

1. Normalizuokite RGB vertes iki 0-1 intervalo
2. Apskaičiuokite juodąjį komponentą (K)
3. Apskaičiuokite C, M ir Y remiantis 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\%$

RGB į HSV konversija

Konvertuojant RGB į 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}$

Dėl Atspalvio (H):

0° & \text{jei } \Delta = 0 \\ 60° \times (\frac{G' - B'}{\Delta} \mod 6) & \text{jei } C_{max} = R' \\ 60° \times (\frac{B' - R'}{\Delta} + 2) & \text{jei } C_{max} = G' \\ 60° \times (\frac{R' - G'}{\Delta} + 4) & \text{jei } C_{max} = B' \end{cases}$$ Dėl Sodrumo (S): $$S = \begin{cases} 0 & \text{jei } C_{max} = 0 \\ \frac{\Delta}{C_{max}} \times 100\% & \text{kitais atvejais} \end{cases}$$ Dėl Vertės (V): $$V = C_{max} \times 100\%$$ ## Kaip naudoti spalvų pasirinkimo įrankį Mūsų spalvų pasirinkimo įrankis suteikia kelis būdus pasirinkti ir koreguoti spalvas. Štai žingsnis po žingsnio vadovas, kaip naudoti kiekvieną funkciją: ### Naudojant spalvų spektrą 1. **Pasirinkite pagrindinę spalvą**: Spustelėkite arba bakstelėkite bet kurioje spalvų spektro vietoje, kad pasirinktumėte pagrindinę spalvą. Horizontalus pozicija nustato atspalvį, o vertikalus pozicija veikia sodrumą. 2. **Tikslinkite pasirinkimą**: Galite vilkti pasirinkimo ratą aplink, kad rastumėte tobulą spalvos atspalvį. 3. **Peržiūrėti spalvų peržiūrą**: Kai judate pasirinkimo ratą, spalvų peržiūros sritis atnaujinama realiu laiku, rodydama jūsų dabartinį pasirinkimą. ### Ryškumo koregavimas 1. **Naudokite ryškumo slankiklį**: Po spalvų spektru rasite horizontalų slankiklį, kuris kontroliuoja pasirinktų spalvų ryškumą (vertę). 2. **Vilkti į kairę arba dešinę**: Perkelkite slankiklį į kairę, kad patamsintumėte spalvą, arba į dešinę, kad ją pašviesintumėte. 3. **Stebėkite pokyčius**: Spalvų peržiūra ir visos spalvų vertės atnaujinamos akimirksniu, kai koreguojate ryškumą. ### Tikslių spalvų verčių įvedimas Norint tiksliai pasirinkti spalvas, galite tiesiogiai įvesti vertes bet kuriame iš palaikomų formatų: #### Hex įvedimas 1. Įveskite galiojantį šešiakampį spalvų kodą Hex lauke (pvz., #FF5733) 2. Įvedimas automatiškai patvirtina jūsų įrašą 3. Paspauskite Enter arba spustelėkite už laukelio, kad pritaikytumėte spalvą #### RGB įvedimas 1. Įveskite vertes nuo 0 iki 255 kiekvienam RGB komponentui 2. Visos kitos spalvų formato sritys atnaujinamos automatiškai 3. Netinkamos vertės (už 0-255 ribų) bus pritaikytos iki galimų ribų #### CMYK įvedimas 1. Įveskite procentines vertes (0-100) Cianui, Magentai, Geltonai ir Juodai 2. Kiti spalvų formatai atnaujinami remiantis jūsų CMYK įvedimu 3. Vertės už 0-100 ribų bus automatiškai koreguojamos ### Spalvų verčių kopijavimas 1. **Spustelėkite kopijos mygtuką**: Šalia kiekvieno spalvų formato rasite kopijos mygtuką (klipų ikoną) 2. **Akimirksniu atsiliepimas**: Paspaudus, trumpai pasirodo pranešimas „Kopijuota!“ 3. **Kopijuokite bet kur**: Dabar kopijuota vertė gali būti įklijuota į jūsų dizaino programinę įrangą, kodo redaktorių ar bet kurią kitą programą ## Naudojimo atvejai Spalvų pasirinkimo įrankis tarnauja įvairiems tikslams skirtingose srityse: ### Tinklalapių kūrimas Tinklalapių kūrėjai gali naudoti spalvų pasirinkimo įrankį, kad: - Pasirinktų spalvas tinklalapių temoms ir vartotojo sąsajos komponentams - Rastų prieinamas spalvų kombinacijas, atitinkančias WCAG gaires - Konvertuotų tarp šešiakampių kodų (naudojamų CSS) ir RGB vertių - Sukurtų spalvų paletes nuosekliai prekės ženklo reprezentacijai tinklalapiuose Pavyzdinė darbo eiga: 1. Naudokite spalvų spektrą, kad rastumėte pagrindinę spalvą tinklalapio temai 2. Koreguokite ryškumą, kad sukurtumėte variacijas plaukimo būsenoms ir fonams 3. Kopijuokite šešiakampį kodą tiesiai į CSS stilius 4. Naudokite RGB vertes rgba() funkcijose, kai reikia skaidrumo ### Grafikos dizainas Grafikos dizaineriai gali pasinaudoti: - Tiksliu spalvų pasirinkimu skaitmeniniam menui - Konvertuojant tarp RGB (skaitmeniniam) ir CMYK (spausdinimui) - Sukuriant harmoningas spalvų schemas - Atitikti konkrečias prekės ženklo spalvas Pavyzdinė darbo eiga: 1. Įveskite konkrečią prekės ženklo spalvą šešiakampiu formatu 2. Naudokite spalvų spektrą, kad rastumėte papildomas spalvas 3. Patikrinkite CMYK vertes, kad užtikrintumėte spausdinimo suderinamumą 4. Kopijuokite vertes į dizaino programinę įrangą, pvz., Adobe Illustrator arba Photoshop ### UI/UX dizainas UI/UX dizaineriai gali: - Pasirinkti spalvas, kurios pagerina naudojamumą ir skaitomumą - Sukurti nuoseklias spalvų sistemas programoms - Greitai išbandyti skirtingas spalvų kombinacijas - Užtikrinti pakankamą kontrastą tarp teksto ir fono spalvų Pavyzdinė darbo eiga: 1. Pasirinkite pagrindinę spalvą naudodami spalvų spektrą 2. Koreguokite ryškumą, kad sukurtumėte antrines ir trečias spalvas 3. Išbandykite skirtingas kombinacijas peržiūros srityje 4. Kopijuokite vertes į dizaino sistemas arba prototipų įrankius ### Skaitmeninis menas Skaitmeniniai menininkai naudoja spalvų pasirinkimo įrankius, kad: - Rasti tobulą atspalvį skaitmeniniams piešiniams - Sukurti individualias spalvų paletes - Atitikti spalvas iš nuorodų vaizdų - Eksperimentuoti su spalvų teorijos koncepcijomis Pavyzdinė darbo eiga: 1. Naudokite HSV valdymus, kad pasirinktumėte konkretų atspalvį 2. Koreguokite sodrumą ir ryškumą, kad pasiektumėte norimą efektą 3. Kopijuokite RGB vertes į skaitmeninio piešimo programinę įrangą 4. Sukurkite variacijas šiek tiek koreguodami atspalvį arba sodrumą ### Švietimas Spalvų pasirinkimo įrankis tarnauja kaip švietimo priemonė: - Mokant spalvų teorijos koncepcijas - Demonstruojant spalvų modelių konversijas - Aiškinant skaitmeninį spalvų atvaizdavimą - Padedant studentams suprasti spalvų santykius Pavyzdinė darbo eiga: 1. Parodykite, kaip atspalvio koregavimas keičia spalvą, išlaikant ryškumą 2. Demonstruokite, kaip RGB vertės susijusios su matomomis spalvomis 3. Paaiškinkite, kaip šešiakampiai kodai ir RGB vertės susijungia 4. Iliustruokite, kaip CMYK skiriasi nuo RGB spausdinimui ir skaitmeniniam naudojimui ### Alternatyvos Nors mūsų spalvų pasirinkimo įrankis suteikia išsamią funkcionalumą, yra alternatyvių spalvų pasirinkimo metodų: #### Spalvų paletės generatoriai Tokie įrankiai kaip Adobe Color, Coolors ir Paletton sutelkti dėmesį į harmoningų spalvų schemų kūrimą, o ne į individualių spalvų pasirinkimą. Jie yra idealūs, kai reikia sukurti visą spalvų paletę, remiantis spalvų teorijos principais. #### Vaizdų spalvų ekstraktoriai Tokie įrankiai kaip ColorZilla ir ImageColorPicker leidžia jums išgauti spalvas tiesiai iš vaizdų arba bet kurioje ekrano vietoje. Tai ypač naudinga, kai reikia atitikti esamas spalvas iš nuotraukų ar dizainų. #### Fizikiniai spalvų sistemų Spaudai orientuotam darbui fizikinės spalvų sistemos, tokios kaip Pantone, CMYK spalvų knygelės ar RAL spalvų schemos, teikia standartizuotus nuorodas, užtikrinančias spalvų tikslumą skirtinguose spausdinimo procesuose. #### Įmontuoti programinės įrangos įrankiai Dauguma dizaino programinės įrangos (Adobe Photoshop, Illustrator, Figma ir kt.) apima įmontuotus spalvų pasirinkimo įrankius. Nors tai patogu, šie dažnai yra riboti iki programos ir nesuteikia tarpformatinės konversijos, kurią siūlo mūsų įrankis. ## Skaitmeninio spalvų pasirinkimo istorija Spalvų pasirinkimo įrankių evoliucija atspindi skaitmeninio dizaino raidos eigą: ### Ankstyvas skaitmeninis spalvų pasirinkimas (1970-1980) Pirmieji skaitmeniniai spalvų sistemai buvo labai riboti dėl techninės įrangos apribojimų: - Ankstyvieji kompiuterių monitoriai galėjo rodyti tik 16 arba 256 spalvas - Spalvos buvo pasirenkamos iš išankstinių paletių - Sukurta interneto saugių spalvų paletė (216 spalvų) užtikrinti tarpininkavimo suderinamumą ### RGB ir Hex standartai (1990) Kai technologija pažengė: - 24 bitų spalva tapo standartu, leidžiančiu rodyti 16,7 milijono spalvų - Šešiakampė notacija buvo priimta HTML ir CSS - Pagrindiniai spalvų pasirinkimo įrankiai pasirodė dizaino programinėje įrangoje - Tinklalapių kūrėjai buvo riboti iki pavadintų spalvų ir šešiakampių kodų ### Šiuolaikinis spalvų pasirinkimas (2000-dabar) Šiandieniniai spalvų pasirinkimo įrankiai atspindi mūsų išsamią skaitmeninių spalvų supratimą: - Realaus laiko spalvų pasirinkimo įrankiai su vizualinėmis sąsajomis - Palaikymas keliems spalvų modeliams (RGB, HSL, HSV, CMYK) - Spalvų prieinamumo įrankiai, skirti tikrinti kontrasto santykius - Išplėstinės spalvų harmonijos algoritmai - Integracija su dizaino sistemomis ir komponentų bibliotekomis Spalvų pasirinkimo įrankių plėtra ir toliau vystosi kartu su pažanga ekrano technologijose, spalvų moksle ir dizaino metodologijose. ## Spalvų prieinamumo svarstymai Pasirenkant spalvas, svarbu atsižvelgti į prieinamumą vartotojams, turintiems spalvų regos sutrikimų: ### Spalvų aklumo tipai - **Protanopija**: sunkumai suvokiant raudonas spalvas - **Deuteranopija**: sunkumai suvokiant žalias spalvas - **Tritanopija**: sunkumai suvokiant mėlynas spalvas - **Achromatopsija**: visiškas spalvų aklumas (matymas tik pilkumo) ### Prieinamumo patarimai 1. **Nesiremkite vien tik spalva**, kad perduotumėte informaciją 2. **Užtikrinkite pakankamą kontrastą** tarp teksto ir fono (mažiausiai 4.5:1 normaliam tekstui) 3. **Naudokite raštus ar tekstūras** be spalvų diagramose ir grafikuose 4. **Išbandykite savo spalvų pasirinkimus** su spalvų aklumo simuliatoriais 5. **Apsvarstykite galimybę naudoti spalvų aklumo draugiškas paletes**, kurios vengia problematiškų spalvų kombinacijų ## Dažniausiai užduodami klausimai ### Koks skirtumas tarp RGB ir CMYK spalvų modelių? RGB (Raudona, Žalia, Mėlyna) yra adityvus spalvų modelis, naudojamas skaitmeniniuose ekranuose, kur spalvos sukuriamos pridedant šviesą. CMYK (Cianas, Magenta, Geltona, Juoda) yra atimantis modelis, naudojamas spausdinimui, kur spalvos sukuriamos absorbuojant (atimant) šviesą. RGB gamina ryškesnes, gyvybingesnes spalvas, idealiai tinkančias skaitmeniniam medijai, o CMYK paprastai turi ribotą spektrą, geriau pritaikytą spausdinimo medžiagoms. ### Kodėl spalvos atrodo skirtingai mano ekrane nei spausdintos? Ši skirtumas kyla dėl to, kad ekranai naudoja RGB spalvų modelį, kuris gali rodyti platesnį spalvų spektrą nei tai, kas įmanoma su CMYK spausdinimo dažais. Be to, ekranai skleidžia šviesą, o spausdinti medžiagos ją atspindi. Įrenginių kalibravimo skirtumai, popieriaus kokybė ir dažų variacijos taip pat prisideda prie šio neatitikimo. Spausdinimui orientuotam darbui visada patikrinkite CMYK vertes ir apsvarstykite galimybę užsisakyti fizinius įrodymus. ### Kaip rasti šešiakampį kodą konkrečiai spalvai, kurią matau internete? Galite naudoti naršyklės plėtinius, tokius kaip ColorZilla, arba įmontuotus kūrėjo įrankius. „Chrome“ arba „Firefox“ dešiniuoju pelės mygtuku spustelėkite elementą, pasirinkite „Tikrinti“, tada naudokite spalvų pasirinkimo įrankį kūrėjo panelėje. Alternatyviai, padarykite ekrano nuotrauką ir įkelkite ją į mūsų spalvų pasirinkimo įrankį, tada spustelėkite norimą spalvą, kad gautumėte jos šešiakampį kodą. ### Koks geriausias būdas sukurti nuoseklų spalvų schemą? Pradėkite nuo pagrindinės spalvos, kuri atspindi jūsų prekės ženklo ar projekto nuotaiką. Tada naudokite spalvų teorijos principus, tokius kaip komplementinės (priešingos spalvų rate), analoginės (kaimyninės spalvos rate) arba triadinės (lygiai išdėstytos aplink spalvų ratą) santykiai, kad pasirinktumėte papildomas spalvas. Koreguokite sodrumą ir ryškumą, kad sukurtumėte hierarchiją. Mūsų spalvų pasirinkimo įrankis padeda jums vizualizuoti šiuos santykius ir tikslinti jūsų pasirinkimus. ### Kaip galiu užtikrinti, kad mano pasirinktos spalvos būtų prieinamos? Patikrinkite kontrasto santykį tarp teksto ir fono spalvų naudodami įrankius, tokius kaip WebAIM kontrasto tikrintuvas. Normaliam tekstui siekite mažiausiai 4.5:1 santykio, o dideliam tekstui – 3:1. Venkite problematiškų spalvų kombinacijų, skirtų spalvų akliems vartotojams (pvz., raudona/žalia). Išbandykite savo dizainą su spalvų aklumo simuliatoriais. Atminkite, kad apie 8% vyrų ir 0.5% moterų turi tam tikrą spalvų regos sutrikimą. ### Ką reiškia # simbolis šešiakampiuose spalvų koduose? Diakritinis arba svarbus simbolis (#) yra prefiksas, kuris rodo, kad po jo einantys simboliai atspindi šešiakampį spalvų kodą. Tai standartinė notacija HTML, CSS ir daugelyje dizaino programų. Šeši skaitmenys, kurie seka, atspindi RGB vertes šešiakampėje sistemoje, kur pirmas pora atspindi raudoną, antrasis žalią, o trečiasis mėlyną. ### Kaip konvertuoti spalvą iš RGB į CMYK spausdinimui? Mūsų spalvų pasirinkimo įrankis automatiškai konvertuoja RGB vertes į jų CMYK atitikmenis. Tiesiog įveskite savo RGB vertes, ir atitinkamos CMYK vertės bus rodomos. Tačiau atkreipkite dėmesį, kad kai kurios RGB spalvos yra už CMYK spektrą ir negali būti tiksliai atkurtos spausdinant. Profesionali dizaino programinė įranga, tokia kaip Adobe Illustrator arba Photoshop, taip pat teikia spalvų režimo konversiją su spektrinėmis įspėjimais. ### Kodėl yra tiek 3-skaitmenų, tiek 6-skaitmenų šešiakampių spalvų kodų? 3-skaitmenų šešiakampis kodas yra sutrumpinta notacija, kurią galima naudoti, kai kiekviena komponentų pora turi atitinkančius skaitmenis. Pavyzdžiui, #FF0000 gali būti sutrumpinta iki #F00, nes F=FF, 0=00 ir 0=00. Šis sutrumpinimas veikia tik toms spalvoms, kur kiekvienas kanalas gali būti atstovaujamas pakartotiniais skaitmenimis. Tai iš pradžių buvo pristatyta siekiant sumažinti failo dydį ankstyvuoju interneto laikotarpiu, tačiau išlieka patogiu sutrumpinimu. ### Kiek tikslūs yra spalvų konversijos tarp skirtingų modelių? Konversijos tarp RGB ir šešiakampių yra matematiškai tikslios, nes tai yra tiesioginiai tų pačių vertybių atvaizdai skirtinguose formatuose. Konversijos tarp RGB ir CMYK yra apytikslės dėl esminių skirtumų spalvų spektruose ir fizinių šviesos skleidimo bei dažų absorbcijos savybių. Mūsų įrankis naudoja pramonės standartines formules, kad užtikrintų kuo tikslesnes konversijas, atsižvelgiant į šias ribas. ### Ar galiu išsaugoti arba eksportuoti savo pasirinktas spalvas? Šiuo metu galite kopijuoti individualias spalvų vertes į savo iškarpinę. Rekomenduojame sukurti dokumentą arba naudoti specializuotą spalvų paletės įrankį, kad išsaugotumėte kelias spalvas savo projektams. Ateities atnaujinimai gali apimti funkcijas, leidžiančias išsaugoti spalvų paletes tiesiai į įrankį. ## Kodo pavyzdžiai spalvų konversijoms Štai keletas kodo pavyzdžių, kaip konvertuoti tarp skirtingų spalvų formatų:

1// RGB į Hex konversija
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// Hex į RGB konversija
12function hexToRgb(hex) {
13  // Pašalinti # jei yra
14  const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
15  
16  // Tvarkyti tiek 3-skaitmenų, tiek 6-skaitmenų šešiakampius
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// RGB į CMYK konversija
29function rgbToCmyk(r, g, b) {
30  // Normalizuoti RGB vertes
31  const normalizedR = r / 255;
32  const normalizedG = g / 255;
33  const normalizedB = b / 255;
34  
35  // Apskaičiuoti K (juodą)
36  const k = 1 - Math.max(normalizedR, normalizedG, normalizedB);
37  
38  // Tvarkyti gryną juodą
39  if (k === 1) {
40    return { c: 0, m: 0, y: 0, k: 100 };
41  }
42  
43  // Apskaičiuoti 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// Pavyzdžio naudojimas
57const rgb = { r: 255, g: 0, b: 0 }; // Gryna raudona
58console.log(`Hex: ${rgbToHex(rgb.r, rgb.g, rgb.b)}`);
59console.log(`CMYK:`, rgbToCmyk(rgb.r, rgb.g, rgb.b));
60

1# RGB į Hex konversija
2def rgb_to_hex(r, g, b):
3    return f'#{r:02x}{g:02x}{b:02x}'
4
5# Hex į RGB konversija
6def hex_to_rgb(hex_color):
7    # Pašalinti # jei yra
8    hex_color = hex_color.lstrip('#')
9    
10    # Tvarkyti tiek 3-skaitmenų, tiek 6-skaitmenų šešiakampius
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# RGB į CMYK konversija
21def rgb_to_cmyk(r, g, b):
22    # Normalizuoti RGB vertes
23    r_norm = r / 255.0
24    g_norm = g / 255.0
25    b_norm = b / 255.0
26    
27    # Apskaičiuoti K (juodą)
28    k = 1 - max(r_norm, g_norm, b_norm)
29    
30    # Tvarkyti gryną juodą
31    if k == 1:
32        return {'c': 0, 'm': 0, 'y': 0, 'k': 100}
33    
34    # Apskaičiuoti 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# Pavyzdžio naudojimas
47rgb = {'r': 0, 'g': 128, 'b': 255}  # Dangaus mėlyna
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    // RGB į Hex konversija
3    public static String rgbToHex(int r, int g, int b) {
4        return String.format("#%02x%02x%02x", r, g, b);
5    }
6    
7    // Hex į RGB konversija
8    public static int[] hexToRgb(String hexColor) {
9        // Pašalinti # jei yra
10        if (hexColor.startsWith("#")) {
11            hexColor = hexColor.substring(1);
12        }
13        
14        // Tvarkyti tiek 3-skaitmenų, tiek 6-skaitmenų šešiakampius
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    // RGB į CMYK konversija
31    public static double[] rgbToCmyk(int r, int g, int b) {
32        // Normalizuoti RGB vertes
33        double normalizedR = r / 255.0;
34        double normalizedG = g / 255.0;
35        double normalizedB = b / 255.0;
36        
37        // Apskaičiuoti K (juodą)
38        double k = 1 - Math.max(Math.max(normalizedR, normalizedG), normalizedB);
39        
40        // Tvarkyti gryną juodą
41        if (k == 1) {
42            return new double[]{0, 0, 0, 100};
43        }
44        
45        // Apskaičiuoti 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        // Pavyzdžio naudojimas
60        int r = 75, g = 0, b = 130;  // Purpurinė
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

Nuorodos

1. Agoston, M. K. (2013). Kompiuterių grafika ir geometrinė modeliavimas: Įgyvendinimas ir algoritmai. Springer Science & Business Media.

2. Adobe Systems. (2000). Adobe RGB (1998) spalvų vaizdo kodavimas. Adobe Systems Incorporated.

3. Fairchild, M. D. (2013). Spalvų išvaizdos modeliai. John Wiley & Sons.

4. Hunt, R. W. G., & Pointer, M. R. (2011). Spalvų matavimas. John Wiley & Sons.

5. Poynton, C. (2012). Skaitmeninis vaizdas ir HD: Algoritmai ir sąsajos. Elsevier.

6. W3C. (2018). CSS spalvų modulio lygis 4. W3C darbo projektas. Gauta iš https://www.w3.org/TR/css-color-4/

7. Interneto turinio prieinamumo gairės (WCAG) 2.1. (2018). Gauta iš https://www.w3.org/TR/WCAG21/

8. Tarptautinė spalvų konsorciumas. (2004). Specifikacija ICC.1:2004-10 (Profilio versija 4.2.0.0). Gauta iš http://www.color.org/specification/ICC1v42_2006-05.pdf

Išbandykite mūsų spalvų pasirinkimo įrankį šiandien!

Pasiruošę rasti tobulą spalvą savo projektui? Mūsų vartotojui patogus spalvų pasirinkimo įrankis leidžia lengvai pasirinkti, koreguoti ir konvertuoti spalvas tarp skirtingų formatų. Nesvarbu, ar kuriate tinklalapį, skaitmeninį meną ar planuojate spausdinimo medžiagas, mūsų įrankis suteikia jums reikiamą tikslumą ir lankstumą.

Pradėkite eksperimentuoti su spalvomis dabar ir pakelkite savo dizainus į kitą lygį!