Түс араластырғыш

Екі түсті таңдаңыз, қатынас жүгірткісін сүйреңіз және қоспаның дәл HEX және RGB кодын алыңыз — сонымен қатар 0%-дан 100%-ға дейінгі әр қадамды көрсететін толық градиент жолағын алыңыз, осылайша сізге қажет дәл орта нүктені таңдай аласыз. Бренд түстерінің екеуінің арасында табиғи түрде орналасатын hover немесе акцент реңкін табу үшін пайдалы.

Бұл құрал не істейді?

Түс араластырғыш таңдалған қатынаста екі түстің қызыл, жасыл және көк арналары арасында сызықтық интерполяция жасайды — бұл градиенттің ішкі есептеу тәсілімен бірдей математика. 0%-да нәтиже A түсі, 100%-да B түсі, ал 50%-да әрбір RGB арнасының арифметикалық ортасы болады.

Бұл физикалық бояуды араластырудан (ол субтрактивті және пигментке байланысты) өзгеше, әрі HSL кеңістігінде орташалаумен де бірдей емес — сызықтық RGB интерполяциясы CSS градиенттері, дизайн құралдары және «екі түстің арасындағы түс» құралдарының көбі қолданатын әдіс, сондықтан нәтиже сол екі түстің арасындағы браузер градиентінде көретініңізге сәйкес келеді.

Оны неге пайдалану керек?

Кездейсоқ түзетуді болжаудың орнына негізгі түсіңіз бен акцент арасында орналасатын табиғи hover немесе белсенді күй түсін табыңыз.
Градиент скриншотын көзбен бағалаудың орнына кез келген қатынастағы дәл HEX кодын көріңіз.
11 қадамдық сатылы шкала бір рет басу арқылы бір түстен екінші түске толық палитра береді, деректерді визуализациялау немесе көп сатылы градиент үшін пайдалы.
HEX кодын лезде көшіру үшін кез келген қадамды басыңыз.
Тегін, лезде және толығымен жергілікті — жүктеу де, тіркелгі де қажет емес.

Оны қалай пайдалану керек

Түс таңдағыштар арқылы немесе HEX кодын теру арқылы A түсі мен B түсін таңдаңыз.
B түсінің қанша мөлшерін араластыратынын белгілеу үшін қатынас жүгірткісін сүйреңіз.
Үлгінің үстіндегі нәтижелік HEX және RGB мәндерін оқыңыз.
Төмендегі 11 қадамдық шкаладағы кез келген үлгіні оның HEX кодын көшіру үшін басыңыз.

Мысал

Енгізу

A түсі #3B82F6 (көк), B түсі #F59E0B (сарғыш), қатынас 50%

Нәтиже

#9B9E7D — rgb(155, 158, 125)

Дәл 50%-да әрбір RGB арнасы екі кіріс түстің арналарының арифметикалық ортасы болады.

Жиі қойылатын сұрақтар

Неге бұл нақты бояуды араластырғанда алатынымнан өзгеше?

Бояуды араластыру субтрактивті процесс (пигменттер жарықты жұтады) және қатысатын нақты пигменттерге байланысты — мысалы, көк пен сары бояуды араластыру жасыл түс береді. Бұл құрал жарықты (RGB арналарын) аддитивті/сызықтық түрде араластырады, бұл экрандар, CSS градиенттері және цифрлық дизайн құралдарының көбі түстерді араластыратын тәсіл. Екі жүйе әдейі шынымен әр түрлі нәтижелер береді, қате салдарынан емес.

Бұл екі түс арасындағы CSS linear-gradient-пен бірдей ме?

Иә — CSS linear-gradient(colorA, colorB) RGB арналарын дәл осы құрал сияқты интерполяциялайды, сондықтан сол градиенттің ортасында көретін түс осы жердегі 50% нәтижесіне сәйкес келеді.

Неге араласқан түс кейде лай немесе сұр болып көрінеді?

Екі қаныққан, бірақ бір-бірінен өте өзгеше реңкті (мысалы, көк пен қызғылт сары, олар бір-біріне жуық толықтырушы түстер) RGB кеңістігінде араластыру көбіне төмен қанықтылықты, сұр-қоңыр орта нүкте береді — бұл RGB интерполяциясының нақты қасиеті, ақау емес. Егжей-тегжейлі қоспа қаласаңыз, түс шеңберінде бір-біріне жақынырақ орналасқан түстерді араластырып көріңіз немесе реңкті реттеп, қанықтылықты жоғары ұстап, HSL кеңістігінде араластырыңыз (бұл тікелей RGB араластырғыш жасамайтын нәрсе).

Бір уақытта екіден көп түсті араластыра аламын ба?

Бір қадамда жоқ — құрал дәл екі түсті араластырады. Үшеуін біріктіру үшін алдымен екеуін таңдалған қатынаста араластырыңыз, нәтижені көшіріп, оны үшінші түсіңізге қарсы жаңа A түсі ретінде қойыңыз. Мұны кезең-кезеңімен жасау сізге салмақтандыру үстінен бақылау береді, оны бір реттік үш жақты орташалау бермес еді.

Мен мұны немесе Түс реңктерін генераторын пайдалануым керек пе?

Егер сізге екі түрлі түстің арасында орналасатын түс керек болса — айталық, бренд көгіңіз бен сарғыш акцент арасындағы өтпелі реңк — осы араластырғышты пайдаланыңыз. Егер сізге бір түстің ашығырақ және қоюырақ нұсқалары керек болса (hover күйлері, фондар, Tailwind стиліндегі 50-900 шкаласы), оның орнына Түс реңктерін генераторын пайдаланыңыз: ол реңк пен қанықтылықты тұрақты ұстап, тек жарықтықты өзгертеді, сондықтан әрбір нәтиже сол түс отбасында анық қалады.

Кіріс өрістеріне қандай түс форматтарын тере аламын?

Мәтін өрістері 6 таңбалы HEX кодтарын, алдыңғы # белгісімен немесе онсыз қабылдайды (мысалы, 3B82F6 немесе #3B82F6). Қысқартылған 3 таңбалы hex, rgb() жазуы және CSS түс атаулары онда өңделмейді — бірақ әр өрістің қасындағы кірістірілген түс таңдағышпен кез келген түсті көзбен таңдай аласыз, ал HEX өрісі сәйкесінше жаңарады.