Trang chủ » Blog » [Thực hành] Sử dụng màu sắc trong trang web

[Thực hành] Sử dụng màu sắc trong trang web

bởi CodeGym | 26/12/2023 17:16 | Bài thực hành | Blog

Mục tiêu

Luyện tập sử dụng màu sắc trong trang web-  phối màu trên trang web.

Mô tả- sử dụng màu sắc trong trang web

Sử dụng trang web có sẵn tại:

Thực hiện phối lại màu theo cách sử dụng màu đơn tông trong bảng màu.

Các bước thực hiện- sử dụng màu sắc trong trang web

Bước 1: Xác định màu chính trên trang web theo màu xanh logo (#00ADEE) làm màu bậc 1. Từ màu chính giảm dần độ nhạt màu xuống theo bảng màu sau:

màu sắc trong trang web

Bước 2: Thay đổi màu nền

Màu nền chuyển thành màu bậc 4 (#00BFF2)

Màu chữ giữ nguyên màu trắng hoặc đổi sang màu đen.

Bước 3: Thay đổi màu nền phần ON SALE/PREVIEW

màu sắc trong trang web

Chuyển màu nền đỏ theo tông màu bậc 1 (#00ADEE) hoặc có thể màu bậc 2 (00B2EF) để tạo điểm nổi bật.

Bước 4: Đổi màu nên phần nội dung

màu sắc trong trang web

Màu nền hồng chuyển thành màu bậc 7 (8DD7F7)

Màu chữ giữ màu đen hoặc chuyển thành màu trắng. Nên giữ màu đen để vì nền bậc 7 khá nhạt.

Bước 5: Đổi màu nền phần footer

màu sắc trong trang web

Vẫn có thể giữ nguyên tông màu này vì vẫn tạo được sự kết hợp giữa gam màu xám trắng với tông màu bậc 1. Hoặc có thể thay đổi màu nền thành màu bậc 9 (#C6E9FA) vẫn tạo độ sáng cho trang.

Bước 6: Giữ nguyên màu chữ cho toàn bộ trang là màu đen.

Bước 7: Chạy lại file .html xem kết quả.

Bước 8: Hãy sử dụng bảng màu để tạo ra danh sách màu đơn tông khác, và thực hiện phối màu như trên để tạo ra được một trang web khác với màu sắc khác.

Kết luận

Vậy trong phần này CodeGym đã hướng dẫn bạn đã luyện tập cách phối màu đơn tông trên trang web.

  • Xác định màu chủ đạo cho trang, và cấp độ màu khác nhạt dần theo màu chủ đạo.
  • Màu đen và trắng là hai màu kết hợp các phần trong trang web.

Download - Giáo trình thuật toán

8 + 10 =

Tags:

0 Lời bình

Gửi Lời bình

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

BÀI VIẾT LIÊN QUAN

BẠN MUỐN HỌC LẬP TRÌNH?

GỌI NGAY

098 953 44 58

Đăng ký tư vấn lộ trình học lập trình

Đăng ký tư vấn, định hướng lộ trình học và giải đáp các thắc mắc về ngành nghề – Miễn phí – Online.

13 + 3 =

TƯ VẤN VỀ LỘ TRÌNH HỌC NGHỀ LẬP TRÌNH TẠI CODEGYM
TƯ VẤN VỀ LỘ TRÌNH HỌC NGHỀ LẬP TRÌNH TẠI CODEGYM