Макет, диаграмма немесе бос кенеп үшін түс керек пе, әрі оны әдеттің күшімен таңдағыңыз келмей ме? Бұл тегін кездейсоқ түстер генераторы экран көрсете алатын толық 24-bit ауқымнан түс алады және әрқайсысын кодының жанындағы түс үлгісінде көрсетеді. «Саны» өрісінде қанша түс керектігін таңдаңыз — 1-ден 50-ге дейін кез келген сан — қажетті пішімдерді белгілеп, «Жасау» түймесін басыңыз. Бет HEX пішіміндегі бір түспен ашылады, сондықтан алғашқы нәтижеге бір рет басу жеткілікті. «HEX коды» құсбелгісі басынан бері қойылған, оның жанында «RGB коды» мен «HSL коды» тұр, ал үшеуінің кез келген тіркесімін бір уақытта қосуға болады. «Жасау» түймесінің жанындағы тісті дөңгелек түймесі «Кеңейтілген опциялар» бөлімін ашады, онда түстерді бір түрмен немесе ауқыммен шектеуге, қайталануларды болдырмауға және HEX жазылу түрін өзгертуге болады.
Әр түстің кездейсоқтығы Math.random() сияқты жалған кездейсоқ функциямен емес, операциялық жүйенің өз кездейсоқтық бастауынан криптографиялық сенімді кездейсоқ байттарды беретін браузердің Web Crypto API (crypto.getRandomValues) көмегімен жасалады. Экрандағы түс үш арнадан — қызыл, жасыл және көк — тұрады, олардың әрқайсысы 0-ден 255-ке дейінгі бүтін сан, ал бір кездейсоқ байт дәл 256 мәннің бірін қабылдай алады. Сондықтан әрбір арна ешқандай аралық қадамдарсыз бір ғана байт болып табылады: қалдық алынбайды және ешқандай түрлендіру қадамы белгілі бір реңкке басымдық бермейді. Бұл 24-bit түс кеңістігіндегі бет жасай алатын барлық 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%-ы жарқын және қанық болып келеді, олардағы HSL қанықтығы кемінде 70% және ашықтығы 35% бен 65% аралығында болады. Қанықтығы 20%-дан төмен сұрға жақын түстер шамамен 4%-ды құрайды, ал өте күңгірт түстер (ашықтығы 20%-дан төмен) және өте ашық түстер (80%-дан жоғары) әрқайсысы шамамен 3%-дан келеді. Сондықтан «Барлық түстер» параметріндегі он түстік топтама әдетте бірнеше қанық түсті қамтиды және пастель немесе қою сұр түс сирек кездеседі. Белгілі бір түр қажет болғанда, оны «Түс түрі» мәзірінен таңдаңыз: «Жарқын» опциясы дәл сол қанық топты сақтайды, ал «Пастель», «Күңгірт», «Бәсең» және «Сұр реңктер» өз топтары үшін солай істейді. «Таңдамалы» режимі «Реңк», «Қанықтық» және «Ашықтық» бойынша жеке ауқымдарды орнатуға мүмкіндік береді, ал реңк ауқымы 0 мәнінен өте алады, сондықтан 330 бен 30 аралығы қызыл түстерді береді. Ауқым бетте көрсетілген HSL коды бойынша тексеріледі, сондықтан ешбір код одан тыс қалмайды, ал егер онда «Саны» өрісіне тым аз түс болса, бет түстерді қайталаудың орнына ауқымды кеңейтуді сұрайды. Басқаша жағдайда қайталанулар сирек те болса мүмкін: оларды болдырмау үшін «Қайталанбайтын» құсбелгісін қойыңыз; онсыз толық ауқымнан алынған 50 түстің екеуі бірдей болып шығу ықтималдығы шамамен 13 700-ден 1-ді құрайды.
Кездейсоқ түс жиі фон ретінде қажет болады, бұл түс үлгісі көзбен қарай отырып жауап бере алмайтын бір сұрақты тудырады: оның үстіндегі мәтін анық оқыла ма? Веб-қолжетімділік жөніндегі 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 түстерімен жұмыс істейді — мөлдірліксіз және CMYK, Pantone, OKLCH немесе атаулы CSS түстерінсіз тек HEX, RGB және HSL; басып шығару үшін экрандағы кодқа сенбей, түсті баспа үдерісінде сәйкестендіріңіз. Сондай-ақ бірдей код дисплейлер біркелкі калибрленбегендіктен, әртүрлі экрандарда сәл өзгеше көрінуі мүмкін. HSL мәндері жоғарыда сипатталғандай дөңгелектенеді және «Қайталанбайтын» құсбелгісі қойылмаса, топтама қайталануларға тексерілмейді. Беттің нақты кепілдік беретіні — оның барлық 16 777 216 түсінің немесе сіз орнатқан ауқымдағы әрбір түстің әр басқан сайын бірдей мүмкіндікке ие болуы, олардың браузердің криптографиялық бастауынан алынуы және ешқайда жіберілмеуі.