Skaitmeninio dizaino pasaulyje spalvos apibūdinamos ne tik vardais, bet ir kodais. Dažniausiai naudojamas - šešioliktainis spalvos kodas (HEX). Šiame straipsnyje apžvelgsime šiuos kodus, jų kilmę, reikšmę ir praktinį pritaikymą įvairiose srityse, nuo interneto svetainių kūrimo iki grafinio dizaino programų.
Šešioliktainių spalvų kodų pagrindai
Kas yra šešioliktainiai spalvų kodai?
Šešioliktainiai spalvų kodai yra plačiai naudojami HTML ir kitose programavimo kalbose, taip pat paveikslėlių ir vaizdo redagavimo įrankiuose, tokiuose kaip Adobe Photoshop, MS Paint, Filmora, Davinci, Excel, Word ir pan. Jie leidžia tiksliai nustatyti spalvą, vaizduojamą skaitmeniniu būdu.
Paprastai šešioliktainis kodas prasideda simboliu „#“, po kurio seka šeši simboliai - skaičiai (0-9) arba raidės (A-F). Šie simboliai atspindi raudonos, žalios ir mėlynos spalvų (RGB) intensyvumą. Kiekviena spalvų pora nurodo vienos iš pagrindinių spalvų kiekį, svyruojantį nuo 00 (mažiausias intensyvumas) iki FF (didžiausias intensyvumas).
Pavyzdžiui, kodas „#000000“ atitinka juodą spalvą (visų spalvų intensyvumas yra minimalus), o kodas „#FFFFFF“ - baltą spalvą (visų spalvų intensyvumas yra maksimalus). Visos kitos spalvos yra šių minimalių ir maksimalių reikšmių intervale.
RGB ir HEX spalvų sistemų atsiradimas ir skirtumai
Kai HTML (svetainių kūrimo kalba) dar tik žengė pirmuosius žingsnius, reikėjo būdo spalvoms aprašyti. Tada atsirado RGB spalvų sistema - raudona, žalia ir mėlyna. Čia spalvos aprašomos kiekvienai iš jų priskiriant vertę, dažniausiai nuo 0 iki 255. Tačiau augant technologijoms ir HTML sudėtingumui, prireikė universalesnio ir tikslesnio spalvų žymėjimo būdo.
Taip atsirado šešioliktainė sistema, trumpai „hex“. Tai 16-tainė skaičiavimo sistema, kurioje skaičiuojama iki 16, o ne iki įprastų 10. Taip gimė šešių simbolių spalvų kodai, leidžiantys išgauti milijonus atspalvių, kuriuos dizaineriai gali lengvai naudoti.
Matydami kodą, pvz., #FFFFFF, žvelgiate į RGB spalvos išraišką. Pirmi du simboliai žymi raudoną, kiti du - žalią, paskutiniai - mėlyną. Kiekviena pora gali būti nuo 00 iki FF (šešioliktainiai skaičiai). Taip sukuriami milijonai spalvų derinių!
Kitos spalvų sistemos
Be hex ir RGB, egzistuoja ir kitos spalvų sistemos:
- HSL (atspalvis, sodrumas, šviesumas)
- HSV (atspalvis, sodrumas, reikšmė)
- CMYK (cianas, magenta, geltona, juoda)
CMYK dažniau naudojama spaudoje, o RGB ir hex - skaitmeniniuose ekranuose.
Spalvų kodų įrankiai ir jų naudojimas
Šešioliktainio kodo ieškikliai (spalvų rinkikliai)
Ar kada matėte nuostabų magentos gradientą svetainėje ir norėjote sužinoti tikslią jo spalvą? Būtent čia į pagalbą ateina hex kodų ieškikliai, dar vadinami spalvų rinkikliais! Hex kodų ieškiklis leidžia užvesti pelės žymeklį ant bet kurio ekrano taško ir iškart gauti hex (arba RGB) reikšmę. Jei dirbate su CSS ar HTML ir reikia tiksliai nuskaityti spalvą iš ekrano, tokie įrankiai - tikras išsigelbėjimas.
Internete gausu įvairių įrankių:
- Image Color Picker
- RedKetchup
- HTML Color Picker
Šios programos leidžia įkelti PNG, JPG ar GIF failus ir išsirinkti spalvą tiesiai iš paveikslėlio. Taip pat yra paveikslėlių spalvos rinkiklių grafinėse programose, kurios yra patogūs kasdieniai pagalbininkai. Darbalaukio programos dažnai turi išmanesnes funkcijas, pavyzdžiui, rodo analogiškas, papildomas ar triadines spalvų schemas. Mobiliosios programėlės leidžia spalvas „pagauti“ tiesiog fotografuojant arba renkantis iš jūsų nuotraukų.
Spalvų (HTML) kodų skaičiuoklė ir lentelė
Norint gauti bet kokios spalvos kodą (HEX, RGB, HSL), galima pasinaudoti specialia skaičiuokle. Pasirinkus norimą spalvą, priklausomai nuo naudojamos interneto naršyklės ir įrenginio (mobilus ar stacionarus), gaunamas atitinkamas kodas. Taip pat galite tiesiog nukopijuoti reikiamą spalvos kodą iš pateiktos spalvų kodų lentelės.
Spalvų kodų lentelė (HEX)
Šioje lentelėje pateikti dažniausiai naudojami šešioliktainiai spalvų kodai (HEX):
| Kodas | Kodas | Kodas |
|---|---|---|
| #ffffff | #ffccff | #ff99ff |
| #ffffcc | #ffcccc | #ff99cc |
| #ffff99 | #ffcc99 | #ff9999 |
| #ffff66 | #ffcc66 | #ff9966 |
| #ffff33 | #ffcc33 | #ff9933 |
| #ffff00 | #ffcc00 | #ff9900 |
| #ff66ff | #ff33ff | #ff00ff |
| #ff66cc | #ff33cc | #ff00cc |
| #ff6699 | #ff3399 | #ff0099 |
| #ff6666 | #ff3366 | #ff0066 |
| #ff6633 | #ff3333 | #ff0033 |
| #ff6600 | #ff3300 | #ff0000 |
| #ccffff | #ccccff | #cc99ff |
| #ccffcc | #cccccc | #cc99cc |
| #ccff99 | #cccc99 | #cc9999 |
| #ccff66 | #cccc66 | #cc9966 |
| #ccff33 | #cccc33 | #cc9933 |
| #ccff00 | #cccc00 | #cc9900 |
| #cc66ff | #cc33ff | #cc00ff |
| #cc66cc | #cc33cc | #cc00cc |
| #cc6699 | #cc3399 | #cc0099 |
| #cc6666 | #cc3366 | #cc0066 |
| #cc6633 | #cc3333 | #cc0033 |
| #cc6600 | #cc3300 | #cc0000 |
| #99ffff | #99ccff | #9999ff |
| #99ffcc | #99cccc | #9999cc |
| #99ff99 | #99cc99 | #999999 |
| #99ff66 | #99cc66 | #999966 |
| #99ff33 | #99cc33 | #999933 |
| #99ff00 | #99cc00 | #999900 |
| #9966ff | #9933ff | #9900ff |
| #9966cc | #9933cc | #9900cc |
| #996699 | #993399 | #990099 |
| #996666 | #993366 | #990066 |
| #996633 | #993333 | #990033 |
| #996600 | #993300 | #990000 |
| #66ffff | #66ccff | #6699ff |
| #66ffcc | #66cccc | #6699cc |
| #66ff99 | #66cc99 | #669999 |
| #66ff66 | #66cc66 | #669966 |
| #66ff33 | #66cc33 | #669933 |
| #66ff00 | #66cc00 | #669900 |
| #6666ff | #6633ff | #6600ff |
| #6666cc | #6633cc | #6600cc |
| #666699 | #663399 | #660099 |
| #666666 | #663366 | #660066 |
| #666633 | #663333 | #660033 |
| #666600 | #663300 | #660000 |
| #33ffff | #33ccff | #3399ff |
| #33ffcc | #33cccc | #3399cc |
| #33ff99 | #33cc99 | #339999 |
| #33ff66 | #33cc66 | #339966 |
| #33ff33 | #33cc33 | #339933 |
| #33ff00 | #33cc00 | #339900 |
| #3366ff | #3333ff | #3300ff |
| #3366cc | #3333cc | #3300cc |
| #336699 | #333399 | #330099 |
| #336666 | #333366 | #330066 |
| #336633 | #333333 | #330033 |
| #336600 | #333300 | #330000 |
| #00ffff | #00ccff | #0099ff |
| #00ffcc | #00cccc | #0099cc |
| #00ff99 | #00cc99 | #009999 |
| #00ff66 | #00cc66 | #009966 |
| #00ff33 | #00cc33 | #009933 |
| #00ff00 | #00cc00 | #009900 |
| #0066ff | #0033ff | #0000ff |
| #0066cc | #0033cc | #0000cc |
| #006699 | #003399 | #000099 |
| #006666 | #003366 | #000066 |
| #006633 | #003333 | #000033 |
| #006600 | #003300 | #000000 |
Spalvų nuskaitymas iš fizinių objektų
Įsivaizduokite, kad galite „paimti“ spalvą nuo fizinio objekto ir gauti jo skaitmeninį kodą. Skamba futuristiškai? Nieko panašaus! Šiuolaikiniai rinkikliai ar „pipetės“ gali fiksuoti realaus pasaulio spalvą ir paversti ją hex ar RGB kodu. Kamera ir programinė įranga tikrą spalvą transformuoja į skaitmeninę.
Rekomendacijos naudojant spalvų rinkiklius:
- Apšvietimas svarbus: ar renkate spalvą nuotraukoje, ar realybėje, šaltinis turi būti gerai apšviestas. Taip išgausite tikslesnę spalvą.
- Atkreipkite dėmesį į gradientus: spalva gradientuose gali keistis. Todėl išsirinkite konkretų trokštamos spalvos tašką.
- Integracija: rinkitės rinkiklį, kuris sklandžiai veikia su jūsų dizaino programa. Taip sutaupysite laiko ir užtikrinsite spalvų nuoseklumą.
Šešioliktainių kodų ir vaizdų naudojimas „Microsoft Dynamics 365 Commerce“
Produkto dimensijų konfigūravimas
„Microsoft Dynamics 365 Commerce“ palaiko dydžio, stiliaus ir spalvos dimensijų naudojimą, kad būtų galima atspindėti produkto variantus. Produkto dimensijos turi draugiškus pavadinimus, rodomus produkto informacijos puslapiuose (PDP), kad būtų galima pasirinkti produkto variantus. Šių draugiškų pavadinimų pavyzdžiai yra „Mažas“, „Vidutinis“ ir „Didelis“ - dydžiams, o spalvoms - „Juoda“ ir „Ruda“.
Tačiau tuo atveju, jei produktas palaiko daugybę variantų, reikia kelių pasirinkimų kiekvienam produkto variantui peržiūrėti. Kai dimensijos yra rodomos kaip pavyzdžiai PDP puslapiuose, klientams pateikiamos produktų variantų vaizdinės peržiūros versijos. Dimensijų rodymo kaip pavyzdžių funkcija įgalina „Commerce“ naudoti šešioliktainius (hex) kodus ir vaizdus dimensijų rodymui kaip pavyzdžių.
Funkcijos įjungimas ir valdymas
Norėdami įjungti ekrano dimensijas kaip "Commerce Headquarters" funkciją, eikite į darbo sričių funkcijų valdymą ir įjunkite mechanizmą Įgalinti mechanizmą, kad dimensijas būtų galima pateikti kaip funkciją. Dimensijų rodymo kaip pavyzdžių funkcija yra palaikoma dydžio, stiliaus ir spalvos dimensijoms.
Šešioliktainio kodo ir vaizdo URL reikšmės atitinkamoms dimensijoms gali būti nurodytos „Commerce“ būstinėje. „Commerce Headquarters“ atidarykite dimensijos puslapį ieškodami Spalvos, Dydis arba Stilius. Kiekvieno puslapio tinklelyje pateikiamos dimensijų reikšmės. Galite valdyti rodymo tvarkos, šešioliktainio kodo ir vaizdo URL reikšmes.
Dimensijų grupės
Norėdami sukurti dimensijų grupes „Dynamics 365 Commerce“, galite naudoti ypatybę RefinerGroup. Jei dimensijų grupės apibrėžtos, atidarykite atitinkamą puslapį ieškodami spalvų grupės, dydžių grupės arba stilių grupės.
Produkto dimensija (kuriant produktą)
Kurdami naują produktą, dimensijų vertėms įvesti galite naudoti puslapį Produkto dimensijos. Gali būti, kad jau nustatyti esamų produktų hexcode, URL (vaizdų) ir refinerGroup laukai. Tačiau reikšmes galite keisti taip, kaip jums reikia.
Daugeliui spalvos dimensijų turi būti pateikta šešioliktainio kodo spalvos reikšmė dimensijos puslapiuose „Commerce“ būstinėje. Pavyzdžiui, juoda spalva turi turėti hex kodo vertę #000000.
Kai kurios spalvos dimensijos atspindi raštus, o ne vientisas spalvas. Turite įkelti kiekvieną vaizdą į „Commerce“ svetainių daryklę ir jį publikuoti. Tada įveskite vaizdo URL publikuotam vaizdui atitinkamose dimensijos puslapiuose „Commerce“ būstinėje. Jei dimensija buvo pasirinkta rodymui kaip pavyzdys, tačiau šešioliktainis kodas nėra apibrėžtas, „Commerce“ atliks vaizdo peržvalgą, kai generuos puslapį. Galite naudoti laikmenos šabloną vaizdo URL apibrėžti taip pat, kaip ir galite jį naudoti produkto ir kategorijos vaizdams.
Introducing Dynamics 365 Commerce Functional Consultant Certification
Vaizdų įkėlimas ir susiejimas
Daugelį spalvų dimensijų galite konfigūruoti tiek šešioliktainiais kodais, tiek vaizdo URL. „Commerce“ generavimo atsarginė logika automatiškai ieškos šešioliktainio kodo arba vaizdo URL spalvos pavyzdžiui rodyti.
Nurodę dimensijos reikšmės hex kodą arba vaizdo URL, taip pat galite nurodyti lauko RefinerGroup reikšmę. Pavyzdžiui, jei jūsų spalvos dimensijos reikšmės yra „mėlyna“, „languota mėlyna“, „šviesiai mėlyna“ ir „tamsiai mėlyna“, kiekviena reikšmė yra susieta su skirtingu šešioliktainiu kodu arba vaizdo URL. Todėl kiekviena reikšmė atrodys kaip skirtinga spalva atitinkamų produktų PDP puslapiuose ir kortelėse.
Jei vaizdo URL yra panaudoti kuriai nors dimensijos reikšmei, atitinkami vaizdai turi būti įkelti į „Commerce“ svetainių daryklę. Kiekvieno vaizdo vieta turi atitikti failo pavadinimą ir aplanko kelią, kurie yra apibrėžti vaizdui „Commerce“ būstinėje. Vaizdų failai turi būti įkelti į atitinkamą vietų kategoriją svetainių daryklėje. Pavyzdžiui, spalvų vaizdai turi būti įkelti į aplanką Spalvos kategorija. Šioje iliustracijoje pateikiamas pavyzdys, kuriame į svetainės generatoriaus laikmenų biblioteką nusiunčiamas dialogo langas Įkelti failus.
Pavyzdžių rodymo el. prekybos svetainėse
Tam, kad pavyzdžiai galėtų pasirodyti el. prekybos svetainės puslapiuose, kuriems reikia dimensijos pasirinkimo, pavyzdžiui, PDP ir sąrašų puslapiuose, turite sukonfigūruoti dimensijos svetainės parametrus „Commerce“ būstinėje. Be to, turite įgalinti ieškos rezultatų modulių ieškos rezultatų ypatybę Įtraukti produkto atributus. Jei jūsų svetainė naudoja pritaikytus kategorijos puslapius, turėtumėte atnaujinti tuose puslapiuose naudojamus paieškos rezultatų modulius, kad būtų įgalinti produkto atributai įtraukti į ieškos rezultatų ypatybę.
Panašios dimensijos, pavyzdžiui, spalvos, gali būti sugrupuotos produktų sąrašo puslapiuose. Pavyzdžiui, klientas ieško mėlynos spalvos produktų. Jei įvairios mėlynos spalvos dimensijos reikšmės yra sugrupuojamos kartu, ieškos rezultatai rodys produktus, turinčius skirtingus mėlynos atspalvius.
Atsargų prieinamumo funkcija
Funkcija turi pasirinktines galimybes parodyti produkto varianto spalvos arba dimensijos atsargų prieinamumą. Pavyzdžiui, produktas parduodamas keliais dydžiais, bet kai kurių dydžių nėra atsargose. Šiuo atveju atsargose neturimų produktų sąrašai atvaizduojami kitaip, kad būtų galima nurodyti, jog jie negalimi. Atsargų prieinamumo funkciją galima sukonfigūruoti naudoti ir PDPs, ir ieškos ar kategorijų sąrašo puslapiuose, kuriuose rodomos operacijos. Norėdami jį suaktyvinti, turite nustatyti dimensijos pasirinkimo ypatybės atnaujinimo mediją kaip Teisinga laikmenų modulyje. Sukeitimo inventoriaus prieinamumo funkcija yra prieinama „Commerce“ 10.0.21 versijoje.
„Commerce“ šiuo metu neturi visiškai parengto diegimo, palaikančio pavyzdžių rodymą Elektroniniame kasos aparate (EKA) ir kituose kanaluose.
Spalvų kodų ateitis ir dirbtinio intelekto galimybės
Hex kodų ieškikliai nuolat tobulėja, o ateitis atrodo dar spalvingesnė. AR ir dirbtinis intelektas netrukus leis vos pagal vieną pasirinktą atspalvį pamatyti visą spalvų ratą. Įsivaizduokite, kad nukreipiate telefoną į mėlyną paukštį ir gaunate ne tik jo hex ar RGB kodą, bet ir susijusių spalvų paletę, jų pavadinimus bei patarimus, kaip visa tai derinti savo projektuose.
Be to, AI ir dizaino sintezė leis gauti išmanių pasiūlymų. Pagal pasirinktą spalvą įrankiai galės rekomenduoti visą nuotaikų ar vizualinių temų lentą - tikrą kūrybos ir įkvėpimo užtaisą. Skaitmeniniam dizainui vis labiau susipinant su fiziniu pasauliu, tokie įrankiai kaip hex kodų ieškiklis išliks nepakeičiami.
Kalbant apie skaitmeninio pasaulio stebuklus - ar jau išbandėte Speechify AI Video Generator? Nesvarbu, ar naudojate iOS, Android ar PC, šis įrankis lengvai paverčia turinį į įtraukiančius vaizdo įrašus. Įsivaizduokite, kaip derinate savo dizaino įkvėpimus, gražiausius hex kodus ir RGB paletes su interaktyviais vizualais! Vos keliais paspaudimais jūsų dizainas gali atgyti ir įtraukti žiūrovus. Norite pabandyti? Išmėginkite Speechify AI Video Generator jau šiandien!
Introducing Dynamics 365 Commerce Functional Consultant Certification
Dažniausiai užduodami klausimai
Kuo skiriasi RGB spalvų sistema nuo hex spalvos kodo?
Tiek RGB, tiek hex skirti spalvoms perteikti skaitmeninėje erdvėje, tačiau jų formatai skiriasi. RGB reiškia raudona, žalia, mėlyna, o spalvos aprašomos kiekvienai iš jų priskiriant vertę, dažniausiai nuo 0 iki 255. Hex kodas - tai šešioliktainis RGB vertės variantas. Čia naudojama šešioliktainė sistema ir šešių simbolių kodas, kuriame kiekvieni du simboliai žymi atitinkamos spalvos intensyvumą.
Ar hex ieškikliai veikia tik ekrane, ar gali atpažinti ir fizinių objektų spalvas?
Daugelis paprastų hex ieškiklių skirti spalvoms rinkti tik ekrane. Tačiau technologijų pažanga leidžia rinkikliams ar „pipetėms“ spalvas nuskaityti ir nuo objektų realiame pasaulyje. Tokie įrankiai naudoja kamerą ir išmanią programinę įrangą, kad spalvas paverstų skaitmeniniais kodais.
Ar egzistuoja kitos spalvų sistemos, be hex ir RGB?
Taip, be hex ir RGB, naudojamos ir HSL (atspalvis, sodrumas, šviesumas), HSV (atspalvis, sodrumas, reikšmė), CMYK (cianas, magenta, geltona, juoda). RGB dominuoja internete, CMYK - spaudoje.
tags: #sesioliktainis #spalvos #kodas