Bảng Màu Web

Bảng màu web là gì?

Màu sắc rất quan trọng đối với các nhà thiết kế web và thiết kế đồ họa. Các nhà thiết kế mô tả các màu mà chúng tôi mô tả là xanh lam, đỏ và xanh lục trong cuộc sống hàng ngày với các mã như # fff002, # 426215. Bất kể bạn đang thực hiện loại dự án mã hóa nào, một lúc nào đó bạn sẽ có thể bắt đầu làm việc với màu sắc. Điều này sẽ đặc biệt hữu ích nếu bạn học viết mã bằng HTML, như nhiều người vẫn làm để thiết kế trang web.

Mã Hex có ý nghĩa gì trong màu sắc?

Mã hex là một cách để biểu diễn một màu ở định dạng RGB bằng cách kết hợp ba giá trị. Các mã màu này là một phần không thể thiếu của HTML cho thiết kế web và vẫn là một cách quan trọng để biểu thị các định dạng màu kỹ thuật số.

Mã màu hệ lục phân bắt đầu bằng dấu thăng hoặc thẻ bắt đầu bằng # (#), theo sau là sáu chữ cái hoặc số. Hai chữ cái / số đầu tiên tương ứng với màu đỏ, hai chữ cái tiếp theo là màu xanh lá cây và hai chữ cái cuối cùng là màu xanh lam. Giá trị màu được xác định trong các giá trị từ 00 đến FF.

Các số được sử dụng khi giá trị là 1-9. Các chữ cái được sử dụng khi giá trị lớn hơn 9. Ví dụ:

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

Mã màu hệ lục phân và các mã màu RGB tương đương

Việc ghi nhớ một số mã màu hex phổ biến nhất có thể hữu ích để giúp bạn dự đoán tốt hơn các màu khác sẽ như thế nào khi bạn nhìn thấy mã màu hex, không chỉ khi bạn muốn sử dụng các màu chính xác đó.

• Đỏ = # FF0000 = RGB (255, 0, 0)
• Màu xanh lá cây = # 008000 = RGB (1, 128, 0) v
• Xanh lam = # 0000FF = RGB (0, 0, 255)
• Trắng = #FFFFFF = RGB (255,255,255)
• Ngà = # FFFFF0 = RGB (255, 255, 240)
• Đen = # 000000 = RGB (0, 0, 0)
• Xám = # 808080 = RGB (128, 128, 128)
• Bạc = # C0C0C0 = RGB (192, 192, 192)
• Màu vàng = # FFFF00 = RGB (255, 255, 0)
• Tím = # 800080 = RGB (128, 0, 128)
• Màu cam = # FFA500 = RGB (255, 165, 0)
• Đỏ tía = # 800000 = RGB (128, 0, 0)
• Fuchsia = # FF00FF = RGB (255, 0, 255)
• Lime = # 00FF00 = RGB (0, 255, 0)
• Aqua = # 00FFFF = RGB (0, 255, 255)
• Màu xanh lam = # 008080 = RGB (0, 128, 128)
• Ô liu = # 808000 = RGB (128, 128, 0)
• Xanh hải quân = # 000080 = RGB (0, 0, 128)

Tại sao màu sắc trang web lại quan trọng?

Bạn có thể nghĩ rằng bạn không bị ảnh hưởng bởi màu sắc, nhưng theo một nghiên cứu, 85% người nói rằng màu sắc có ảnh hưởng lớn đến sản phẩm họ mua. Anh ấy cũng nói rằng khi một số công ty thay đổi màu sắc nút của họ, họ đã nhận thấy sự gia tăng hoặc giảm mạnh trong chuyển đổi của họ.

Ví dụ, Beamax, một công ty sản xuất màn hình chiếu, đã nhận thấy số lần nhấp chuột vào các liên kết màu đỏ tăng lên rất nhiều 53,1% so với các liên kết màu xanh lam.

Màu sắc có tác động rất lớn không chỉ đến các lần nhấp chuột mà còn cả việc nhận diện thương hiệu. Một nghiên cứu về tác động tinh thần của màu sắc cho thấy rằng màu sắc làm tăng khả năng nhận diện thương hiệu trung bình 80%. Ví dụ, khi bạn nghĩ đến Coca-Cola, bạn có thể sẽ tưởng tượng ra những lon màu đỏ rực rỡ.

Làm thế nào để chọn một bảng màu cho các trang web?

Để quyết định bạn nên chọn màu nào trên trang web hoặc ứng dụng web của mình, trước tiên bạn phải hiểu rõ về những gì bạn đang bán. Ví dụ, nếu bạn đang cố gắng đạt được chất lượng cao hơn, hình ảnh cao cấp, màu sắc bạn nên chọn là màu tím. Tuy nhiên, nếu bạn muốn tiếp cận đối tượng rộng hơn, hãy chọn màu xanh lam; Đây là một màu yên tâm và nhẹ nhàng, rất phù hợp cho các chủ đề nhạy cảm hơn như sức khỏe hoặc tài chính.

Các ví dụ trên đã được chứng minh bởi nhiều nghiên cứu. Nhưng màu sắc bạn chọn cho trang web của mình phụ thuộc vào mức độ phức tạp của thiết kế và các kiểu kết hợp màu sắc. Ví dụ: nếu bạn đang sử dụng bảng màu thiết kế web đơn sắc, bạn có thể cần bảy hoặc nhiều sắc thái của màu đó để có đủ sự đa dạng trên màn hình. Bạn cần đặt màu cho các phần nhất định của trang web của mình, chẳng hạn như văn bản, nền, liên kết, màu di chuột, nút CTA và tiêu đề.

Bây giờ "Làm thế nào để chọn một bảng màu cho các trang web và ứng dụng web?" Chúng ta hãy xem xét nó từng bước:

1. Chọn màu cơ bản của bạn.

Cách tốt nhất để quyết định màu chính là xem xét màu sắc phù hợp với tâm trạng của sản phẩm hoặc dịch vụ của bạn.

Dưới đây chúng tôi đã liệt kê một số ví dụ cho bạn:

• Màu đỏ: Nó có nghĩa là sự phấn khích hoặc hạnh phúc.
• Màu cam: Biểu thị thời gian thân thiện, vui vẻ.
• Màu vàng có nghĩa là lạc quan và hạnh phúc.
• Màu xanh lá cây: Nó có nghĩa là sự tươi mát và tự nhiên.
• Màu xanh lam: là viết tắt của độ tin cậy và đảm bảo.
• Màu tím: Đại diện cho một thương hiệu nổi bật với lịch sử chất lượng.
• Màu nâu: Nó có nghĩa là một sản phẩm đáng tin cậy có thể được sử dụng bởi tất cả mọi người.
• Màu đen có nghĩa là sang trọng hoặc thanh lịch.
• Màu trắng: Đề cập đến các sản phẩm thời trang, thân thiện với người dùng.

2. Chọn màu sắc bổ sung của bạn.

Chọn một hoặc hai màu bổ sung bổ sung cho màu chính của bạn. Đây lý tưởng nên là những màu làm cho màu sắc chính của bạn trở nên "bắt mắt".

3. Chọn màu nền.

Chọn một màu nền sẽ ít “gây hấn” hơn màu chính của bạn.

4. Chọn màu phông chữ.

Chọn màu cho văn bản trên trang web của bạn. Lưu ý rằng phông chữ đen đặc rất hiếm và không được khuyến khích.

Các bảng màu web tốt nhất cho các nhà thiết kế

Nếu bạn không thể tìm thấy màu bạn đang tìm kiếm trong bộ sưu tập bảng màu trên web Softmedal, bạn có thể xem các trang web màu thay thế bên dưới:

Lựa chọn màu sắc là một quá trình lâu dài và thường đòi hỏi nhiều sự tinh chỉnh để tìm ra màu sắc phù hợp. Tại thời điểm này, bạn có thể tiết kiệm thời gian bằng cách sử dụng các ứng dụng web miễn phí 100% để tạo các bảng màu có liên quan từ đầu.

1. Paletton

Paletton là một ứng dụng web mà tất cả các nhà thiết kế web nên biết. Chỉ cần nhập một màu hạt giống và ứng dụng sẽ thực hiện phần còn lại cho bạn. Paletton là một sự lựa chọn đáng tin cậy và là một ứng dụng web tuyệt vời cho những người không biết gì về thiết kế và cho những người mới bắt đầu.

2. Màu an toàn

Nếu WCAG là bất kỳ mối quan tâm nào trong quá trình thiết kế của bạn, thì Color Safe là công cụ tốt nhất để sử dụng. Với ứng dụng web này, bạn có thể tạo các bảng màu kết hợp hoàn hảo và tạo độ tương phản phong phú theo hướng dẫn của WCAG.

Bằng cách sử dụng ứng dụng web Color Safe, bạn đảm bảo rằng trang web của mình tuân thủ các nguyên tắc của WCAG và mọi người đều có thể truy cập đầy đủ.

3. Adobe Color CC

Nó là một trong những công cụ Adobe miễn phí được tạo ra để sử dụng công khai. Nó là một ứng dụng web phức tạp, nơi bất kỳ ai cũng có thể tạo các bảng màu từ đầu. Nó cho phép bạn lựa chọn từ nhiều mô hình màu sắc khác nhau phù hợp nhất với nhu cầu của bạn. Thoạt đầu giao diện có vẻ hơi khó hiểu, nhưng khi bạn đã quen với nó, bạn sẽ không gặp vấn đề gì khi chọn các tùy chọn màu sắc đẹp mắt.

4. Môi trường xung quanh

Ambiance, một ứng dụng web miễn phí, cung cấp bảng màu web được tạo sẵn từ các trang web màu khác trên web. Nó hoạt động giống như một ứng dụng web truyền thống, nơi bạn có thể lưu màu sắc vào hồ sơ của mình và tạo các lược đồ của riêng bạn từ đầu. Tất cả các bảng màu web này đều đến từ Colorlovers. Giao diện Ambiance giúp duyệt web dễ dàng hơn và tập trung hơn vào sự tương tác màu sắc cho thiết kế giao diện người dùng.

5. 0 đến255

0to255 không chính xác là một trình tạo bảng màu, nhưng nó có thể giúp bạn tinh chỉnh các bảng màu hiện có. Ứng dụng web hiển thị cho bạn tất cả các màu khác nhau để bạn có thể trộn và kết hợp các màu ngay lập tức.

Nếu bạn cảm thấy khó khăn trong việc tạo ra một bảng màu có thể sử dụng được, bạn có thể xem lại một số ứng dụng trên.

Bảng màu web tốt nhất

Các trang web sau đây sử dụng nhiều bảng màu web khác nhau để mang lại hiệu quả tuyệt vời. Chúng được lựa chọn cẩn thận cho những cảm xúc mà chúng gợi lên và những cảm xúc mà chúng truyền tải.

1. Odopod

Odopod được thiết kế với một bảng màu đơn điệu, nhưng nhằm tránh trông nhàm chán với một gradient trên trang chủ của nó. Kiểu chữ lớn mang lại độ tương phản tuyệt vời. Rõ ràng nơi khách truy cập muốn họ nhấp vào.

2. Con mắt của Tori

Tori's Eye là một ví dụ tuyệt vời về cách phối màu đơn sắc. Ở đây, các hiệu ứng của một bảng màu đơn giản nhưng mạnh mẽ tập trung xung quanh các sắc thái của màu xanh lá cây được nhìn thấy. Cách phối màu này thường dễ thực hiện, vì một màu của một màu hầu như sẽ luôn hoạt động với một bóng khác cùng màu.

3. Bộ dụng cụ sinh tồn bằng pho mát

Màu đỏ là một màu cực kỳ phổ biến cho bảng màu trang web. Nó có thể truyền tải một hỗn hợp cảm xúc phong phú, làm cho nó trở nên linh hoạt. Như bạn có thể thấy trên trang web Cheese Survival Kit, nó đặc biệt mạnh khi được sử dụng với liều lượng nhỏ. Màu đỏ được làm dịu bằng các màu trung tính hơn và màu xanh lam giúp ích cho các CTA và các lĩnh vực khác mà doanh nghiệp muốn thu hút sự chú ý của khách truy cập.

4. Ahrefs

Ahrefs là một ví dụ về một trang web sử dụng bảng màu một cách tự do. Màu xanh lam đậm đóng vai trò là màu chủ đạo, nhưng các biến thể tồn tại trên khắp trang web. Tương tự với các màu cam, hồng và xanh ngọc.

Câu hỏi thường gặp nhất về màu sắc

1. Màu sắc tốt nhất cho một trang web là gì?

Màu xanh lam chắc chắn là sự lựa chọn an toàn nhất vì nó là màu phổ biến nhất với 35%. Tuy nhiên, nếu các đối thủ cạnh tranh của bạn đều sử dụng màu xanh lam, thì việc "phân biệt" ưu đãi và thương hiệu của bạn có thể hợp lý. Nhưng bạn cần đảm bảo rằng bạn không làm cho du khách choáng ngợp.

2. Trang web nên có bao nhiêu màu?

Hãy xem xét rằng 51% thương hiệu có logo đơn sắc, 39% sử dụng hai màu và chỉ 19% công ty thích logo đủ màu. Từ đây, bạn có thể thấy rằng các trang web có 1, 2 và 3 màu có ý nghĩa hơn việc cố gắng tạo một trang web với bảy sắc cầu vồng. Tuy nhiên, các thương hiệu như Microsoft và Google tin tưởng vào lợi thế làm việc với nhiều màu sắc hơn khi họ sử dụng ít nhất 4 màu đồng nhất trong thiết kế của mình.

3. Tôi nên sử dụng màu sắc ở đâu?

Màu sắc bắt mắt nên được sử dụng một cách tiết kiệm, nếu không sẽ mất tác dụng của chúng. Hiệu ứng này cần có trong các điểm chuyển đổi như nút "Mua ngay".