Lưu ý: Bạn hãy đăng ký thông báo đẩy (push notification). Để không bỏ lỡ thông báo ngon từ Clickweb.vn.

Mã màu trong thiết kế website

Tác giả: Thạch Nguyễn + Theo dõi Quan tâm OA Nhắn tin

21/07/2024 Lượt xem : 4011

Theo dõi Clickweb trên

Nội dung bài viết Bấm để xem

Mã màu trong thiết kế website giúp chọn màu đẹp, dễ đọc, đúng nhận diện thương hiệu và tối ưu trải nghiệm người xem

Mã màu trong thiết kế website: bảng màu HTML, CSS và RGB

Mã màu trong thiết kế website là cách quy định màu sắc bằng mã HEX, RGB hoặc tên màu để giao diện hiển thị đồng nhất trên trình duyệt. Khi chọn đúng mã màu, website sẽ dễ nhìn, chữ dễ đọc và hình ảnh thương hiệu cũng nhất quán hơn.

Nội dung dưới đây giúp Anh/Chị hiểu cách đọc mã màu, tra cứu các bảng màu phổ biến, lựa chọn màu theo ngành và kiểm tra độ tương phản trước khi áp dụng vào website.

Mã màu trong thiết kế website là gì?

Mã màu trong thiết kế website là ký hiệu giúp trình duyệt hiểu chính xác màu nào cần hiển thị cho chữ, nền, nút bấm, đường viền, banner, menu hoặc các phần nổi bật trên website. Nhờ mã màu, cùng một màu thương hiệu có thể được dùng thống nhất từ trang chủ, trang dịch vụ, bài viết, landing page đến các nút liên hệ.

Ví dụ, màu vàng nhận diện của Clickweb có thể dùng mã #ffc20b. Khi đặt cùng một mã này cho nút CTA, nhãn nổi bật hoặc icon quan trọng, người xem sẽ dễ nhận ra phong cách thương hiệu hơn.

Nếu Anh/Chị đang chuẩn bị làm website, bảng mã màu sẽ giúp việc trao đổi với bên thiết kế rõ hơn. Thay vì nói “màu vàng hơi tươi”, “màu xanh nhẹ”, “màu đỏ đậm”, Anh/Chị có thể gửi thẳng mã màu để tránh lệch màu khi chỉnh sửa.

Vì sao màu sắc ảnh hưởng mạnh đến cảm nhận của khách hàng?

Tạo ấn tượng đầu tiên

Khách thường nhìn tổng thể giao diện trước khi đọc kỹ nội dung. Màu sắc hài hòa giúp website trông chỉn chu và đáng tin hơn ngay từ vài giây đầu.

Giúp khách dễ đọc

Nền và chữ cần đủ tương phản. Nếu chữ xám quá nhạt, nền quá chói hoặc nút quá chìm, khách sẽ khó đọc, nhất là trên điện thoại.

Dẫn hướng hành động

Màu nút đặt lịch, gọi tư vấn, nhắn Zalo hoặc xem báo giá nên nổi bật hơn phần thông tin thường để người xem biết bước tiếp theo là gì.

Các dạng mã màu thường gặp: HEX, RGB và tên màu

Dạng mã màu	Ví dụ	Dùng khi nào?
HEX	#ffc20b, #111827, #ffffff	Dùng rất phổ biến trong thiết kế web, dễ gửi cho designer/dev và dễ giữ màu thương hiệu.
RGB	rgb(255,194,11)	Dễ hiểu theo 3 kênh đỏ, xanh lá, xanh dương; phù hợp khi cần chỉnh độ trong suốt hoặc chuyển đổi từ phần mềm thiết kế.
Tên màu	black, white, red, blue	Dễ nhớ nhưng ít linh hoạt hơn. Phù hợp khi ghi chú nhanh hoặc dùng màu cơ bản.

Bảng mã màu HTML, CSS, RGB cơ bản

Dưới đây là bảng mã màu cơ bản để Anh/Chị dễ copy khi cần chỉnh màu chữ, màu nền, nút bấm hoặc các phần nổi bật trên website.

Màu	HTML / CSS Name	Hex Code	RGB
Black	black	#000000	(0,0,0)
White	white	#FFFFFF	(255,255,255)
Red	red	#FF0000	(255,0,0)
Lime	lime	#00FF00	(0,255,0)
Blue	blue	#0000FF	(0,0,255)
Yellow	yellow	#FFFF00	(255,255,0)
Cyan / Aqua	cyan / aqua	#00FFFF	(0,255,255)
Magenta / Fuchsia	magenta / fuchsia	#FF00FF	(255,0,255)
Silver	silver	#C0C0C0	(192,192,192)
Gray	gray	#808080	(128,128,128)
Maroon	maroon	#800000	(128,0,0)
Olive	olive	#808000	(128,128,0)
Green	green	#008000	(0,128,0)
Purple	purple	#800080	(128,0,128)
Teal	teal	#008080	(0,128,128)
Navy	navy	#000080	(0,0,128)

Nên chọn mã màu website theo ngành như thế nào?

Không có một màu nào phù hợp cho mọi website. Mỗi ngành nên chọn màu theo cảm xúc khách hàng, mức độ tin cậy cần truyền tải và hành động chính muốn khách thực hiện.

Ngành / website	Màu nên cân nhắc	Gợi ý áp dụng
Doanh nghiệp dịch vụ	Xanh dương, xanh đậm, trắng, vàng nhấn	Dùng nền sáng, chữ đậm, nút CTA nổi bật để tạo cảm giác tin cậy và dễ liên hệ.
Nhà hàng, quán cafe	Nâu, kem, cam, đỏ trầm, xanh lá	Nên dùng màu ấm vừa phải, hình ảnh món ăn rõ, nút đặt bàn dễ nhìn.
Spa, làm đẹp	Hồng nhạt, be, trắng, xanh mint, tím nhẹ	Ưu tiên cảm giác sạch, thư giãn, cao cấp; tránh màu quá chói làm mất sự nhẹ nhàng.
Bất động sản	Xanh đậm, vàng kim, trắng, đen, ghi	Nên tạo cảm giác sang, chắc chắn, nhiều khoảng trắng để hình ảnh dự án nổi bật.
Giáo dục	Xanh dương, xanh lá, vàng, trắng	Cần thân thiện, rõ thông tin, dễ đăng ký tư vấn hoặc học thử.
Website bán hàng	Đỏ, cam, vàng, xanh, đen/trắng tùy sản phẩm	Màu nút mua hàng, giỏ hàng, ưu đãi cần nổi bật nhưng không làm rối mắt.

Một số bảng màu gợi ý cho website doanh nghiệp

Chuyên nghiệp, rõ CTA

#0f172a / #ffffff / #ffc20b — phù hợp website dịch vụ, công ty, tư vấn, thiết kế web.

Tin cậy, tự nhiên

#064e3b / #ecfdf5 / #f59e0b — hợp nông sản, sức khỏe, giáo dục, dịch vụ gia đình.

Mạnh mẽ, dễ nhận diện

#1e3a8a / #eff6ff / #ef4444 — hợp logistics, kỹ thuật, xe, điện máy, xây dựng.

Ấm áp, gần gũi

#7c2d12 / #fff7ed / #fb923c — hợp nhà hàng, cà phê, thực phẩm, du lịch trải nghiệm.

Mềm mại, làm đẹp

#831843 / #fdf2f8 / #db2777 — hợp spa, mỹ phẩm, thời trang, dịch vụ chăm sóc.

Sang trọng, tối giản

#111827 / #f9fafb / #d97706 — hợp bất động sản, nội thất, trang sức, dịch vụ cao cấp.

Cách chọn màu chữ và màu nền để website dễ đọc

Một website đẹp nhưng chữ khó đọc sẽ làm khách rời đi rất nhanh. Khi phối màu, Anh/Chị nên ưu tiên sự rõ ràng trước, sau đó mới đến hiệu ứng trang trí.

Nền sáng nên dùng chữ đậm như #111827, #1f2937 hoặc #000000.
Nền tối nên dùng chữ trắng hoặc vàng nhạt vừa phải, tránh chữ xám quá mờ.
Nút CTA nên nổi bật hơn nền xung quanh, nhưng chữ trên nút phải dễ đọc.
Không nên dùng quá nhiều màu mạnh trong cùng một màn hình.
Với nội dung dài, nền trắng hoặc nền rất nhạt vẫn là lựa chọn dễ đọc nhất.

Bảng mã màu RGB đỏ

Color	HTML / CSS Name	RGB
Light Salmon	lightsalmon	(255,160,122)
Salmon	salmon	(250,128,114)
Dark Salmon	darksalmon	(233,150,122)
Light Coral	lightcoral	(240,128,128)
Indian Red	indianred	(205,92,92)
Crimson	crimson	(220,20,60)
Fire Brick	firebrick	(178,34,34)
Red	red	(255,0,0)
Dark Red	darkred	(139,0,0)

Bảng mã màu RGB nâu

Color	HTML / CSS Name	RGB
Cornsilk	cornsilk	(255,248,220)
Bisque	bisque	(255,228,196)
Wheat	wheat	(245,222,179)
Burlywood	burlywood	(222,184,135)
Sandy Brown	sandybrown	(244,164,96)
Goldenrod	goldenrod	(218,165,32)
Chocolate	chocolate	(210,105,30)
Saddle Brown	saddlebrown	(139,69,19)
Brown	brown	(165,42,42)

Bảng mã màu RGB xám và trắng

Màu xám và trắng thường dùng làm nền, chữ phụ, đường viền, khối thông tin và khoảng nghỉ thị giác. Đây là nhóm màu rất quan trọng nếu Anh/Chị muốn website nhìn sạch và chuyên nghiệp.

Color	HTML / CSS Name	RGB
Gainsboro	gainsboro	(220,220,220)
Light Gray	lightgray	(211,211,211)
Silver	silver	(192,192,192)
Gray	gray	(128,128,128)
Dim Gray	dimgray	(105,105,105)
Dark Slate Gray	darkslategray	(47,79,79)
White	white	(255,255,255)
Snow	snow	(255,250,250)
Alice Blue	aliceblue	(240,248,255)
Whitesmoke	whitesmoke	(245,245,245)
Ivory	ivory	(255,255,240)

Bảng mã màu RGB xanh lá và xanh lục

Color	HTML / CSS Name	RGB
Lawngreen	lawngreen	(124,252,0)
Chartreuse	chartreuse	(127,255,0)
Lime Green	limegreen	(50,205,50)
Forest Green	forestgreen	(34,139,34)
Green	green	(0,128,0)
Dark Green	darkgreen	(0,100,0)
Spring Green	springgreen	(0,255,127)
Pale Green	palegreen	(152,251,152)
Seagreen	seagreen	(46,139,87)
Cyan	cyan	(0,255,255)
Turquoise	turquoise	(64,224,208)
Teal	teal	(0,128,128)

Bảng mã màu RGB cam và vàng

Color	HTML / CSS Name	RGB
Coral	coral	(255,127,80)
Tomato	tomato	(255,99,71)
Orange Red	orangered	(255,69,0)
Gold	gold	(255,215,0)
Orange	orange	(255,165,0)
Dark Orange	darkorange	(255,140,0)
Light Yellow	lightyellow	(255,255,224)
Lemon Chiffon	lemonchiffon	(255,250,205)
Khaki	khaki	(240,230,140)
Yellow	yellow	(255,255,0)

Bảng mã màu RGB tím và xanh dương

Color	HTML / CSS Name	RGB
Lavender	lavender	(230,230,250)
Plum	plum	(221,160,221)
Violet	violet	(238,130,238)
Fuchsia	fuchsia	(255,0,255)
Medium Purple	mediumpurple	(147,112,219)
Purple	purple	(128,0,128)
Indigo	indigo	(75,0,130)
Powder Blue	powderblue	(176,224,230)
Sky Blue	skyblue	(135,206,235)
Dodger Blue	dodgerblue	(30,144,255)
Royal Blue	royalblue	(65,105,225)
Blue	blue	(0,0,255)
Navy	navy	(0,0,128)

Danh sách kiểm tra màu sắc trước khi làm website

1. Có màu chính chưa?
Màu chính thường lấy từ logo hoặc màu thương hiệu muốn khách ghi nhớ.

2. Có màu phụ chưa?
Màu phụ giúp chia khu vực, làm nền nhẹ hoặc tạo điểm nhấn vừa phải.

3. Nút CTA có nổi bật không?
Nút gọi điện, nhắn Zalo, đặt lịch, báo giá cần dễ thấy trên cả máy tính và điện thoại.

4. Chữ có dễ đọc không?
Đừng dùng chữ quá nhạt trên nền trắng hoặc chữ quá nhỏ trên nền ảnh.

5. Có quá nhiều màu không?
Website doanh nghiệp thường chỉ cần 3–5 màu chủ đạo là đủ gọn và dễ nhớ.

6. Có đồng bộ với hình ảnh không?
Màu website nên hợp logo, ảnh sản phẩm, banner và phong cách thương hiệu.

Những lỗi chọn màu website Anh/Chị nên tránh

Dùng màu quá chói cho nền dài

Màu mạnh chỉ nên dùng để nhấn. Nếu dùng làm nền cho cả đoạn dài, người đọc dễ mỏi mắt.

Nút liên hệ bị chìm

Khách đọc xong nhưng không thấy nút gọi, nhắn hoặc đăng ký thì website dễ mất cơ hội chuyển đổi.

Không kiểm tra trên điện thoại

Một màu nhìn đẹp trên máy tính có thể khó đọc trên màn hình nhỏ hoặc khi khách xem ngoài trời.

Anh/Chị đang phân vân website nên dùng màu nào?

Gửi logo, ngành nghề và phong cách mong muốn cho Clickweb. Đội ngũ Clickweb sẽ gợi ý màu chính, màu phụ, màu nút CTA và cách phối màu để giao diện rõ ràng, chuyên nghiệp hơn. Nếu cần triển khai một website mới, Anh/Chị có thể tham khảo dịch vụ thiết kế website tại Clickweb.

Anh/Chị cũng có thể xem thêm cách xây dựng giao diện website responsive để phối màu phù hợp trên cả máy tính và điện thoại.

Nhắn Zalo để được tư vấn

Câu hỏi thường gặp về mã màu trong thiết kế website

Mã màu HEX và RGB khác nhau thế nào?

HEX viết dạng #RRGGBB, ví dụ #ffc20b. RGB viết dạng rgb(R,G,B), ví dụ rgb(255,194,11). Cả hai đều có thể dùng trong thiết kế website, chỉ khác cách biểu diễn.

Website nên dùng bao nhiêu màu là vừa?

Thông thường nên có 1 màu chính, 1–2 màu phụ, màu nền, màu chữ và màu nút CTA. Dùng quá nhiều màu mạnh sẽ làm giao diện rối và khó nhớ.

Màu nút CTA nên chọn thế nào?

Nút CTA nên nổi bật so với nền, chữ trên nút phải dễ đọc và đồng bộ với thương hiệu. Ví dụ nền trắng có thể dùng nút vàng, cam, xanh hoặc đỏ tùy ngành.

Có nên dùng màu theo sở thích cá nhân không?

Có thể tham khảo sở thích cá nhân, nhưng website doanh nghiệp nên ưu tiên màu hợp ngành, dễ đọc, đúng logo và tạo cảm giác tin cậy với khách hàng mục tiêu.

Phản hồi Quay lại In bài này

Thạch Nguyễn Người sáng lập Clickweb

Website • SEO • Digital Marketing

Nguyễn Văn Thạch (Thạch Nguyễn) là người sáng lập Clickweb, có hơn 10 năm kinh nghiệm trong lĩnh vực thiết kế website và phát triển giải pháp online cho doanh nghiệp. Anh trực tiếp tham gia định hướng website, SEO, Google Ads, Facebook Ads và rà soát nội dung chuyên môn tại Clickweb.vn, hướng đến những giải pháp rõ mục tiêu, dễ vận hành và hỗ trợ kinh doanh lâu dài.