Вэб өнгөт палитр

Вэб өнгөт палитр гэж юу вэ?

Вэб дизайнерууд болон график дизайнеруудад өнгө маш чухал байдаг. Загвар зохион бүтээгчид бидний өдөр тутмын амьдралдаа цэнхэр, улаан, ногоон гэж тодорхойлдог өнгийг #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)
• Burgundy = #800000 = RGB (128, 0, 0)
• Fuchsia = #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%-иар нэмэгдүүлдэг болохыг тогтоожээ. Жишээлбэл, та Coca-Cola-ийн тухай бодохдоо эрч хүчтэй улаан лаазыг төсөөлөх байх.

Вэбсайтуудын өнгөний схемийг хэрхэн сонгох вэ?

Вэбсайт эсвэл вэб програм дээрээ ямар өнгийг сонгохоо шийдэхийн тулд эхлээд юу зарж байгаагаа сайн ойлгох хэрэгтэй. Жишээлбэл, хэрэв та илүү өндөр чанартай, өндөр чанартай зураг авахыг хичээж байгаа бол таны сонгох ёстой өнгө нь нил ягаан юм. Гэсэн хэдий ч, хэрэв та илүү өргөн хүрээний үзэгчдэд хүрэхийг хүсч байвал цэнхэр; Энэ нь эрүүл мэнд, санхүү гэх мэт эмзэг сэдвүүдэд тохиромжтой, тайвшруулах, зөөлөн өнгө юм.

Дээрх жишээнүүд олон судалгаагаар нотлогдсон. Гэхдээ таны вэбсайтад сонгох өнгө нь таны дизайны нарийн төвөгтэй байдал, өнгөний хослолын төрлөөс хамаарна. Жишээлбэл, хэрэв та монохром вэб дизайны палитр ашиглаж байгаа бол дэлгэцэн дээр хангалттай олон янз байдлыг харуулахын тулд танд долоон буюу түүнээс дээш өнгийн сүүдэр хэрэгтэй болно. Та текст, дэвсгэр, холбоос, хулганын өнгө, CTA товчлуур, толгой хэсэг гэх мэт сайтынхаа тодорхой хэсгүүдийн өнгийг тохируулах хэрэгтэй.

Одоо "Вэбсайт болон вэб програмын өнгөний схемийг хэрхэн сонгох вэ?" Үүнийг алхам алхмаар харцгаая:

1. Үндсэн өнгөө сонго.

Үндсэн өнгө сонгох хамгийн сайн арга бол таны бүтээгдэхүүн, үйлчилгээний сэтгэл санааны байдалд тохирсон өнгийг судлах явдал юм.

Доор бид танд зориулж зарим жишээг жагсаав.

• Улаан: Энэ нь сэтгэлийн хөөрөл, аз жаргал гэсэн үг.
• Улбар шар: Энэ нь нөхөрсөг, хөгжилтэй цагийг илэрхийлдэг.
• Шар өнгө нь өөдрөг үзэл, аз жаргал гэсэн утгатай.
• Ногоон: Энэ нь шинэлэг байдал, байгаль гэсэн үг.
• Цэнхэр: найдвартай байдал, баталгааг илэрхийлдэг.
• Нил ягаан: Чанарын түүхтэй нэр хүндтэй брэндийг төлөөлдөг.
• Браун: Хүн болгон хэрэглэж болох найдвартай бүтээгдэхүүн гэсэн үг.
• Хар өнгө нь тансаг, дэгжин гэсэн утгатай.
• Цагаан: Загварлаг, хэрэглэгчдэд ээлтэй бүтээгдэхүүнийг хэлнэ.

2. Нэмэлт өнгө сонгох.

Таны үндсэн өнгөнд тохирсон нэг эсвэл хоёр нэмэлт өнгийг сонго. Эдгээр нь таны үндсэн өнгийг "гайхалтай" болгодог өнгө байх ёстой.

3. Дэвсгэр өнгө сонгох.

Үндсэн өнгөөөсөө бага "түрэмгий" дэвсгэр өнгө сонго.

4. Үсгийн өнгийг сонгоно уу.

Өөрийн вэбсайт дээрх текстийн өнгө сонгох. Хатуу хар фонт ховор бөгөөд хэрэглэхийг зөвлөдөггүй гэдгийг анхаарна уу.

Дизайнеруудад зориулсан шилдэг вэб өнгөт палитр

Хэрэв та Softmedal вэб өнгөт палитр цуглуулгаас хайж буй өнгөө олж чадахгүй бол доорх өнгөний өөр сайтуудыг үзэж болно.

Өнгө сонгох нь урт процесс бөгөөд ихэвчлэн зөв өнгийг олохын тулд маш нарийн тохируулга шаарддаг. Энэ үед та холбогдох өнгөний схемийг эхнээс нь бий болгодог 100% үнэгүй вэб программыг ашигласнаар цаг хэмнэх боломжтой.

1. Палеттон

Палеттон бол бүх вэб дизайнеруудын мэдэх ёстой вэб програм юм. Зүгээр л үрийн өнгө оруулна уу, үлдсэнийг нь апп өөрөө хийнэ. Палеттон бол дизайны талаар юу ч мэдэхгүй хүмүүс болон эхлэгчдэд зориулсан найдвартай сонголт бөгөөд гайхалтай вэб програм юм.

2. Өнгөт аюулгүй

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

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

3. Adobe Color CC

Энэ нь олон нийтийн хэрэглээнд зориулж бүтээсэн Adobe-ийн үнэгүй хэрэгслүүдийн нэг юм. Энэ бол хэн ч эхнээс нь өнгөний схем үүсгэж болох нарийн боловсруулсан вэб програм юм. Энэ нь олон төрлийн өнгөт загвараас таны хэрэгцээнд хамгийн сайн тохирохыг сонгох боломжийг танд олгоно. Интерфэйс нь эхэндээ жаахан ойлгомжгүй мэт санагдаж болох ч та үүнд дассан бол сайхан өнгө сонгоход асуудал гарахгүй.

4. Уур амьсгал

Үнэгүй вэб програм Ambiance нь вэб дээрх бусад өнгөт сайтуудаас урьдчилан бэлтгэсэн вэб өнгөт палитруудыг санал болгодог. Энэ нь уламжлалт вэб програм шиг ажилладаг бөгөөд та өөрийн профайлд өнгө хадгалж, өөрийн схемийг эхнээс нь үүсгэж болно. Эдгээр бүх вэб өнгөт палитрууд нь Colorlovers-ээс ирдэг. Ambiance интерфэйс нь хайлтыг хөнгөвчлөх ба UI дизайны өнгөний харилцан үйлчлэлд илүү анхаарал хандуулдаг.

5. 0-ээс 255 хүртэл

0to255 нь яг өнгөний схем үүсгэгч биш боловч одоо байгаа өнгөний схемийг нарийн тааруулахад тусална. Вэб програм нь танд өөр өөр өнгийг харуулдаг тул та өнгийг шууд хольж, тааруулах боломжтой.

Хэрэв танд ашиглах боломжтой өнгөний схемийг бий болгоход хэцүү байвал дээрх програмуудын заримыг шалгаж болно.

Шилдэг вэб өнгөт палитр

Дараах сайтууд нь маш сайн нөлөө үзүүлэхийн тулд олон төрлийн вэб өнгөт палитрыг ашигладаг. Тэднийг өдөөж буй сэтгэл хөдлөл, илэрхийлэх сэтгэл хөдлөлийн хувьд анхааралтай сонгож авдаг.

1. Одопод

Odopod нь нэгэн хэвийн өнгөний палитраар бүтээгдсэн боловч нүүр хуудсан дээрээ градиентээр уйтгартай харагдахгүй байхыг зорьсон. Том хэвлэх нь гайхалтай ялгаатай байдлыг санал болгодог. Зочид хаана товшихыг хүсч байгаа нь тодорхой байна.

2. Торигийн нүд

Торигийн нүд нь монохром өнгөний схемийн гайхалтай жишээ юм. Энд ногоон өнгийн сүүдэрт төвлөрсөн энгийн хэрнээ хүчирхэг өнгөт палитрын үр нөлөөг харж болно. Нэг өнгөний нэг сүүдэр нь ижил өнгийн өөр сүүдэртэй бараг үргэлж ажиллах тул энэ өнгөний схемийг авахад хялбар байдаг.

3. Бяслагны амьд үлдэх хэрэгсэл

Улаан бол вэбсайтын өнгөт палитрт маш их алдартай өнгө юм. Энэ нь сэтгэл хөдлөлийн баялаг хольцыг илэрхийлж чаддаг тул олон талт болгодог. Cheese Survival Kit-ийн вэбсайтаас харж байгаагаар энэ нь ялангуяа бага тунгаар хэрэглэхэд маш хүчтэй байдаг. Улаан өнгө нь илүү төвийг сахисан өнгөөр ​​зөөлрүүлж, цэнхэр нь CTA болон бизнес нь зочдын анхаарлыг татахыг хүсдэг бусад газруудад тусалдаг.

4. Ахрефс

Ahrefs бол өнгөт палитрыг чөлөөтэй ашигладаг вэбсайтын жишээ юм. Хар хөх нь зонхилох өнгөний үүрэг гүйцэтгэдэг боловч сайтын бүх хэсэгт өөрчлөлтүүд байдаг. Улбар шар, ягаан, оюу өнгөний хувьд ч мөн адил.

Өнгөний талаар хамгийн их асуудаг асуултууд

1. Вэб сайтад ямар өнгө хамгийн тохиромжтой вэ?

Цэнхэр бол 35% -тай хамгийн алдартай өнгө тул хамгийн найдвартай сонголт юм. Гэсэн хэдий ч, хэрэв таны өрсөлдөгчид бүгд цэнхэр өнгө хэрэглэж байгаа бол таны санал, брэндийг "ялгах" нь утга учиртай байж магадгүй юм. Гэхдээ та зочдыг дарамтлахгүй байх ёстой.

2. Вэб сайт хэдэн өнгөтэй байх ёстой вэ?

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

3. Би өнгийг хаана хэрэглэх ёстой вэ?

Анхаарал татахуйц өнгө нь бага зэрэг хэрэглэгдэх ёстой, эс тэгвээс тэдгээр нь нөлөөгөө алдах болно. Энэ нөлөө нь "Одоо худалдаж авах" товчлуур гэх мэт хөрвүүлэх цэгүүдэд байх ёстой.