Веб түс палитралары

Желе түстөр палитралары деген эмне?

Түстөр веб-дизайнерлер жана графикалык дизайнерлер үчүн абдан маанилүү. Дизайнерлер күнүмдүк жашоодо көк, кызыл жана жашыл деп сүрөттөгөн түстөрдү #fff002, #426215 сыяктуу коддор менен сүрөттөшөт. Кандай гана коддоо долбоорун ишке ашырбаңыз, сиз качандыр бир убакта түстөр менен иштей баштайсыз. Бул, өзгөчө, эгер сиз HTMLди колдонуп коддоону үйрөнсөңүз, көптөгөн адамдар веб-баракчаларды долбоорлоодо кылгандай пайдалуу болот.

Hex коду түстөр менен эмнени билдирет?

Hex код үч маанини айкалыштыруу менен RGB форматында түстү көрсөтүүнүн бир жолу. Бул түс коддору веб-дизайн үчүн HTMLдин ажырагыс бөлүгү жана түс форматтарын санарип көрсөтүүнүн маанилүү жолу бойдон калууда.

Hex түс коддору фунт белгиси же хэштег (#) менен башталат, андан кийин алты тамга же сандар. Биринчи эки тамга/сан кызылга, кийинки экөө жашылга жана акыркы экөө көк түскө туура келет. Түс баалуулуктары 00 жана FF ортосундагы маанилерде аныкталат.

Сандар маани 1-9 болгондо колдонулат. Маани 9дан чоң болгондо тамгалар колдонулат. Мисалы:

• A = 10
• B = 11
• C = 12
• D = 13
• E = 14
• F = 15

Hex түс коддору жана RGB эквиваленттери

Эң кеңири таралган алты бурчтуу түс коддорун жаттап алуу, ошол так түстөрдү колдонгуңуз келгенде эле эмес, он алтылык түс кодун көргөндө башка түстөр кандай болорун жакшыраак алдын ала айтууга жардам берет.

• Кызыл = #FF0000 = RGB (255, 0, 0)
• Жашыл = #008000 = RGB (1, 128, 0)v
• Көк = #0000FF = RGB (0, 0, 255)
• Ак = #FFFFFF = RGB (255,255,255)
• Пил сөөгү = #FFFFF0 = RGB (255, 255, 240)
• Кара = #000000 = RGB (0, 0, 0)
• Боз = #808080 = RGB (128, 128, 128)
• Күмүш = #C0C0C0 = RGB (192, 192, 192)
• Сары = #FFFF00 = RGB (255, 255, 0)
• Кызгылт көк = #800080 = RGB (128, 0, 128)
• Кызгылт сары = #FFA500 = RGB (255, 165, 0)
• Бургундия = #800000 = RGB (128, 0, 0)
• Фуксия = #FF00FF = RGB (255, 0, 255)
• Лайм = #00FF00 = RGB (0, 255, 0)
• Aqua = #00FFFF = RGB (0, 255, 255)
• Көк = #008080 = RGB (0, 128, 128)
• зайтун = #808000 = RGB (128, 128, 0)
• Кочкул көк = #000080 = RGB (0, 0, 128)

Эмне үчүн веб-сайттын түстөрү маанилүү?

Сиз түстөр сизге таасир этпейт деп ойлошуңуз мүмкүн, бирок изилдөөгө ылайык, адамдардын 85% түс алар сатып алган буюмга чоң таасир этет дешет. Ал ошондой эле кээ бир компаниялар баскычтарынын түсүн өзгөрткөндө, алардын конверсияларынын кескин көбөйүп же азайгандыгын байкашканын айтат.

Мисалы, Beamax проекциялык экрандарды чыгарган компания көк шилтемелерге салыштырмалуу кызыл шилтемелерди чыкылдатуулардын 53,1% га көбөйгөнүн байкаган.

Түстөр чыкылдатууга гана эмес, брендди таанууга да чоң таасирин тийгизет. Түстөрдүн психикалык таасири боюнча жүргүзүлгөн изилдөө түстөр бренддин таанылышын орто эсеп менен 80% га жогорулатат. Мисалы, сиз Кока-Кола жөнүндө ойлогондо, балким, жандуу кызыл банкаларды элестетесиз.

Вебсайттар үчүн түс схемасын кантип тандоо керек?

Веб-сайтыңызда же веб-тиркемеңизде кайсы түстөрдү тандоо керектиги жөнүндө чечим кабыл алуу үчүн, адегенде сиз эмнени сатып жатканыңызды жакшы түшүнүшүңүз керек. Мисалы, эгер сиз жогорку сапаттагы, жогорку деңгээлдеги сүрөткө жетүү үчүн аракет кылып жатсаңыз, анда сиз тандаган түс - кызгылт көк. Бирок, эгер сиз кеңири аудиторияга жетүүнү кааласаңыз, көк; Бул ден соолук же каржы сыяктуу сезимтал темаларга ылайыктуу, ишендирүүчү жана жумшак түс.

Жогорудагы мисалдар көптөгөн изилдөөлөр менен далилденген. Бирок веб-сайтыңыз үчүн тандаган түс дизайныңыздын татаалдыгына жана түстөрдүн айкалыштарынын түрлөрүнө жараша болот. Мисалы, эгер сиз монохромдуу веб-дизайн палитрасын колдонуп жатсаңыз, экранда жетиштүү түрдүү алуу үчүн сизге ошол түстүн жети же андан көп түсү керек болушу мүмкүн. Сиз сайтыңыздын айрым бөлүктөрүнө түстөрдү орнотуу керек, мисалы, текст, фон, шилтемелер, курсордун түстөрү, CTA баскычтары жана аталыштар.

Эми "Веб-сайттар жана веб-тиркемелер үчүн түс схемасын кантип тандоо керек?" Келгиле, аны этап-этабы менен карап көрөлү:

1. Негизги түстөрүңүздү тандаңыз.

Негизги түстү тандоонун эң жакшы жолу - бул сиздин өнүмүңүздүн же кызматыңыздын маанайына туура келген түстөрдү карап чыгуу.

Төмөндө биз сиз үчүн кээ бир мисалдарды келтирдик:

• Кызыл: Бул толкундануу же бакыт дегенди билдирет.
• Orange: Бул достук, кызыктуу убакытты билдирет.
• Сары түс оптимизмди жана бакытты билдирет.
• Жашыл: Бул сергектик жана жаратылышты билдирет.
• Көк: ишенимдүүлүктү жана кепилдикти билдирет.
• Кызгылт көк: сапат тарыхы менен айырмаланган брендди билдирет.
• Браун: Бул ар бир адам колдоно турган ишенимдүү продукт дегенди билдирет.
• Кара түс люкс же көрктүү дегенди билдирет.
• Ак: стилдүү, колдонуучуга ыңгайлуу өнүмдөрдү билдирет.

2. Кошумча түстөрүңүздү тандаңыз.

Негизги түсүңүздү толуктаган бир же эки кошумча түстү тандаңыз. Бул сиздин негизги түсүңүздү "укмуштуу" кылган түстөр болушу керек.

3. Фондун түсүн тандаңыз.

Негизги түсүңүзгө караганда азыраак "агрессивдүү" фон түсүн тандаңыз.

4. Шрифт түсүн тандаңыз.

Вебсайтыңыздагы тексттин түсүн тандаңыз. Катуу кара шрифт сейрек кездешет жана сунушталбайт.

Дизайнерлер үчүн мыкты веб-түс палитралары

Эгерде сиз Softmedal веб-түс палитраларынын коллекциясында издеп жаткан түстү таба албасаңыз, төмөндөгү альтернативалуу түс сайттарын карап көрсөңүз болот:

Түс тандоо узак процесс жана көп учурда туура түстөрдү табуу үчүн бир топ тактоолорду талап кылат. Бул учурда, сиз нөлдөн баштап тиешелүү түс схемаларын түзгөн 100% бекер веб тиркемелерди колдонуу менен убакытты үнөмдөй аласыз.

1. Палеттон

Палеттон бардык веб-дизайнерлер билиши керек болгон веб-тиркеме. Жөн гана урук түсүн киргизиңиз, калганын колдонмо сиз үчүн кылат. Палеттон - бул дизайн жөнүндө эч нерсе билбегендер жана үйрөнчүктөр үчүн ишенимдүү тандоо жана сонун веб-тиркеме.

2. Color Safe

Эгерде WCAG сиздин дизайн процессиңизде кандайдыр бир тынчсыздануу жаратса, Color Safe колдонуу үчүн эң жакшы курал. Бул веб тиркеме менен сиз WCAG көрсөтмөлөрүнө ылайык эң сонун айкалышкан жана бай контрастты сунуш кылган түс схемаларын түзө аласыз.

Color Safe веб-тиркемесин колдонуу менен, сиз сайтыңыздын WCAG көрсөтмөлөрүнө жооп берерин жана бардыгы үчүн толук жеткиликтүү экендигине кепилдик бересиз.

3. Adobe Color CC

Бул коомдук колдонуу үчүн түзүлгөн акысыз Adobe куралдарынын бири. Бул ар бир адам нөлдөн баштап түс схемаларын түзө турган татаал веб-тиркеме. Бул сиздин муктаждыктарыңызга ылайыктуу көптөгөн түстүү моделдердин ичинен тандоого мүмкүндүк берет. Интерфейс башында бир аз түшүнүксүз сезилиши мүмкүн, бирок ага көнүп калгандан кийин кооз түс тандоодо эч кандай көйгөй болбойт.

4. Атмосфера

Ambiance, бекер веб тиркемеси, вебдеги башка түстүү сайттардан алдын ала жасалган веб түс палитраларын сунуштайт. Бул салттуу веб-тиркеме сыяктуу иштейт, анда сиз профилиңизге түстөрдү сактап, нөлдөн баштап өзүңүздүн схемаларыңызды түзө аласыз. Бардык бул веб-түс палитралары Colorloversтен келет. Ambiance интерфейси серептөөнү жеңилдетет жана UI дизайны үчүн түстөрдүн өз ара аракетине көбүрөөк көңүл бурат.

5. 0to255

0to255 так түс схемасынын генератору эмес, бирок ал учурдагы түс схемаларын так тууралоого жардам берет. Желе колдонмосу сизге ар кандай түстөрдү көрсөтөт, андыктан түстөрдү заматта аралаштырып, дал келтире аласыз.

Колдонууга жарактуу түс схемасын түзүү кыйын болсо, анда жогорудагы колдонмолордун айрымдарын карап чыксаңыз болот.

Мыкты веб-түс палитралары

Төмөнкү сайттар чоң эффект үчүн ар кандай веб-түс палитраларын колдонушат. Алар туудурган эмоциялар жана билдирүүлөр үчүн кылдаттык менен тандалып алынат.

1. Одопод

Odopod монотондуу түс палитрасы менен иштелип чыккан, бирок анын башкы бетинде градиент менен кызыксыз көрүнбөөнү көздөгөн. Чоң типография чоң контрастты сунуш кылат. Коноктор кайсы жерди баскысы келгени түшүнүктүү.

2. Tori's Eye

Tori's Eye монохромдуу түс схемасынын сонун үлгүсү. Бул жерде жашыл көлөкөлөрдүн айланасында жайгашкан жөнөкөй, бирок күчтүү түс палитрасынын эффекттери көрүнүп турат. Бул түс схемасын алып салуу оңой, анткени бир түстүн бир өңү дээрлик дайыма ошол эле түстөгү башка көлөкө менен иштейт.

3. Сыр аман калуу комплекти

Кызыл - веб-сайттын түс палитрасы үчүн абдан популярдуу түс. Ал ар тараптуу кылып, сезимдердин бай аралашмасын бере алат. Cheese Survival Kit веб-сайтында көрүп тургандай, ал кичинекей дозаларда колдонулганда өзгөчө күчтүү. Кызыл көбүрөөк нейтралдуу түстөр менен жумшартылган, ал эми көк CTA жана бизнес коноктордун көңүлүн бургусу келген башка аймактарда жардам берет.

4. Ahrefs

Ahrefs түс палитрасын эркин колдонгон веб-сайттын мисалы. Кочкул көк басымдуу түс катары иштейт, бирок сайттын бардык жеринде вариациялар бар. Ошол эле кызгылт сары, кызгылт жана бирюза түстөрүнө тиешелүү.

Түстөр жөнүндө эң көп берилүүчү суроолор

1. Веб-сайт үчүн эң жакшы түс кандай?

Көк, албетте, эң коопсуз тандоо, анткени ал 35% менен эң популярдуу түс. Бирок, эгерде сиздин атаандаштарыңыз көктү колдонсо, сунушуңузду жана брендиңизди "айырмалоо" мааниси бар. Бирок конокторду капа кылбооңуз керек.

2. Вебсайт канча түстө болушу керек?

Бренддердин 51%ы монохромдуу логотиптерге ээ, 39%ы эки түстү колдонушат, ал эми компаниялардын 19%ы гана толук түстүү логотиптерди жактырарын карап көрөлү. Бул жерден сиз 1, 2 жана 3 түстүү веб-сайттар асан-үсөн түстөрү менен веб-сайтты түзүүгө аракет кылганга караганда көбүрөөк мааниге ээ экенин көрө аласыз. Бирок, Microsoft жана Google сыяктуу бренддер көп түстөр менен иштөөнүн артыкчылыгына ишенишет, анткени алар дизайндарында кеминде 4 катуу түстү колдонушат.

3. Мен түстөрдү кайда колдонушум керек?

Көздүн жоосун алган түстөрдү үнөмдүү колдонуу керек, антпесе эффектин жоготот. Бул эффект "Азыр сатып алуу" баскычтары сыяктуу конверсия пункттарында болушу керек.