Պատահական գույների գեներատոր

Գույնի կարիք ունե՞ք մակետի, դիագրամի կամ դատարկ կտավի համար և չե՞ք ցանկանում այն ընտրել սովորության համաձայն։ Այս անվճար պատահական գույների գեներատորը գույներ է ընտրում էկրանի կողմից ցուցադրվող ամբողջ 24-bit տիրույթից և յուրաքանչյուրը տեղադրում գունային նմուշի վրա՝ իր կոդի կողքին։ «Քանակ» դաշտում ընտրեք, թե քանի գույն եք ցանկանում՝ 1-ից մինչև 50 ցանկացած թիվ, նշեք անհրաժեշտ ձևաչափերը և սեղմեք «Ստեղծել» կոճակը։ Էջը բացվում է HEX ձևաչափի մեկ գույնով, ուստի առաջին արդյունքը ընդամենը մեկ սեղմման հեռավորության վրա է։ «HEX կոդ» նշավանդակը սկզբից ևեթ ակտիվ է, «RGB կոդ» և «HSL կոդ» նշավանդակները գտնվում են դրա կողքին, և երեքի ցանկացած համադրություն կարելի է միացնել միաժամանակ։ «Ստեղծել» կոճակի կողքի ատամնանիվով կոճակը բացում է «Ընդլայնված Կարգավորումներ» բաժինը, որտեղ կարող եք սահմանափակել գույները որոշակի տեսակով կամ միջակայքով, բացառել կրկնությունները և փոխել HEX կոդի գրելաձևը։

Յուրաքանչյուր գույն ստեղծվում է ձեր դիտարկիչում Web Crypto API (crypto.getRandomValues) միջոցով, որն ապահովում է կրիպտոգրաֆիկորեն ամուր պատահական բայթեր ձեր համակարգի պատահականության սեփական աղբյուրից, այլ ոչ թե կեղծ պատահական ֆունկցիայի միջոցով, ինչպիսին է Math.random()-ը։ Էկրանին ցուցադրվող գույնը բաղկացած է երեք ալիքից՝ կարմիր, կանաչ և կապույտ, որոնցից յուրաքանչյուրը 0-ից մինչև 255 ամբողջ թիվ է, իսկ մեկ պատահական բայթը կարող է ընդունել ճիշտ 256 արժեք։ Այսպիսով, յուրաքանչյուր ալիք պարզապես մեկ բայթ է՝ առանց միջանկյալ գործողությունների. մնացորդ չի հաշվարկվում, և ոչ մի փոխակերպման քայլ չի նախընտրում որևէ կոնկրետ երանգ։ Դա դարձնում է էջի կողմից ստեղծվող բոլոր 16,777,216 գույները ճշգրիտ հավասարահավանական ամեն անգամ, երբ սեղմում եք «Ստեղծել» կոճակը։ «Ընդլայնված Կարգավորումներ» բաժնում սահմանված ավելի նեղ միջակայքը պահպանում է այդ կանոնը միջակայքի ներսում. գույները շարունակում են ընտրվել ամբողջ տարածությունից, իսկ դրանից դուրս մնացածները մի կողմ են դրվում, որպեսզի միջակայքի թույլատրած յուրաքանչյուր գույն ունենա նույն հնարավորությունը։ Ոչինչ չի ուղարկվում սերվերին, ոչինչ չի գրանցվում մատյաններում, և էջի բեռնումից հետո այն շարունակում է աշխատել նույնիսկ առանց ինտերնետ կապի։

Երեք ձևաչափերը նկարագրում են նույն գույնը երեք տարբեր եղանակներով։ «HEX կոդ» ձևաչափը վեցանիշ տեսքն է, որն օգտագործվում է CSS-ում և դիզայնի գործիքների մեծ մասում, ինչպես օրինակ #0778ff. այն գրվում է փոքրատառերով՝ սկզբում դնելով # նշանը, իսկ «Ընդլայնված Կարգավորումներ» բաժնի «Մեծատառ» և «Առանց #» տարբերակները փոխում են դա այն ծրագրերի համար, որոնք այլ տեսք են պահանջում։ «RGB կոդ» ձևաչափը նշում է երեք ալիքները, ինչպես rgb(7, 120, 255), ինչը հարմար է յուրաքանչյուր ալիքի հետ առանձին աշխատող ծրագրային կոդի համար։ «HSL կոդ» ձևաչափը նկարագրում է գույնը ըստ երանգի, հագեցվածության և լուսավորության, ինչպես hsl(213, 100%, 51%), որն ամենահեշտ ձևն է հետագայում ձեռքով կարգավորելու համար։ Երեքն էլ կարելի է ուղղակիորեն տեղադրել ոճերի աղյուսակում։ Սակայն դրանք միատեսակ ճշգրիտ չեն։ HEX-ը և RGB-ն ճշգրիտ են, իսկ HSL-ը՝ կլորացված։ Էջը երանգը, հագեցվածությունը և լուսավորությունը գրում է ամբողջ թվերով, և գույների մոտ 89%-ի դեպքում այդ կլորացված արժեքը հետ փոխակերպելիս չի վերականգնում ճիշտ նույն գույնը. #646503-ը ցուցադրվում է որպես hsl(61, 94%, 20%), որը հետ փոխակերպվելիս դառնում է #616303։ Տարբերությունը որևէ ալիքում 5 քայլից ավելի չէ և սովորաբար 1 կամ 2 է՝ անտեսանելի էկրանին, բայց էական, եթե պահպանում եք HSL արժեքը և ակնկալում հետ ստանալ սկզբնական HEX-ը։ Այդ պատճառով արժեքը պահպանեք HEX կամ RGB ձևաչափով։

Մեկ գույնը հայտնվում է արդյունքի կենտրոնում որպես առանձին բլոկ, իսկ մի քանիսը ցուցադրվում են որպես համարակալված ցուցակ՝ մեկ տողում մեկ գույն, ընտրված ձևաչափերը կողք կողքի և փոքր կոնտրաստի նշանով վերջում։ Երեքից ավելի գույների ցանկը ոլորվում է շրջանակի ներսում, իսկ անկյունում գտնվող սլաքը բացում է այն ամբողջ բարձրությամբ. էջը հիշում է ձեր թողած դիրքը։ Սեղմեք ցանկացած կոդի վրա՝ միայն այդ կոդը պատճենելու համար։ Տողի վերջում գտնվող պատճենման կոճակը պատճենում է այդ գույնի բոլոր կոդերը մեկ տողով՝ բացատներով բաժանված։ Սեղմեք բուն գունային նմուշի վրա, և կբացվի ձեր դիտարկիչի սեփական գույնի ընտրիչը. այնտեղ ընտրեք այլ գույն, և այդ տողի յուրաքանչյուր կոդ կվերաշարադրվի համապատասխանաբար՝ ձեր միացրած բոլոր ձևաչափերով և իր նշանով։ «Պատճենել բոլորը» կոճակը պատճենում է ամբողջ խումբը՝ տողում մեկ գույն սկզբունքով, իսկ «Պահպանել ֆայլում» տարբերակը նույն տեքստը գրանցում է սովորական .txt ֆայլում. երկուսն էլ հաշվի են առնում ընտրիչում փոխված գույները։ «Պատմություն» բաժինը պահպանում է ձեր վերջին 10 ստեղծված խմբերը այս դիտարկիչում, ճիշտ այնպես, ինչպես դրանք ստեղծվել են, իսկ «Մաքրել» կոճակը դատարկում է արդյունքը։ Ձեր կարգավորումները, ներառյալ «Ընդլայնված Կարգավորումներ» բաժնի ընտրանքները, պահպանվում են հաջորդ այցելության համար։

Հավասարահավանական գույները միշտ չէ, որ հավասարաչափ բաշխված տեսք ունեն, և իմանալը, թե ինչ ակնկալել, ձեզ կազատի անտեղի «Ստեղծել» սեղմելուց։ Ամբողջ տիրույթով չափելիս գույների մոտ 35%-ը վառ և հագեցած են՝ առնվազն 70% HSL հագեցվածությամբ և 35%-ից մինչև 65% լուսավորությամբ։ Գրեթե մոխրագույնները, որոնց հագեցվածությունը 20%-ից ցածր է, կազմում են ընդամենը մոտ 4%, իսկ շատ մուգ գույները (լուսավորությունը 20%-ից ցածր) և շատ բաց գույները (80%-ից բարձր)՝ յուրաքանչյուրը մոտ 3%։ Այսպիսով, «Բոլոր գույները» տարբերակից տասը գույնի խումբը սովորաբար կներառի մի քանի ուժեղ գույներ և հազվադեպ՝ պաստելային կամ մուգ մոխրագույն։ Երբ որոշակի տեսակի կարիք ունեք, ընտրեք այն «Գույնի տեսակ» ցանկից. «Վառ» տարբերակը պահպանում է հենց այդ հագեցած խումբը, իսկ «Պաստելային», «Մուգ», «Մեղմ» և «Մոխրագույնի երանգներ» տարբերակները նույնն են անում իրենց խմբերի համար։ «Հատուկ» տարբերակը թույլ է տալիս սահմանել ձեր սեփական «Երանգ», «Հագեցվածություն» և «Լուսավորություն» միջակայքերը, իսկ երանգի տիրույթը կարող է անցնել 0-ից այն կողմ, այնպես որ 330-ից մինչև 30-ը տալիս է կարմիր գույներ։ Միջակայքը ստուգվում է էջում ցուցադրվող HSL կոդի համեմատ, այնպես որ ոչ մի կոդ դրանից դուրս չի մնում, իսկ եթե այն պարունակում է չափազանց քիչ գույներ ձեր նշած «Քանակ» արժեքի համար, էջը առաջարկում է ընդլայնել այն՝ գույները կրկնելու փոխարեն։ Այլապես կրկնությունները հնարավոր են, բայց հազվադեպ. նշեք «Առանց կրկնության»՝ դրանք բացառելու համար, իսկ առանց դրա հավանականությունը, որ ամբողջ տիրույթից ընտրված 50 գույներից երկուսը նույնական կլինեն, կազմում է մոտ 1-ը 13,700-ից։

Պատահական գույնը հաճախ պահանջվում է որպես ֆոն, ինչն առաջացնում է այն միակ հարցը, որին գունային նմուշը չի կարող պատասխանել աչքաչափով. արդյո՞ք դրա վրա գրված տեքստը ընթեռնելի կլինի։ Վեբի հասանելիության ուղեցույցը՝ WCAG-ը, սովորական տեքստի համար պահանջում է առնվազն 4.5:1 կոնտրաստի հարաբերակցություն։ Այս էջի կողմից ստեղծվող բոլոր գույների չափումներով՝ սև տեքստը հասնում է այդ ցուցանիշին դրանց մոտ 65%-ի վրա, իսկ սպիտակ տեքստը՝ մոտ 36%-ի վրա, և չկա որևէ գույն, որի դեպքում երկուսն էլ անբավարար լինեն. երկուսից լավագույնը միշտ հասնում է առնվազն 4.58:1 հարաբերակցության։ Այսպիսով, ցանկացած պատահական ֆոնի դեպքում սև կամ սպիտակ տեքստը ընթեռնելի կլինի, և էջը ցույց է տալիս, թե որ մեկը։ Յուրաքանչյուր գույնի կողքին ցուցադրվում է փոքր նշան, որի վրա գրված է Aa երկուսից ավելի հարմար գույնով, որին հաջորդում է կոնտրաստի հարաբերակցությունը։ Հարաբերակցությունը կլորացվում է դեպի ներքև, որպեսզի երբեք չչափազանցնի արժեքը, և այն թարմացվում է, երբ գույնը փոխում եք ընտրիչում։ Նշանը համեմատում է միայն սև և սպիտակ տեքստը. բրենդային կամ որևէ այլ գույնի տեքստի դեպքում զույգը ստուգեք կոնտրաստի ստուգիչ գործիքով։

Պատահականը նույնը չէ, ինչ ներդաշնակը։ Խմբի յուրաքանչյուր գույն ընտրվում է ինքնուրույն՝ առանց մյուսների մասին իմանալու, ուստի գեներատորը երբեք չի ստեղծում գունապնակ դիզայներական իմաստով՝ ոչ կոմպլեմենտար զույգեր, ոչ նմանատիպ շարքեր, ոչ էլ ընդհանուր լուսավորություն։ Ավելի նեղ միջակայքը փոխում է խմբի բնույթը, բայց ոչ այդ կանոնը. պաստելները կամ կապույտների շարքը միևնույն է գալիս են մեկ առ մեկ, առանց որևէ կապող օղակի։ Դա է հենց դրա նպատակը. այն տալիս է ձեզ այնպիսի գույն, որը դուք ինքներդ չէիք ընտրի, ինչը կոտրում է սովորույթը կամ ստեղծագործական արգելափակումը։ Պատահական գտածոն օգտագործելի դարձնելու համար պահեք ձեզ դուր եկած գույնը և մնացածը բխեցրեք դրանից, այլ ոչ թե անընդհատ սեղմեք «Ստեղծել» կոճակը, մինչև ամբողջ հավաքածուն պատահաբար համընկնի։ Պահեք դրա երանգը և աստիճանաբար փոխեք լուսավորությունը՝ ավելի բաց և մուգ տարբերակներ ստանալու համար, կամ պտտեք երանգը 180 աստիճանով՝ հակադիր գույն ստանալու համար։ «HSL կոդ» ձևաչափն է, որ այդ քայլերը ենթադրությունների փոխարեն դարձնում է թվաբանական հաշվարկ։

Ինչո՞ւ ընտրել այս պատահական գույների գեներատորը։

• Յուրաքանչյուր գույն ստեղծվում է ձեր դիտարկիչում Web Crypto API-ի միջոցով, ոչինչ չի վերբեռնվում
• Բոլոր 16,777,216 գույները ճշգրիտ հավասարահավանական են՝ մեկ պատահական բայթ յուրաքանչյուր ալիքի համար
• HEX, RGB և HSL կոդեր միևնույն գույնի համար՝ ցանկացած համադրությամբ
• Մինչև 50 գույն միանգամից, յուրաքանչյուրը գունային նմուշի վրա՝ տեքստի կոնտրաստի նշանով
• Վառ, Պաստելային, Մուգ, Մեղմ և Մոխրագույնի երանգներ, կամ ձեր սեփական Երանգ, Հագեցվածություն և Լուսավորություն միջակայքը
• Առանց կրկնության տարբերակ, երբ դրա կարիքն ունեք, և HEX կոդ ձևաչափը՝ Մեծատառ կամ Առանց #
• Սեղմեք կոդի վրա՝ այն պատճենելու համար, կամ փոխեք ցանկացած գույն ձեր դիտարկիչի գույնի ընտրիչում
• Պատճենել բոլորը, Պահպանել ֆայլում և ձեր վերջին 10 խմբերի Պատմություն՝ պահպանված ձեր դիտարկիչում
• Անվճար և անսահմանափակ. ոչ մի գրանցում, ոչ մի քվոտա, ոչինչ չի պահվում մեր սերվերներում

Պատահական գույներն օգտակար են ամենուր, որտեղ գույն է պահանջվում դեռևս մինչև որևէ մեկի որոշում կայացնելը։ Դիզայներներն օգտագործում են դրանք ստեղծագործական արգելափակումը հաղթահարելու և այնպիսի ելակետ գտնելու համար, որին նրանց սովորական գունապնակը երբեք չէր հասնի։ Ծրագրավորողները լրացնում են մակետները, լցոնիչները և ավատարները, դիագրամի յուրաքանչյուր շարքին տալիս են իր գույնը, քանի դեռ իրական թեման որոշված չէ, և ստուգում են, թե ինչպես է ինտերֆեյսը աշխատում այնպիսի ֆոների հետ, որոնց համար այն նախատեսված չէր. «Բոլոր գույները» տարբերակից 50 գույների խումբը գրեթե միշտ ներառում է առնվազն մեկ շատ մուգ կամ շատ բաց գույն, իսկ «Մուգ» կամ «Պաստելային» ընտրանքը թեստավորումն ուղղորդում է դեպի մի ծայրը։ Գեներատիվ արվեստագետները և խաղերի նախատիպեր ստեղծողները արժեքները ներմուծում են անմիջապես կոդի մեջ, որտեղ RGB ձևաչափը համապատասխանում է գրաֆիկական գրադարանների մեծ մասին։ Ուսուցիչները կողք կողքի են դնում երեք ձևաչափերը՝ ցույց տալու համար, որ մեկ գույնը կարող է գրվել որպես կոդ, որպես երեք ալիք կամ որպես դիրք գունային անվի վրա, և թե ինչու է HSL տարբերակը կլորացված։ Իսկ յուրաքանչյուր ոք, ով ցուցակում նշումներ է անում, պիտակավորում կամ գունավորում է տարրերը, ստանում է հստակ տարբերվող գույներ՝ առանց երկար մտածելու, թե որ մեկն ընտրել։

Արժե իմանալ նաև մի քանի իրական սահմանափակումների մասին։ Սա գեներատոր է, այլ ոչ թե գունապնակի գործիք. այն չի կառուցում գունային ներդաշնակություններ և չի պահում մեկ գույնը ֆիքսված, մինչ մյուսները փոխվում են, իսկ ավելի նեղ միջակայքը տալիս է միևնույն տեսակի գույներ, այլ ոչ թե միասին համադրվելու համար ընտրված գույներ։ Կոնտրաստի նշանը համեմատում է միայն սև և սպիտակ տեքստը։ Էջն աշխատում է էկրանի ցուցադրած sRGB գույներով՝ HEX, RGB և HSL, առանց թափանցիկության, և չի աջակցում CMYK, Pantone, OKLCH կամ անվանված CSS գույներ. տպագրության համար համապատասխանեցրեք գույնը տպագրության նախապատրաստման փուլում, այլ ոչ թե վստահեք էկրանի կոդին։ Միևնույն կոդը կարող է մի փոքր այլ տեսք ունենալ տարբեր էկրաններին, քանի որ էկրանները միատեսակ չափաբերված չեն։ HSL արժեքները կլորացված են, ինչպես նկարագրված է վերևում, և քանի դեռ նշված չէ «Առանց կրկնության» տարբերակը, խումբը չի ստուգվում կրկնությունների համար։ Այն, ինչ էջը երաշխավորում է, ավելի հստակ է և ճշգրիտ. դրա բոլոր 16,777,216 գույներից յուրաքանչյուրը, կամ ձեր սահմանած միջակայքի յուրաքանչյուր գույն, ունի նույն հնարավորությունը յուրաքանչյուր սեղմման ժամանակ, որն ընտրվում է ձեր դիտարկիչի կրիպտոգրաֆիկ աղբյուրից և երբեք ոչ մի տեղ չի ուղարկվում։