7 quy tắc cho bảng màu trang web

7 quy tắc để tạo lược đồ màu trang webTrong thiết kế thương hiệu và trang web, màu sắc thực sự quan trọng.


Tại sao?

Nghiên cứu cho thấy rằng 62-90% quyết định mua hàng nhanh được thúc đẩy hoàn toàn bởi nhận thức về màu sắc.

Chọn màu sắc trang web phù hợp là những gì làm cho nó đáng nhớ, đáng tin cậy, hấp dẫn và có lợi nhuận. Ấn tượng đầu tiên là mọi thứ.

Khi xây dựng một trang web, bạn nên xem xét cẩn thận những màu sắc để thêm vào bảng màu của bạn và tại sao. Các màu sắc khác nhau sẽ gửi các thông điệp khác nhau đến khách truy cập của bạn, thay đổi sự hiểu biết của họ về trang web của bạn, ngay cả khi nó không có ý định.

Không biết bắt đầu từ đâu? Thực hiện theo các bước sau để tạo sơ đồ màu trang web và tránh mắc lỗi thiết kế lớn nhất.

Một người dùng trung bình có một khoảng chú ý 8 giây. Rằng bạn mất bao lâu để thuyết phục họ tiếp tục duyệt trang web của bạn.

Chọn cách phối màu phù hợp cho thiết kế web của bạn sẽ giúp bạn thu hút người dùng bằng các điểm nhấn màu sắc, các yếu tố điều hướng sắc nét và thương hiệu đáng nhớ.

Vì vậy, đây là nơi bắt đầu đào

Contents

7 bước để tạo lược đồ màu trang web của riêng bạn

1. Tìm màu chính của bạn

Có thể bạn đã chọn màu chính. Nếu bạn có một logo hoặc bất kỳ thương hiệu hiện có nào, thì có lẽ một màu chính mà thống trị các thiết kế. Đây là màu mà thương hiệu của bạn sẽ được liên kết với – màu thương hiệu chính của bạn.

Nếu bạn không ở đâu gần quyết định cuối cùng, Làm bài kiểm tra này để tìm ra các lựa chọn của bạn, thực hiện nghiên cứu thị trường và sử dụng các trang web như Rê bóng hoặc là Hành vi cho một chút cảm hứng.

Bạn cũng có thể duyệt danh sách các bảng mã hex này của một số thương hiệu nổi tiếng nhất thế giới để mở rộng nhóm ý tưởng của bạn.

Khi bạn bắt gặp một thiết kế hoặc hình ảnh đặc biệt bắt mắt, đừng ngại sử dụng bộ chọn màu để lấy mã hex và thêm nó vào danh sách yêu thích của bạn. ColorZilla dường như là một công cụ phổ biến Và nếu bạn sử dụng Chrome làm trình duyệt chính, hãy xem xét Phần mở rộng trình duyệt Eye Droppper vì nó là một trong những công cụ xếp hạng cao nhất hiện có.

2. Quyết định số lượng màu (Khuyến nghị: 3)

Khi bạn có màu chính đóng đinh xuống, bước tiếp theo là quyết định bạn sẽ thêm bao nhiêu màu khác vào hỗn hợp.

Nó thường được khuyến nghị sử dụng kết hợp ba màu. Một bảng màu ba màu, bao gồm ba màu cách đều nhau quanh bánh xe màu, là điểm khởi đầu tốt. Một bảng màu ba màu có thể khá ấn tượng nếu nó có ba màu rực rỡ chính, vì vậy các nhà thiết kế thường chọn kết hợp các tông màu phụ.

Ngoài ra còn có một quy tắc cũ của nhà thiết kế có thể hữu ích khi áp dụng bảng màu của bạn vào thiết kế trang web. Nó được gọi là Quy tắc 60-30-10.

Quy tắc 60-30-10 khuyên không nên sử dụng số lượng bằng nhau của các màu được chọn, mà nên chia chúng thành tỷ lệ phần trăm và áp dụng tương ứng. Một ví dụ điển hình cho quy tắc này trong thực tế là một bộ đồ nam Man: áo blazer và quần lửng chiếm khoảng 60% diện mạo, chiếc áo chiếm 30% khác, và cà vạt 10%.

3. Sử dụng màu thứ cấp khi cần thiết

Kết hợp màu thứ cấp với màu thương hiệu chính của bạn có thể là một cuộc đấu tranh, nhưng đừng tuyệt vọng! Có rất nhiều công cụ miễn phí thông minh có sẵn trực tuyến sẽ giúp công việc này dễ dàng hơn nhiều. Chẳng hạn, bạn có thể hướng đến Không gian màu, nhập mã hex của màu bạn đã chọn và ngồi lại! (Thêm các công cụ tạo bảng màu dưới đây)

Những gì mà điểm quan trọng của việc thêm màu thứ cấp nào? Đôi khi một thiết kế sẽ đòi hỏi nhiều hơn chỉ một vài màu cơ bản. Điều này đặc biệt đúng đối với các trang web được đóng gói với nội dung và trang đích – sản phẩm, tài liệu hỗ trợ, tài sản có thể tải xuống, v.v..

Mailchimp có một sơ đồ trang web rộng rãi và chu đáo cho tất cả nội dung thương hiệu của nó.
Ví dụ, Mailchimp có một kế hoạch trang web rộng rãi và chu đáo cho tất cả nội dung thương hiệu của nó.

Khả năng phân tách trực quan các tiêu đề, thanh bên, chú thích, nút và các yếu tố khác làm tăng tỷ lệ chuyển đổi và cải thiện trải nghiệm người dùng.

Nếu bạn ở trên chiếc thuyền này, thì bạn nên cân nhắc thêm các sắc thái và sắc độ khác nhau của màu chính thay vì tìm kiếm thêm màu. Đôi khi sự đơn giản là chiến lược tốt nhất.

4. Đừng bỏ quên màu trung tính của bạn (Trắng, Xám đen)

Bạn sẽ cần màu trung tính cho văn bản, để tạo độ tương phản cho các yếu tố quan trọng hoặc làm màu nền.

Chức năng của màu trung tính trong thiết kế web hiện đại rất giống với không gian màu trắng – giúp người dùng nghỉ ngơi và cho phép họ có thời gian để tiêu hóa tốt hơn và ưu tiên thông tin trên trang.

Đó là một ý tưởng tốt để có một màu tối và một màu trung tính cho các trường hợp sử dụng khác nhau. Các màu trung tính phổ biến nhất là trắng, đen và xám. Bạn cũng có thể sử dụng sắc thái của màu chủ đạo của mình làm màu trung tính, mặc dù điều đó có một chút khó khăn hơn để hài hòa.

Hướng dẫn xây dựng thương hiệu Spotify
Ví dụ, Spotify cung cấp bốn phiên bản có thể có của logo, với một hướng dẫn rõ ràng để sử dụng logo màu đen trên nền màu sáng và màu trắng trên nền màu tối.

Nếu bạn bị mắc kẹt vì ý tưởng, hãy quay lại Rê bóng hoặc là Thiết kế và sử dụng tìm kiếm màu sắc để xem những gì người khác đang làm.

5. Thêm màu chính, màu phụ và màu trung tính ở những vị trí sau:

Làm thế nào để bạn đi về việc áp dụng bảng màu trang web? Những màu sắc đi đâu, và tại sao?

  • Màu cơ bản đi đến các điểm nóng của Wikipedia trên trang web của bạn. Bạn nên sử dụng những màu sắc táo bạo, rực rỡ này để thu hút sự chú ý của người dùng và nhắc nhở họ hành động. Các nút CTA, tiêu đề, biểu tượng lợi ích, biểu mẫu tải xuống và thông tin quan trọng khác cần được tô sáng bằng màu chính.
  • Màu thứ cấp được sử dụng để làm nổi bật các thông tin ít quan trọng trên trang web, chẳng hạn như các nút phụ, tiêu đề phụ, các mục menu hoạt động, hình nền hoặc nội dung hỗ trợ như Câu hỏi thường gặp và lời chứng thực.
  • Màu trung tính rất có thể sẽ được sử dụng cho văn bản và nền, nhưng có thể có ích trong các phần đặc biệt nhiều màu sắc của trang web, chỉ để giúp giảm tông màu và tập trung mắt.

6. Trải qua quá trình nhiều lần

Khi bạn cuối cùng đã nghĩ ra bảng màu của mình, hãy thử nghiệm nó trong các tình huống khác nhau. Nó sẽ làm việc trong in ấn? Điều gì nếu bạn quyết định bắt đầu một dòng hàng hóa? Nó có ảnh hưởng đến khách truy cập mà bạn mong đợi không?

Nó tốt nhất để trải qua quá trình này một vài lần và tạo ra một vài bảng màu khác nhau. Nếu không đáp ứng được tất cả các yêu cầu của bạn, bạn sẽ có kế hoạch B.

7. Động não khi cần thiết

Phối màu đẹp không khó để có được khi bạn biết nơi để tìm. Dưới đây, một danh sách các công cụ hữu ích sẽ hướng dẫn bạn tìm kiếm các kết hợp màu sắc trang web tốt nhất.

  1. Không gian màu – trang web này có thể tạo toàn bộ bảng màu dựa trên mã hex của một màu được chọn.
  2. Màu Adobe – công cụ Adobe này được xây dựng xung quanh khái niệm bánh xe màu và cho phép bạn phát triển bất kỳ loại phối màu trang web nào chỉ trong vài cú nhấp chuột. Bạn cũng có thể tải lên một hình ảnh để trích xuất mã màu bằng cách kéo và thả tệp của bạn vào công cụ.
  3. Paletton – Paletton là một công cụ thân thiện với người dùng khác để tạo ra các bảng màu đẹp mà không có bất kỳ kiến ​​thức kỹ thuật hoặc thiết kế nào.
  4. Máy làm mát – công cụ này thực sự tiện dụng để kiểm tra các màu khác nhau phối hợp với nhau như thế nào. Với giao diện kéo và thả, bạn có thể di chuyển các màu xung quanh và xem liệu chúng có va chạm hay hoạt động tốt với nhau không.
  5. ColorSpire – một trình tạo sơ đồ màu trang web khác.
  6. Bánh xe màu Canva từ – công cụ miễn phí này siêu thân thiện với người dùng và có thể giúp bạn hiểu được màu nào trông tuyệt vời với nhau và sự kết hợp màu nào là không. Thêm vào đó, có rất nhiều nội dung giáo dục để trả lời bất kỳ câu hỏi nào bạn có thể có về lý thuyết màu sắc và bánh xe màu.

Câu hỏi thường gặp nhất:

1. Tại sao phối màu trang web quan trọng?

Ảnh hưởng của màu sắc lên não người là một hiện tượng có thật. Cho dù chúng ta có ý thức cảm nhận được tác động của nó hay không, màu sắc có tác động lớn đến cách não bộ xử lý thông tin và thế giới xung quanh chúng ta.

Khoa học đã chỉ ra màu đỏ có thể làm tăng lưu thông, trong khi màu xanh tạo ra hiệu ứng làm dịu.

Chẳng hạn, năm 2000, Giới thiệu về Glasgow chiếu sáng đường phố màu xanh để cải thiện cảnh quan thành phố, điều này vô tình dẫn đến việc giảm đáng kể số lượng tội phạm ở các khu vực được chiếu sáng bởi đèn xanh. Tương tự, Đường sắt Tokyo Yamanote dòng đã chọn cài đặt đèn xanh ở cuối sân ga để giảm số vụ tự tử. Do đó, các vụ tự tử tại các trạm này đã giảm 74%.

Điều đó có thể giải thích tại sao hầu hết các thương hiệu y tế và dược phẩm chọn màu xanh lam làm màu chính.

Một điều rõ ràng: khi được sử dụng một cách chính xác, màu sắc có thể có sức mạnh lớn hơn chúng ta. Và chính xác đó là lý do tại sao việc chọn tông màu phù hợp cho trang web của bạn lại quan trọng đến vậy.

Bằng cách kết hợp các màu sắc và màu sắc khác nhau, chúng ta có thể tạo ra các bảng màu mang lại sự hài hòa cho thiết kế, gợi lên cảm xúc mong muốn, ảnh hưởng đến tâm trạng của người dùng và định hình nhận thức về thương hiệu của họ.

2. Những cảm xúc được liên kết với màu sắc khác nhau?

Có cả một lĩnh vực khoa học chuyên nghiên cứu về tác động của màu sắc đối với hành vi của con người – nó gọi là tâm lý màu sắc. Qua nhiều thí nghiệm và nghiên cứu, các nhà khoa học đã chứng minh rằng màu sắc thực sự gợi lên cảm xúc: một số làm cho chúng ta vui vẻ, tỉnh táo hoặc thoải mái, trong khi những người khác chạm vào những cảm xúc đen tối hơn và có thể khiến chúng ta lo lắng hoặc buồn bã.

Trong thực tế, 85% người mua hàng đã nói họ mua sản phẩm chỉ dựa trên màu sắc.

Bằng cách chọn bảng màu phù hợp cho trang web của bạn, bạn có thể thay đổi cách mọi người nghĩ về thương hiệu của bạn và tạo ra cảm xúc lâu dài sẽ thúc đẩy người tiêu dùng quyết định mua hàng.

Nhưng bắt đầu từ đâu?

Đây là sáu chính màu sắc gợi ra một phản ứng cảm xúc độc đáo trong người xem:

Màu đỏ

Màu đỏ tượng trưng cho tầm quan trọng, niềm đam mê và sự hung hăng. Hãy nghĩ về thảm đỏ, trái tim như một biểu tượng tình yêu, hoặc dấu hiệu dừng lại. Nó đòi hỏi sự chú ý và, khi nói đến thiết kế, nên được sử dụng một cách tiết kiệm để không gây choáng ngợp hoặc mệt mỏi cho người xem.

Vodafone.
Tín dụng hình ảnh: Vodafone.

trái cam

Cam có liên quan đến năng lượng, vui tươi và giá thấp. Sử dụng màu cam trong thiết kế web có thể giúp làm nổi bật sự trẻ trung của thương hiệu và thậm chí còn lọt vào mắt xanh của người mua.

easygroup
Tín dụng hình ảnh: easygroup.

Màu vàng

Là màu của mặt trời, màu vàng có thể chơi trên các khía cạnh hạnh phúc và vui vẻ. Nhưng nó cũng kích hoạt vùng lo lắng trong não, vì vậy nó nên được sử dụng thận trọng và trong các sắc thái khác nhau.

Sâu bướm
Tín dụng hình ảnh: Sâu bướm.

màu xanh lá

Màu sắc của thiên nhiên, màu xanh lá cây có mối liên hệ chặt chẽ với sức khỏe, sự thịnh vượng và các sáng kiến ​​thân thiện với môi trường. Nó cho vay đẹp mắt cho tất cả các loại sản phẩm hữu cơ hoặc tự nhiên và thương hiệu tập trung vào ngoài trời và thiên nhiên.

Starbucks
Tín dụng hình ảnh: Starbucks.

Màu xanh da trời

Màu xanh ngay lập tức truyền cảm hứng cho sự tin tưởng và gợi lên cảm giác an toàn. Thêm vào đó, nó được chứng minh là có tác dụng làm dịu não, do đó, nó cũng xuất hiện như một lời mời và thân thiện. Rất linh hoạt và rực rỡ, màu xanh là một trong những lựa chọn màu sắc phổ biến nhất trong số các nhà thiết kế web.

NHS
Tín dụng hình ảnh: NHS.

Màu tím

Màu tím là màu của hoàng gia. Thường gắn liền với sự thanh lịch, bí ẩn và sáng tạo, đó là màu sắc phù hợp với các thương hiệu đang theo đuổi sự hấp dẫn cao cấp hoặc sang trọng hoặc muốn tạo ra sự lôi cuốn gợi cảm hơn với thiết kế trang web của họ.

Cadbury
Tín dụng hình ảnh: Cadbury.

Suy nghĩ về việc sử dụng màu chính và màu phụ cho bảng màu trang web của bạn sẽ cho phép bạn ảnh hưởng đến cách mọi người cảm nhận về trang web và thương hiệu của bạn.

3. Tôi nên biết gì về sự khác biệt màu sắc giới tính / tuổi?

Các trang web hoạt động tốt nhất có một điểm chung – họ biết đối tượng mục tiêu của họ. Cho dù thông qua nghiên cứu thị trường hoặc nhiều năm kinh nghiệm trong ngành của bạn, bạn sẽ có thể cho biết ai bạn muốn khiếu nại. Tại sao? Bởi vì màu sắc, lựa chọn thiết kế, kiểu chữ và những thứ như tông giọng ảnh hưởng đến các nhân khẩu học khác nhau.

Và nó không chỉ là nhân khẩu học khác nhau mà xem màu sắc khác nhau. Hóa ra đàn ông và phụ nữ cũng thích màu sắc khác nhau.

Trong một nghiên cứu năm 2012, Gần 2.000 đàn ông và phụ nữ được hỏi liệu họ thích màu tím, xanh dương, xanh lá cây, vàng, cam, đỏ hay hồng.

42% nam giới cho biết màu xanh là màu yêu thích của họ, tiếp theo là màu xanh lá cây (25%) và màu tím (12%). Phụ nữ cũng cho biết màu xanh là màu ưa thích của họ (29%), theo sát là màu tím (27%) và xanh lá cây (19%).

Biểu đồ hình tròn: Màu sắc yêu thích của nhân loại
Biểu đồ hình tròn: màu sắc yêu thích của con người.

Mặc dù tinh tế, sự khác biệt về sở thích màu sắc giữa nam và nữ có thể tạo ra tác động đáng kể đến thành công của thương hiệu. Đó không phải là tất cả. Khi tạo một bảng màu trang web thu hút cả hai giới, điều quan trọng là phải xem xét các màu ít được yêu thích nhất.

Vì vậy, màu sắc nào làm giới tính khác nhau thích?

Vì vậy, màu sắc nào làm giới tính khác nhau thích? Một số nghiên cứu đã được thực hiện theo hướng đó.

Màu sắc rẻ tiền hoặc thiếu sáng tạo

Theo nghiên cứu này, cả đàn ông và phụ nữ đều không thích màu nâu và cam. 17% phụ nữ cũng đưa màu xám vào danh sách ba màu ít được yêu thích nhất. Điều thú vị là cả hai giới đều coi những màu này giống nhau như rẻ tiền

4. Màu sắc nào thu hút sự chú ý nhất?

Sự kết hợp màu sắc phù hợp là điều cần thiết trong thiết kế web vì chúng giúp các nhà thiết kế thiết lập hệ thống phân cấp thị giác. Ngược lại, hệ thống phân cấp trực quan cho phép người dùng phân biệt các yếu tố cốt lõi gần như ngay lập tức và phát hiện ra thông tin quan trọng nhất trước tiên.

Bảo tàng Guggenheim
Ví dụ: Bảo tàng Guggenheim sử dụng màu sắc để làm nổi bật các vị trí khác nhau và làm nổi bật thông tin quan trọng nhất trên trang web.

Nhưng nó không chỉ là sự kết hợp màu sắc khác nhau mang lại cấu trúc thiết kế. Màu sắc tự nhiên có thứ bậc riêng, được xác định rõ nhất bởi tác động mỗi màu tạo ra cho cảm xúc, giác quan và hành vi của chúng ta.

Có những màu đậm, như đỏ, vàng hoặc cam, đó là thực tế không thể di chuyển và đòi hỏi sự chú ý không phân chia của chúng tôi. Và có những màu yếu hơn, chẳng hạn như xám, trắng hoặc xanh nhạt, giúp tạo độ tương phản và làm cho các yếu tố quan trọng bật lên.

Các nhà thiết kế thích sử dụng màu sắc táo bạo để làm sắc nét điều hướng và tạo ra trải nghiệm người dùng trực quan hơn. Bên cạnh đó, màu đậm có thể được sử dụng để tạo sự nhất quán trên các trang khác nhau và giúp người dùng tìm thấy những gì họ cần nhanh hơn. Ví dụ, sử dụng màu đỏ cho các nút kêu gọi hành động trên trang web của bạn có thể tăng tỷ lệ chuyển đổi của bạn và làm cho thiết kế UI trực quan hơn.

5. Những ngành công nghiệp ưa thích màu sắc khác nhau?

Chúng tôi đã thảo luận về tâm lý màu sắc quan trọng như thế nào đối với thương hiệu, bản sắc và thiết kế logo và cách mỗi sắc thái có tác động tâm lý khác nhau đối với khách hàng.

Vì vậy, không có gì đáng ngạc nhiên khi biết rằng các ngành công nghiệp khác nhau ưa thích các màu sắc khác nhau, vì họ đang cố gắng gợi lên những cảm xúc đặc biệt và tạo ra các hiệp hội liên quan đến ngành.

Một nghiên cứu đã phân tích 520 logo trong một loạt các ngành công nghiệp để xác định ngành nào thích màu nào. Những phát hiện được tổng hợp thành một biểu đồ đầy màu sắc, đại diện cho 20 thương hiệu hàng đầu trong mỗi ngành và màu sắc chủ đạo của họ.

6. Làm cách nào để cải thiện nhận diện thương hiệu?

Màu sắc là một trong những yếu tố quan trọng nhất của một thương hiệu đáng nhớ – bên cạnh kiểu chữ, tên thương hiệu và đồ họa.

Chúng tôi biết rằng chúng tôi bộ não khao khát thông tin thị giác. Phác thảo nội dung hình ảnh hấp dẫn sử dụng màu sắc phù hợp và thiết kế đẹp mắt khiến người dùng thích thú và khóa sự chú ý của họ rất lâu trước khi thông tin thực sự được xử lý. Phải mất một phần tư giây để bộ não xử lý tín hiệu thị giác, trong khi khoảng chú ý của người tiêu dùng trung bình chỉ là 8 giây.

Hãy cùng làm một thí nghiệm nhanh chóng. Nhắm mắt lại và nghĩ về ba thương hiệu này: Milka Chocolate, IKEA và Carlsberg. Bạn đã thấy màu sắc thương hiệu của họ? Tôi cá rằng bộ não của bạn đã được tắm ngay lập tức với hình ảnh màu tím, xanh lam với màu vàng và màu xanh lá cây.

Milka
Tín dụng hình ảnh: Milka.

Nghiên cứu đã chỉ ra rằng màu sắc tăng nhận diện thương hiệu lên 80%. Xây dựng nhận diện thương hiệu tốt hơn, lần lượt, giúp các công ty thiết lập sự quen thuộc. Và một cái gì đó càng quen thuộc, chúng ta càng tin tưởng nó.

Nghiên cứu tâm lý màu sắc cũng có thể giúp bạn đảm bảo rằng thương hiệu của bạn được liên kết với những cảm xúc phù hợp và tạo ra một tình cảm tích cực trong người tiêu dùng.

Điều này có vẻ như rất nhiều công việc cho một cái gì đó cơ bản như bảng màu của trang web, nhưng nó là một bước quan trọng trong quy trình thiết kế trang web. Để có thể ảnh hưởng đến cách người dùng nhìn và cảm nhận về thương hiệu của bạn, chúng tôi cần hiểu rõ hơn về kết nối giữa màu sắc và cảm xúc.

7. Màu trung tính là gì?

Bạn có thể tạo một thiết kế trang web hấp dẫn mà không cần sử dụng bất kỳ màu nào? Câu trả lời là có, nhưng điều đó đòi hỏi sự hiểu biết tốt về các yếu tố thiết kế khác, chẳng hạn như kiểu chữ, lưới và bố cục, để thu hút sự chú ý của khách truy cập..

Thiết kế trang web đen trắng được biết đến như một bảng màu đơn sắc. Sự kết hợp của màu đen và trắng là một sự đánh cược an toàn – đây là hai màu sẽ không bao giờ lỗi mốt. Tuy nhiên, một bảng màu đơn sắc có thể dựa trên bất kỳ màu nào, miễn là nó có nguồn gốc từ một màu sắc duy nhất và được mở rộng bằng cách sử dụng các sắc độ, sắc thái và tông màu của nó.

Một thiết kế đơn sắc được thực hiện tốt đảm bảo một trang web nổi bật như tinh vi, sang trọng và vượt thời gian.

Studio ưu đãi đặc biệt
Đây là một ví dụ về bảng màu đơn sắc sử dụng màu đỏ làm màu sắc cơ bản.

Mặt khác, nó có thể là một thách thức để có được một phản ứng cảm xúc từ khách truy cập của bạn. Không có màu sắc, thiết kế web đơn sắc cũng không có cá tính và cảm xúc. Các nhà thiết kế phải suy nghĩ sáng tạo về việc phát triển trải nghiệm duyệt web hấp dẫn khi họ chọn cách phối màu đơn sắc.

Nghiên cứu về sự tối giản trong thiết kế web cho thấy rằng việc sử dụng màu nhấn có chủ ý và nhất quán trong toàn bộ thiết kế sẽ giúp làm nổi bật thông tin quan trọng nhất và thúc đẩy người dùng hành động.

Một nghiên cứu đã phân tích 520 logo
Một nghiên cứu đã phân tích 520 logo.

Màu xanh lam, đỏ và xanh lá cây là ba màu chủ đạo mọc lên trong hầu hết các ngành công nghiệp.

Tuy nhiên, có LẠC một ngoại lệ áp dụng cho màu xanh. Theo các nhà nghiên cứu thực phẩm, khi con người tìm kiếm thức ăn, họ đã học cách tránh các vật thể độc hại hoặc hư hỏng, thường có màu xanh, đen hoặc tím. Khi thực phẩm nhuộm màu xanh được phục vụ cho các đối tượng nghiên cứu, họ mất cảm giác ngon miệng.

Nếu mọi thương hiệu khác trong ngành của bạn đang sử dụng cùng một màu, có vẻ như không thể nổi bật và xây dựng một thương hiệu dễ nhận biết. Đó là lý do tại sao nó rất quan trọng để biên dịch một bảng màu rộng hơn sẽ áp dụng cho tất cả các tài liệu tiếp thị và thương hiệu, thay vì chỉ kết hợp đơn giản giữa màu chính và màu phụ.

8. Có ví dụ nào về phối màu trang web tốt không?

Có! Dưới đây là 20 ví dụ để truyền cảm hứng cho bảng màu trang web của bạn.

1. Màu nhấn tươi sáng

Crescosa
Tín dụng hình ảnh: Crescosa.

Sử dụng màu nhấn trong bảng màu trang web của bạn là một trong những cách hiệu quả nhất để hướng sự chú ý của khách truy cập đến các bit thông tin quan trọng nhất trên trang. Trong ví dụ dưới đây, ba màu đậm – vàng, tím và đỏ – được sử dụng để tạo ra các dịch vụ cốt lõi và tạo ra một khái niệm đáng nhớ.

2. Một bảng màu sáng nhưng cân bằng

Cơn bão hoàn hảo
Tín dụng hình ảnh: Cơn bão hoàn hảo.

Phối màu trang web này cân bằng hai màu rực rỡ, sử dụng màu đỏ tươi làm màu nhấn.

Khám phá thêm các tông màu tươi sáng trên Màu Adobe.

3. Phối màu tươi và hữu cơ

Calem
Tín dụng hình ảnh: Calem.

Câu nói mà chúng ta ăn bằng mắt trước tiên là tại chỗ. Não của chúng ta nhận được tín hiệu từ mắt trước khi vị giác của chúng ta hoạt động. Màu sắc thường là yếu tố đầu tiên mà mắt chúng ta chú ý về một sản phẩm thực phẩm, điều này định trước cách chúng ta cảm nhận hương vị và hương vị của những gì chúng ta sắp ăn. Trong ví dụ dưới đây, chúng ta thấy cách sử dụng bảng màu tự nhiên, chủ yếu là màu vàng, trắng và xanh lá cây, tạo ra một cái nhìn hữu cơ và tươi mới.

4. Âm đất

LaunchBuzz
Tín dụng hình ảnh: LaunchBuzz.

Phối màu trang web này sử dụng nền màu trung tính để làm nổi bật màu hồng đào của sản phẩm.

Khám phá thêm các phối màu mới trên Màu Adobe.

5. Phối màu bình tĩnh và tối giản

Làm việc có trách nhiệm
Tín dụng hình ảnh: Làm việc có trách nhiệm.

Sự kết hợp đơn giản của màu sắc đất, yên tĩnh này tạo ra một bầu không khí thư giãn và thiết lập tông màu phù hợp cho thông điệp của trang web – vượt qua căng thẳng và lo lắng. Nó cũng là một ví dụ về cách một bảng màu hạn chế vẫn có thể mạnh mẽ trong việc tác động đến tâm trạng và hành vi của khách truy cập.

6. Kiểu dáng đẹp và thư giãn

Giải lao
Tín dụng hình ảnh: Giải lao.

Kết hợp các sắc thái khác nhau của màu xanh với phấn màu phù hợp, phối màu trang web bóng bẩy này tạo ra một bầu không khí tĩnh lặng và mơ màng.

Khám phá nhiều cách phối màu tối giản hơn trên Màu Adobe.

7. Phối màu pastel và tắt tiếng

Đồng hành
Tín dụng hình ảnh: Đồng hành.

Sử dụng bảng màu pastel mềm mại, thiết kế trang web này quản lý để tạo ấn tượng về dòng chảy hữu cơ và cấu trúc hình ảnh. Nó rất đẹp mắt và cân đối, lôi cuốn khách truy cập và tiếp tục duyệt.

8. Phối màu mềm mại và lôi cuốn

Cédric Pereira
Tín dụng hình ảnh: Cédric Pereira.

Phối màu trang web này kết hợp một số màu pastel để tạo ra một cái nhìn mềm mại và hấp dẫn.

Khám phá thêm các bảng màu pastel trên Màu Adobe.

9. Phối màu rực rỡ và táo bạo

MA Cần sa thật
Tín dụng hình ảnh: MA Cần sa thật.

Bùng nổ với màu sắc và năng lượng, bảng màu rực rỡ này kết hợp màu vàng sáng và màu xanh rực rỡ, tạo ra một sự kết hợp mạnh mẽ. Với màu sắc sống động và các yếu tố thiết kế thú vị, trang web để lại ấn tượng lâu dài và bùng nổ hương vị cam quýt.

10. Tương phản sinh động

Thiết kế Dropbox
Tín dụng hình ảnh: Thiết kế Dropbox.

Trong bảng màu này, hai màu rực rỡ được sử dụng để tạo độ tương phản bắt mắt.

Khám phá các phối màu rực rỡ hơn trên Màu Adobe.

11. Phối màu đầy màu sắc và hiện đại.

Xác nhận
Tín dụng hình ảnh: Xác nhận.

Trang web này tạo ra một thiết kế tinh tế và hiện đại bằng cách kết hợp các sản phẩm có màu sắc rực rỡ với nền trung tính. Với một màu nhấn cho các nút CTA, thiết kế trang web hoạt động tuyệt vời trong việc hướng dẫn khách truy cập đến hành động mong muốn.

12. Vui vẻ và vui tươi

Kế hoạch của bạn, hành tinh của bạn
Tín dụng hình ảnh: Kế hoạch của bạn, hành tinh của bạn.

Kết hợp nhiều màu sắc và màu sắc khác nhau, trang web này tạo ra một bảng màu vui tươi sử dụng màu sắc để tạo các danh mục thông tin.

Khám phá nhiều cách phối màu đầy màu sắc trên Màu Adobe.

13. Phối màu đơn sắc

Studio quay vòng
Tín dụng hình ảnh: Studio quay vòng.

Chơi với kết cấu và các sắc thái khác nhau của màu đen và màu xám, bảng màu này giúp tạo ra một thiết kế trang web bí ẩn nhưng dễ tiếp cận. Việc thiếu màu sắc trong thiết kế web này buộc khách truy cập phải tập trung vào các yếu tố khác, bao gồm bản sao, hình dạng và hình ảnh.

14. Thanh lịch và yên bình

Mowellens
Tín dụng hình ảnh: Mowellens.

Chơi với một vài sắc thái của màu xanh lá cây, thiết kế trang web này tạo ra chiều sâu và sử dụng bảng màu bình tĩnh, sạch sẽ để thu hút khách truy cập.

Khám phá thêm các bảng màu đơn sắc trên Màu Adobe.

15. Phối màu sống động và sắc nét

Mắt lớn
Tín dụng hình ảnh: Mắt lớn.

Tạo ra một bảng màu sắc nét, thiết kế trang web này tạo ấn tượng đầu tiên mạnh mẽ. Không ngại dẫn đầu với màu sắc sống động, thiết kế trang web kết hợp các sắc thái khác nhau để tạo ra sự tương phản rõ rệt và thu hút mắt khách truy cập – từ màu hồng đậm đến màu xanh lục và màu xanh lam phong phú, cách phối màu vẫn cân bằng.

16. Không sợ màu đậm

Mã màu
Tín dụng hình ảnh: Mã màu.

Với độ tương phản cao và ba màu rực rỡ khi chơi, phối màu trang web này tạo ấn tượng đậm.

Khám phá các phối màu sinh động hơn trên Màu Adobe.

17. Phối màu sang trọng và sang trọng

Cher Ami
Tín dụng hình ảnh: Cher Ami.

Phối màu tuyệt đẹp này mang đến vẻ ngoài hoàng gia, thanh lịch bằng cách kết hợp màu xanh đậm với sắc vàng. Nó có một phối màu cổ điển với một nét hiện đại mang lại trải nghiệm hình ảnh mạnh mẽ và ngay lập tức định vị thương hiệu là một người chơi cao cấp.

18. Với một chút vàng

Paola Krauze
Tín dụng hình ảnh: Paola Krauze.

Ví dụ dưới đây cho thấy cách ném vào một màu sắc có các hiệp hội văn hóa mạnh mẽ – trong trường hợp này; vàng – có thể thay đổi sự năng động của toàn bộ thiết kế và làm cho nó trông hoành tráng hơn.

Khám phá các phối màu thanh lịch hơn trên Màu Adobe.

19. Phối màu công ty nhưng tràn đầy năng lượng

Đám đông tre
Tín dụng hình ảnh: Đám đông tre.

Dựa vào bảng màu sống động nhưng khá truyền thống, thiết kế trang web này quản lý để gợi lên sự tin tưởng đồng thời tạo ấn tượng về một thương hiệu hiện đại, có tầm nhìn xa. Với độ tương phản mạnh mẽ và mức độ dễ đọc tuyệt vời, sự kết hợp giữa màu đỏ và màu xanh mang đến cho trang web một sự rung cảm năng động và mạnh mẽ.

20. Truyền thống nhưng thú vị

Tín
Tín dụng hình ảnh: Tín.

Sự kết hợp cổ điển của màu đỏ và màu xanh trở nên sống động trong thiết kế trang web tuyệt vời này.

Khám phá thêm các bảng màu công ty trên Màu Adobe.

Bây giờ bạn đã biết cách tự thiết kế một sơ đồ màu cho trang web

Sự thật là, bạn không cần phải là một nhà thiết kế để biên dịch một bảng màu trang web đẹp. Với sự hiểu biết rộng về tâm lý màu sắc, các nguyên tắc cơ bản của lý thuyết màu sắc và kho công cụ hữu ích, bạn có thể phát triển bảng màu mang lại cho thương hiệu của bạn một bản sắc hình ảnh mạnh mẽ.

Dành thời gian của bạn để khám phá các ví dụ sáng tạo, thử nghiệm các kết hợp màu khác nhau và tìm các màu bổ sung phối hợp độc đáo với nhau. Thiết kế tuyệt vời chỉ mang tính tương đối – nếu nó hoạt động cho thương hiệu của bạn, thúc đẩy sự tham gia và tăng cường nhận diện thương hiệu, thì đó là tất cả những gì thực sự quan trọng.

Bây giờ hãy đội chiếc mũ thiết kế của bạn và bắt đầu thử nghiệm với bảng màu của bạn!

Tham gia bản tin của chúng tôi

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map