Chào bạn,

Nếu bạn đang loay hoay với việc tạo bảng màu, Phông chữ… cho giao diện website, đặc biệt là các theme (màu giao diện Website) mà không phải là thiết kế đồ họa phức tạp hay ứng dụng di động, thì bài viết này chính là dành cho bạn. Nhiều anh em thiết kế web thường nhầm lẫn, nhưng cách chọn bảng màu cho giao diện theme khác hoàn toàn với thiết kế đồ họa hay landing page đơn thuần. Bảng màu này giúp website của bạn không còn đơn điệu, đủ sức “chiến” với những thiết kế phức tạp và đa sắc hơn.

Trong hướng dẫn này, chúng ta sẽ đi qua ba bước chính để tạo ra một bảng màu chuẩn chỉnh, từ màu thương hiệu đến dải màu nền và các màu nhấn phụ, cùng với cách điều chỉnh cho Chế độ tối. Công cụ chỉ là công cụ, cái quan trọn nhất vẫn là mắt thẩm mỹ và kinh nghiệm của bạn.

Nội dung chính

Hiểu cấu trúc bảng màu & Blueky WebKit

Cấu trúc bảng màu Blueky Theme

Tới hướng dẫn xem trước bảng màu và Xem cấu trúc bảng màu của Blueky Theme bên dưới:

Tóm tắt chức năng từng màu

Cấu trúc màu chuẩn của Blueky Theme

	Vai trò	Ý nghĩa / Vị trí sử dụng chính
1	Màu chủ đạo	Nút chính, CTA, liên kết nổi bật, biểu tượng chủ đạo
2	Màu nhấn	Hover, nhấn phụ, màu bổ trợ nhẹ cho màu chủ đạo
3	Màu văn bản	Văn bản chính – đoạn nội dung dài
4	Màu tiêu đề	H1–H6, tiêu đề các phần, văn bản nổi bật hơn
5	Màu viền	Viền khối, phân cách khu vực
6	Nền nhẹ	Vùng nổi nhẹ: Phần thu hút đầu trang, chân trang, thanh bên
7	Nền toàn trang	Nền mặc định của toàn bộ trang web
8	Màu trắng (Đen với nền tối)	Nền khối trắng: đầu trang, thẻ bài viết, card, hộp nội dung

Công cụ hỗ trợ tạo bảng màu

Tạo màu với Tint & Shade, Canva Color wheel và Kiểm tra tương phản

---

Tạo bảng màu toàn trang với Blueky WebKit (cho chế độ sáng)

Mặc định, Blueky Theme giao diện con (Child Theme) của Blocksy mặc định có 8 màu, nhưng nếu thiết kế nâng cao chúng ta sẽ cần thêm màu 9, 10, 11 mới đủ.

Bước 1: Nắm bắt màu thương hiệu cốt lõi

Đây là nền tảng của toàn bộ bảng màu trang web của bạn.

1. Màu số 1 – Màu chủ đạo lấy màu của Logo: Cách đơn giản nhất là lấy màu từ logo của bạn.
   • Mở website của bạn, nhấn phải vào Logo chọn Kiểm tra.
   • Sử dụng công cụ chọn màu và rê chuột vào logo để lấy mã màu hex. Hãy copy mã màu này lại.
   • Mẹo: Website thường dùng mã màu hex, vậy nên cứ lấy mã hex là chuẩn.
2. Màu số 2 – Màu nhấn chính:
   • Dán mã màu logo vào công cụ tạo màu Tint & Shade. Công cụ này sẽ tạo ra hai dải màu: một tối hơn và một sáng hơn.
   • Hãy chọn mã màu sáng hơn một chút để làm màu nhấn chính (màu số 2). Tại sao ư? Một chút nữa bạn sẽ thấy! Đôi khi màu logo của bạn đã khá trung hòa, nhưng để làm màu nhấn, bạn cần nó sáng hơn.
   • Lưu ý: Có thể bạn cần điều chỉnh thêm một tông sáng hơn nữa nếu cảm thấy chưa đủ nổi bật, đừng ngại thử nghiệm.

Bước 2: Tạo dải màu từ đen đến trắng

Dải màu này từ trắng đến đen, là xương sống cho văn bản, tiêu đề và nền.

1. Màu số 4 – Màu tiêu đề: Đây là màu đậm nhất
   • Đây KHÔNG phải là màu đen 100% với mã #000000. Nếu đen quá sẽ rất chói mắt và gây phản cảm.
   • Hãy kéo nhẹ màu đen lên một chút, cho nó bớt “đen thui thùi lùi”. Mục tiêu là màu đen này phải tương phản tốt với màu trắng (màu số 8).
   • Cân chỉnh bằng mắt: Dựa vào mắt mình mà kéo, thấy ưng ý là được. Đôi khi bạn phải giảm độ trong suốt (opacity) của nó xuống một chút để nó hài hòa hơn.
2. Màu số 3 – Màu văn bản:
   • Đây là màu cho nội dung văn bản mặc định.
   • Thường thì màu này sẽ nhạt hơn màu tiêu đề (màu số 4) một chút, có thể giảm xuống khoảng 10% độ đậm so với màu tiêu đề bạn vừa chọn.
   • Quan trọng là văn bản phải DỄ ĐỌC trên nền. Nếu nền màu xám, văn bản nên là màu đậm (màu số 4 hoặc tương tự) để nổi bật.
3. Màu số 5, 6, 7 – Màu Nền & Viền:
   • Các màu này sẽ được tạo từ màu đen bạn đã chọn (màu số 4) nhưng giảm độ trong suốt.
   • Màu số 5: Dùng cho viền hoặc các chi tiết cần độ đậm vừa phải, thường khoảng 50% độ đậm (hoặc giảm độ trong suốt xuống 50%). Có thể là 70% hoặc 80% tùy mắt bạn.
   • Màu số 6 (Nền nhẹ): Giảm độ trong suốt xuống thêm, có thể là 40-50%.
   • Màu số 7 (Nền nhẹ hơn nữa): Giảm độ trong suốt xuống thấp hơn nữa, ví dụ 30%.
   • Nguyên tắc: Dải màu này phải có sự chuyển tiếp mượt mà từ đen sang trắng, tạo cảm giác dễ chịu cho mắt.
   • Tuyệt chiêu: Sử dụng công cụ để kéo màu đen của bạn và giảm độ trong suốt. Quan sát trực tiếp trên một trang mẫu để cân chỉnh cho đến khi thấy hài lòng.
4. Màu số 8 – Màu trắng: Đây là màu trắng thuần khiết #ffffff.

Bước 3: Thêm mở rộng

Những màu này hỗ trợ cho bảng màu chính, tạo điểm nhấn và sự đa dạng.

1. Màu số 9 – Màu văn bản phụ & Chú thích:
   • Màu này thường dùng cho các văn bản phụ, chú thích, hoặc ngày tháng năm, những thứ không cần quá nổi bật.
   • Độ đậm khoảng 40% so với màu gốc (ví dụ: 40% của màu đen bạn đang dùng).
2. Màu số 10, 11 – Hai màu hỗ trợ nhấn:
   • Hai màu này sẽ hỗ trợ cho màu nhấn chính của bạn (màu số 2). Bởi vì một màu nhấn thôi thì khó mà tạo hiệu ứng bắt mắt được.
   • Cách làm: Dán mã màu của màu số 2 vào công cụ tạo màu tương phản Canva Color wheel chọn 3 màu tương phản.
   • Công cụ sẽ cho ra ba màu tương phản. Hãy kiểm tra xem chúng có đủ sáng để văn bản nổi bật trên đó không. Nếu màu chìm quá, hãy điều chỉnh màu gốc (màu số 2) cho sáng lên một chút và thử lại.
   • Lưu ý quan trọng: Ba màu này phải cùng một tông. Nếu một màu nhạt, các màu kia cũng phải nhạt theo để tạo sự hài hòa.

Lưu ý: Tổng quát cho bảng màu sáng

• Kiểm tra bằng mắt: Đây là điều quan trọng nhất. Công cụ chỉ là điểm khởi đầu, bạn phải kiểm tra trực tiếp trên website để xem nó có hài hòa và dễ chịu cho mắt không. Nếu có màn hình chuẩn màu thì càng tốt.
• Màu Đen không hẳn là Đen, Trắng không hẳn là Trắng: Đặc biệt với màu đen, hãy kéo nhạt bớt đi để tránh chói mắt. Website thường dùng nền trắng để dễ thiết kế.
• Đừng Phá Bảng Màu: Khi đã có bảng màu, hãy tuân thủ nó. Việc dùng các màu “cá biệt” hoặc tự chế sẽ khiến việc thay đổi về sau trở nên khó khăn và dễ làm hỏng thiết kế. Bảng màu là để ràng buộc bạn vào một quy tắc, chứ không phải để bạn tự ý sáng tạo một cách hỗn loạn.
• Khi không có Logo: Nếu bạn chưa có logo, hãy chọn màu thương hiệu dựa trên ý nghĩa màu sắc (ví dụ: màu xanh đại diện cho sự đáng tin cậy) hoặc dựa trên ngành nghề (ví dụ: công nghệ hay dùng màu vàng). Quan trọng là hãy chọn màu trung tính, đừng quá chói lòa, vì nền website thường là trắng, màu chói sẽ rất khó thiết kế và dễ bị “đập” vào mắt người xem.

---

Chinh phục chế độ tối – Tùy chỉnh nâng cao

Lưu ý trước khi bắt đầu: Để sửa dụng được tính năng chế độ tối (Dark Mode) bạn cần sửa dụng Blocksy Pro (phiên bản trả phí)

Khi đã có bảng màu chế độ sáng chuẩn, việc tạo bảng màu chế độ tối sẽ dễ dàng hơn nhiều. Nguyên tắc là Chế độ tối là màu đối lập với Chế độ sáng. Nếu màu ở trên thay đổi, màu ở dưới cũng phải thay đổi theo.

Đảo Ngược Màu Chính: Màu số 8 của Chế độ sáng (trắng thuần) sẽ trở thành màu số 4 của Chế độ tối (màu đậm nhất). Màu số 4 của Chế độ sáng (màu đen đậm nhất) sẽ trở thành màu số 8 của Chế độ tối (màu trắng thuần)

1. Màu Thương Hiệu: Cần sáng hơn 10% để nổi bật trên nền tối.
2. Màu Nhấn: Cần sáng hơn 10% để nổi bật trên nền tối.
3. Màu Văn Bản: Giảm màu 4 đi 10%
4. Màu tiêu đề màu trắng #ffffff
5. Màu Viền tối hơn 70%
6. Màu nền nhẹ tối hơn 80%.
7. Nền toàn trang dùng màu 3 (Chế độ sáng)
8. Màu đen dùng màu 4 (Chế độ sáng)
9. Màu số 9,10,11 – Sáng lên 10%

Lưu ý: Cần Kiểm Tra và Điều Chỉnh

• Chỉ một sự khác biệt nhỏ 10% độ sáng/tối cũng tạo ra sự thay đổi lớn về mặt thẩm mỹ trong Chế độ tối.
• Quy tắc: Các tiêu đề (Heading) như Heading 3 trong Chế độ tối nên được giữ màu đen để đảm bảo độ nổi bật, đừng đổi sang các màu khác.
• Và một lần nữa, hãy kiểm tra bằng mắt. Công cụ chỉ cung cấp nền tảng, sự hài hòa cuối cùng phải do mắt bạn quyết định. Đôi khi màu sắc bạn chọn bị “bão hòa” (saturated), khiến chúng bị chìm khi kết hợp với màu đen, bạn sẽ phải thử đi thử lại để có được sự nổi bật mong muốn.

---

Lời Kết Blueky WebKit

Việc tạo bảng màu cho website, đặc biệt là cho theme, đòi hỏi sự tỉ mỉ và một chút “cảm” về màu sắc. Không có công thức cứng nhắc nào là hoàn hảo 100%, bởi mỗi con mắt cảm nhận màu sắc khác nhau. Điều quan trọng là bạn phải hiểu nguyên tắc cơ bản, tận dụng công cụ để có điểm bắt đầu chuẩn xác, và sau đó kiểm tra, cân chỉnh bằng mắt cho đến khi hài lòng.

Đừng ngại thử nghiệm và tinh chỉnh. Một bảng màu chuẩn chỉnh sẽ giúp website của bạn không chỉ đẹp mà còn chuyên nghiệp và dễ đọc cho người dùng. Chúc bạn thành công!

Hướng dẫn được thực hiện bởi Cường Thạch & Hoàng Hxn