30 bảng phối màu đẹp có mã HEX cho poster, website, slide

30 bảng phối màu đẹp do ColorME tự phối, mỗi bảng 5 mã HEX: 10 cho poster, 10 cho website và app, 10 cho slide; gợi ý dùng, liên kết mở trong Bánh xe màu để chỉnh, xuất CSS, ASE và kiểm tra độ tương phản.

Bảng phối màu đẹp là bộ 4 đến 6 màu đã chọn sẵn để đi cùng nhau, thường gồm một màu đậm cho chữ, một màu sáng làm nền và vài màu nhấn. Dưới đây là 30 bảng phối màu do ColorME tự phối, chia theo poster, website và slide, mỗi bảng 5 mã HEX, có gợi ý dùng và một liên kết mở thẳng trong công cụ Bánh xe màu để chỉnh tiếp.

Cả 30 bảng đã được mở lại trong công cụ ngày 19/10/2026 để đối chiếu mã HEX, và tỉ lệ tương phản giữa màu đậm nhất với màu sáng nhất của mỗi bảng đều trên 4,5:1, đủ cho chữ thường theo chuẩn WCAG.

Cách dùng một bảng 5 màu

Mỗi bảng trong bài xếp từ màu đậm đến màu sáng hoặc màu nhấn. Một cách chia dễ áp dụng là quy tắc 60-30-10: khoảng 60% diện tích cho màu nền (thường là màu sáng nhất), 30% cho màu phụ, 10% cho màu nhấn ở nút bấm, tiêu đề hay điểm cần chú ý. Màu đậm nhất dùng cho chữ.

• Nền: màu sáng nhất (ô cuối bảng), hoặc màu đậm nhất nếu làm thiết kế tối.
• Chữ: màu đậm nhất trên nền sáng, hoặc ngược lại.
• Nhấn: một màu rực nhất, dùng ít để không bị loạn.

10 bảng phối màu cho poster

10 bảng phối màu cho poster, mỗi bảng 5 mã HEX. Bảng màu do ColorME tự phối.

Poster cần gây chú ý từ xa, nên các bảng ở đây có độ tương phản mạnh và ít nhất một màu rực. Với poster in, hãy chuyển sang hệ CMYK và in thử vì màu rực trên màn hình thường bị nhạt khi in.

10 bảng phối màu cho website, app

10 bảng phối màu cho website và app, đều có màu nền gần trắng và màu chữ đậm.

Giao diện web cần nhiều màu trung tính cho nền, viền, chữ phụ và chỉ một hai màu thương hiệu. Các bảng ở đây đều có một màu gần trắng làm nền và một màu rất đậm cho chữ, riêng Dark mode chanh dùng cho giao diện tối với màu xanh chanh làm điểm nhấn.

10 bảng phối màu cho slide thuyết trình

10 bảng phối màu cho slide thuyết trình, màu dịu và dễ đọc khi chiếu.

Slide được chiếu lâu trên máy chiếu, nên chọn nền sáng, màu nhấn dịu và tránh dùng quá ba màu trên một slide. Nếu làm slide trong PowerPoint, bạn có thể đưa các mã HEX này vào mục màu tuỳ chỉnh của theme.

Áp dụng thử: cùng bảng màu, ba kiểu thiết kế

Poster, website và slide mẫu dùng đúng mã HEX trong bài. Thiết kế do ColorME tự dựng, tên và số liệu là giả định.

Ba mẫu trong ảnh dùng đúng mã HEX của bảng Hoàng hôn Sài Gòn (poster), SaaS xanh dương (web) và Báo cáo xanh navy (slide). Để ý cách mỗi mẫu chỉ dùng một màu nhấn chính: vòng tròn vàng trên poster, nút Dùng thử trên web, cột đậm nhất trên biểu đồ slide.

Mở và chỉnh bảng màu trong Bánh xe màu

Bảng Hoàng hôn Sài Gòn mở trong công cụ Bánh xe màu từ liên kết chia sẻ, kèm mục xuất CSS. Ảnh chụp màn hình thật, 19/10/2026.

1. Bấm "Mở" ở cột cuối của bảng màu bạn thích. Công cụ mở đúng 5 màu đó ở quy tắc Tuỳ chỉnh.
2. Bấm vào một ô màu để chỉnh, nhập mã HEX hoặc chuyển sang RGB, HSB, LAB, CMYK.
3. Bấm biểu tượng ổ khoá để giữ những màu đã ưng, rồi thử đổi các màu còn lại.
4. Muốn đổi cả bảng theo màu thương hiệu, chọn ô đó rồi bấm "Đặt làm màu gốc" và chọn một quy tắc phối màu.
5. Trong mục Xuất bảng màu, sao chép CSS, SCSS, Tailwind, JSON hoặc tải PNG, SVG, ASE (Adobe).

Theo phần câu hỏi của công cụ: "Hoàn toàn miễn phí và không cần đăng nhập. Mọi thao tác chạy ngay trên trình duyệt của bạn; nếu đã đăng nhập ColorME, ảnh PNG, SVG bạn tải về còn được lưu vào mục Lịch sử để dùng lại. Khi bạn tải PNG, ColorME nhận một bản ảnh bảng màu để theo dõi cách công cụ được dùng." Với file ASE, công cụ hướng dẫn: trong Photoshop mở bảng Swatches, chọn Import Swatches; trong Illustrator dùng Open Swatch Library > Other Library.

Kiểm tra độ tương phản trước khi dùng

Kiểm tra độ tương phản: công cụ báo 13.30:1 cho chữ #2B193D trên nền #F7E8D0. Ảnh chụp màn hình thật, 19/10/2026.

Mục Độ tương phản trong công cụ cho chọn màu chữ và màu nền, báo tỉ lệ và đạt mức WCAG nào. Với bảng Hoàng hôn Sài Gòn, chữ #2B193D trên nền #F7E8D0 đạt 13.30:1, qua cả AA và AAA cho chữ thường. Công cụ khuyên chữ nội dung nên đạt tối thiểu 4.5:1.

Lưu ý quan trọng: màu nhấn sáng như vàng, cam, xanh nhạt gần như không bao giờ đủ tương phản để làm chữ nhỏ trên nền trắng. Ví dụ #FFB703 (vàng trong bảng Biển mùa hè) trên nền trắng chỉ khoảng 1,75:1. Dùng các màu này cho mảng màu, hình minh hoạ hoặc nền nút có chữ đậm màu tối. Muốn soát kỹ hơn, dùng công cụ kiểm tra tương phản màu.

Muốn tự phối màu: chọn quy tắc nào?

Công cụ Bánh xe màu có 8 lựa chọn: tương đồng, đơn sắc, bộ ba, bổ sung, bổ sung chia tách, ghép đôi, sắc độ và tuỳ chỉnh. Cách chọn nhanh:

• Đơn sắc, sắc độ: an toàn nhất cho web và slide, như bảng SaaS xanh dương hay Báo cáo xanh navy.
• Tương đồng: các màu cạnh nhau trên bánh xe, êm và hài hoà, như Mùa thu.
• Bổ sung, bổ sung chia tách: tương phản mạnh, hợp poster, như Biển mùa hè (xanh và cam).
• Bộ ba: sinh động, cần chọn một màu làm chủ đạo, như Bauhaus.

Muốn hiểu kỹ về vòng tròn màu, đọc bài phối màu online bằng bánh xe màu và 6 nguyên tắc phối màu cơ bản. Nếu bạn cần bảng màu theo một màu cụ thể, xem thêm bảng màu pastel. Phối màu là kỹ năng luyện qua dự án thật; khoá Photoshop và khoá Illustrator của ColorME đều có phần sắp xếp hình, chữ và phối màu cho ấn phẩm.

Câu hỏi thường gặp

Bảng phối màu đẹp gồm mấy màu là đủ?

Thường 4 đến 6 màu: một màu đậm cho chữ, một màu sáng làm nền, một màu phụ và một hai màu nhấn. Các bảng trong bài đều có 5 màu.

Mã HEX là gì?

Là cách ghi màu bằng 6 ký tự sau dấu #, ví dụ #2B193D, dùng trong web, Figma, Photoshop, Canva và hầu hết phần mềm thiết kế.

Có dùng các bảng màu này cho dự án thương mại được không?

Được. Các bảng màu do ColorME tự phối và chia sẻ để bạn dùng cho poster, website, slide của mình hoặc của khách hàng.

Làm sao đưa bảng màu vào Photoshop, Illustrator?

Mở bảng màu trong công cụ Bánh xe màu, bấm tải ASE (Adobe). Trong Photoshop vào bảng Swatches, chọn Import Swatches; trong Illustrator dùng Open Swatch Library rồi Other Library.

Vì sao chữ màu vàng trên nền trắng khó đọc?

Vì độ tương phản quá thấp. Ví dụ vàng #FFB703 trên nền trắng chỉ khoảng 1,75:1, trong khi chữ nội dung nên đạt tối thiểu 4,5:1. Hãy dùng vàng làm mảng màu và đặt chữ màu tối lên trên.