Bảng màu pastel: 40 mã màu HEX đẹp và 10 bộ phối sẵn

Bảng màu pastel 40 mã HEX đẹp chia theo hồng, vàng, xanh lá, xanh dương, tím, kèm 10 bộ phối sẵn có màu chữ và tỉ lệ tương phản WCAG.

Trả lời nhanh: Màu pastel là màu rất sáng nhưng ít "rực": độ sáng cao, độ bão hoà (độ thuần sắc) thấp đến vừa, nên nhìn dịu như phấn vẽ. Bảng màu pastel dưới đây có 40 mã HEX do ColorME tự sinh theo một quy tắc cố định, chia theo họ hồng, vàng, xanh lá, xanh dương, tím, kèm 10 bộ phối sẵn cho thiệp cưới, đồ em bé, mỹ phẩm, menu, Tết. Quy tắc quan trọng nhất: nền pastel phải đi với chữ đậm, gần như không bao giờ là chữ trắng.

40 mã màu pastel HEX chia theo 5 họ màu.

Cột cuối là tỉ lệ tương phản tính theo công thức của WCAG 2.2; chữ thường cần ít nhất 4.5:1. Cách tính và lý do chữ trắng "chìm" trên nền pastel nằm ở phần tương phản.

Màu pastel là gì? Hiểu bằng HSL và OKLCH

Tên "pastel" lấy từ phấn màu pastel, loại sáp phấn làm từ bột màu và chất kết dính; thỏi phấn xưa kém rực (độ bão hoà thấp hơn) so với sơn cùng chất màu, nên cả họ màu dịu được gọi theo tên ấy (Wikipedia: Pastel (color)). Cũng theo trang này, không có danh sách mã HEX "chính thức" nào cho màu pastel: mỗi bảng màu bạn thấy trên mạng là lựa chọn của người làm ra nó, kể cả bảng trong bài này.

Để nói chính xác, mình dùng hai hệ màu trong đặc tả CSS Color Module Level 4 của W3C:

• HSL (hue, saturation, lightness): hue là góc trên vòng màu (0° là đỏ, 120° là xanh lá, 240° là xanh dương); saturation 0% là xám, 100% là màu thuần; lightness 0% là đen, 50% là màu "bình thường", 100% là trắng (W3C CSS Color 4, mục HSL). Chính đặc tả dùng ví dụ hsl(120deg 75% 85%) và gọi nó là "pastel green": lightness cao, saturation dưới mức tối đa (ví dụ HSL trong CSS Color 4).
• OKLCH (lightness, chroma, hue): L là độ sáng từ 0 đến 1, C là độ thuần sắc (0 là xám, trên thực tế không vượt quá 0.5), H là góc màu (W3C CSS Color 4, mục oklch()).

Nói bằng lời thường: màu pastel = độ sáng cao + độ thuần sắc thấp đến vừa. Trong HSL, các màu pastel của bài nằm ở lightness 72% đến 95%. Trong OKLCH, chúng nằm ở L 0.86 đến 0.93 và C không quá 0.08.

Vì sao sinh màu bằng OKLCH? CSS Color 4 chỉ ra nhược điểm của HSL: đổi hue thì độ sáng nhìn thấy đổi theo. Xanh dương thuần và vàng thuần cùng lightness 50% trong HSL, nhưng trong OKLCH có L là 0.452 và 0.968, đúng với mắt nhìn. Thêm một điểm: #FFDEE7 (Hồng sữa) có saturation HSL 100% dù nhìn rất nhạt; ở vùng gần trắng, chroma OKLCH (0.038) phản ánh độ "dịu" đúng hơn.

Cùng lightness trong HSL nhưng độ sáng nhìn thấy khác nhau; OKLCH đo đúng hơn.

Hue, saturation, chroma được giải thích kỹ ở bài các thuật ngữ màu sắc; cách đọc mã HEX ở bài mã màu hex là gì.

Cách ColorME tạo 40 mã màu pastel trong bài

Thay vì chọn màu bằng cảm giác, mình sinh cả bảng bằng một quy tắc để các màu "đồng đều" với nhau:

1. Chia vòng màu OKLCH thành 20 sắc độ, cách nhau 18° (0°, 18°, 36° … 342°).
2. Mỗi sắc độ lấy hai tầng: tầng nhạt L = 0.93, chroma tối đa 0.045 (màu "sữa", hợp làm nền lớn); tầng đậm hơn L = 0.86, chroma tối đa 0.08 (màu "phấn", hợp làm mảng nhấn, nút, hình minh hoạ).
3. Ở các sắc độ hồng, đào, cam mơ, xanh dương và tím, màu ở chroma tối đa nằm ngoài vùng màu sRGB của màn hình thường; khi đó mình giữ nguyên L và hue, chỉ giảm chroma đến khi màu vừa vào sRGB, rồi làm tròn ra mã HEX.
4. Kiểm tra ngược: đổi từng mã HEX trở lại OKLCH, xác nhận L lệch không quá 0.006 so với tầng, chroma trong khoảng 0.030 đến 0.085, hue lệch không quá 3°. Cả 40 mã đều đạt.

Cùng độ sáng nên các màu trong một tầng đặt cạnh nhau không màu nào "lồi" lên; đổi lại, chúng không làm chữ cho nhau được.

Bảng 40 mã màu pastel HEX theo họ màu

Mỗi họ 8 màu, xếp từng cặp: màu tầng nhạt rồi màu tầng đậm hơn cùng sắc độ. Cột HSL và OKLCH dán thẳng được vào CSS; tên màu do mình đặt cho dễ nhớ.

Màu hồng pastel và hồng đào

Một trong các họ được tìm nhiều nhất ("bảng màu hồng pastel", "hồng pastel mã màu"). Hồng sữa và Đào sữa đủ nhạt để làm nền cả trang; Hồng phấn và Hồng kẹo bông hợp làm mảng nhấn.

Muốn thêm các sắc hồng đất, hồng cánh sen và ý nghĩa của màu hồng, xem bài màu hồng: bảng mã màu và cách phối.

Màu cam pastel và vàng pastel

Đây là họ ấm, gần màu giấy và bánh. Be kem và Vàng kem thay được màu trắng cho nền thiệp, menu mà vẫn sạch; Xanh cốm đứng ở ranh giới vàng và xanh lá.

Màu xanh lá pastel và xanh bạc hà

Xanh bạc hà (mint) là một trong những màu pastel quen thuộc nhất; Wikipedia liệt kê mint green, peach, lavender, baby blue vào nhóm pastel thường dùng.

Họ hồng, cam và vàng, xanh lá: tên, HEX và OKLCH từng màu.

Màu xanh dương pastel

Ở họ này, mình phải giảm chroma của Xanh baby nhạt, Xanh dương sữa và Xanh dương phấn để màu nằm trong sRGB (xem bước 3 ở trên), nên chúng dịu hơn một chút so với Xanh baby.

Các sắc xanh đậm hơn và xanh lá rừng, xanh rêu có trong bài màu xanh: bảng mã màu xanh dương, xanh lá.

Màu tím pastel

Từ xanh dừa cạn (hơi ngả xanh) đến tím phong lan (hơi ngả hồng). Oải hương sữa là nền rất "sạch" cho sổ tay và portfolio.

Họ xanh dương và tím: tên, HEX và OKLCH từng màu.

Vì sao nền pastel cần chữ đậm: tính tương phản theo WCAG

WCAG 2.2 của W3C đo độ dễ đọc bằng tỉ lệ tương phản = (L1 + 0.05) / (L2 + 0.05), trong đó L1 là độ chói tương đối (relative luminance) của màu sáng hơn, L2 của màu tối hơn; tỉ lệ đi từ 1:1 đến 21:1 (WCAG 2.2: contrast ratio). Độ chói tương đối tính từ R, G, B sau khi bỏ gamma, theo công thức 0.2126 R + 0.7152 G + 0.0722 B (WCAG 2.2: relative luminance). Tiêu chí 1.4.3 (mức AA) yêu cầu chữ thường đạt ít nhất 4.5:1, chữ lớn ít nhất 3:1; chữ lớn là từ 18 point, hoặc 14 point đậm (WCAG 2.2: 1.4.3 Contrast (Minimum)). Mức AAA là 7:1, như trang kiểm tra tương phản của ColorME ghi: "chữ thường cần tối thiểu 4.5:1 để đạt AA và 7:1 để đạt AAA".

Mình tính bằng đúng công thức đó cho cả 40 màu: chữ trắng chỉ đạt 1.20:1 đến 1.57:1, không màu nào đủ cho chữ trắng, kể cả chữ lớn.

Bảy cặp chữ và nền từ bảng tương phản, đúng màu và đúng tỉ lệ.

Mọi tỉ lệ trong bài được làm tròn xuống ở chữ số thứ hai. Ba điều rút ra:

• Chữ trên nền pastel phải đậm: đen ấm, nâu đậm, xanh than, tím than. Cách mình làm trong 10 bộ phối: lấy một sắc độ trùng hoặc gần sắc độ của nền, hạ OKLCH L xuống khoảng 0.24 đến 0.30. Chữ vẫn "cùng họ" với nền nên trông mềm hơn chữ đen thuần.
• Hai màu pastel không làm chữ cho nhau: hồng phấn trên xanh baby nhạt chỉ 1.29:1.
• Chữ xám nhạt dễ trượt chuẩn: #767676 đạt AA trên nền trắng nhưng chỉ còn 3.64:1 trên Hồng sữa. Chữ phụ trên nền pastel nên đậm hơn chữ phụ trên nền trắng.

Cách dùng công cụ kiểm tra từng bước có trong bài kiểm tra độ tương phản màu chữ và nền.

10 bộ phối màu pastel dùng ngay

Mỗi bộ gồm 1 màu nền, 3 màu đi kèm (tên màu ở các mục bên dưới) và 1 màu chữ. Tỉ lệ là của chữ trên nền, theo công thức WCAG 2.2 ở trên: cả 10 bộ đều trên 7:1 (đạt AAA cho chữ thường), và chữ đặt trên màu đi kèm nào cũng không dưới 8:1.

10 bộ phối: màu nền, ba màu đi kèm, màu chữ và tỉ lệ.

1. Đám cưới

Hồng sữa làm nền thiệp, hồng phấn cho hoa hoặc khung tên, xanh lá sữa cho lá, be kem cho phong bì. Chữ đỏ rượu sẫm ấm hơn chữ đen.

2. Đồ em bé

Xanh baby nhạt với vàng kem cho thiệp đầy tháng, nhãn quần áo sơ sinh; hồng san hô là điểm ấm nhỏ. Chữ xanh than đủ đậm cho cả chữ ghi cỡ, chất liệu.

Bộ đám cưới và bộ đồ em bé trên thiệp, nhãn mẫu.

3. Mỹ phẩm, skincare

Bạc hà sữa gợi cảm giác sạch, mát; hồng đào và tím phong lan phân biệt từng dòng sản phẩm. Bảng thành phần dùng chữ xanh lục sẫm, cỡ không quá nhỏ.

4. Menu quán cà phê, tiệm bánh

Be kem như màu giấy, cam mơ cho món nổi bật, xanh lá non cho món theo mùa. Chữ nâu cà phê đọc tốt cả ở bảng menu treo xa.

Bộ mỹ phẩm và bộ menu tiệm bánh trên hộp, menu mẫu.

5. Sale mùa xuân

Nền vàng chanh sữa; hồng san hô cho nhãn giảm giá, xanh lá phấn cho "hàng mới về". Muốn nhãn nổi hơn, tăng diện tích chứ đừng tăng độ rực.

6. Lớp học trẻ em

Vàng rơm, hồng san hô, tím oải hương khác hẳn nhau nên làm màu nhóm hay thẻ tên được. WCAG 2.2 yêu cầu màu không phải là cách duy nhất để truyền thông tin (tiêu chí 1.4.1), nên ghi thêm chữ hoặc biểu tượng cạnh màu nhóm; bài mô phỏng mù màu giúp bạn xem thử.

Sale mùa xuân và lớp học trẻ em: màu nhóm luôn kèm chữ, biểu tượng.

7. Journaling, sổ tay

Oải hương sữa làm nền trang, xanh dừa cạn cho tiêu đề tuần, hồng kẹo bông đánh dấu việc quan trọng, xanh ngọc sữa cho ô thói quen.

8. Bài đăng mạng xã hội

Nền Hồng phấn (tầng đậm hơn) để bài nổi trong bảng tin; màu trắng chỉ dùng cho khung ảnh hay thẻ chữ, không dùng làm màu chữ.

Trang sổ tay theo tuần và bài đăng vuông trên nền hồng phấn.

9. Portfolio cá nhân

Nền và hai màu phụ ở tầng nhạt, chữ gần đen để tác phẩm nói chuyện; tím lilac (tầng đậm hơn) là màu nhấn duy nhất, cho số dự án hoặc đường link.

10. Tết pastel

Đào sữa và hồng đào gợi hoa đào, vàng rơm gợi hoa mai, xanh lá non cho lộc non. Chữ đỏ nâu giữ không khí Tết mà vẫn đạt AAA.

Trang portfolio và nhãn hũ mứt Tết với bộ màu của bài.

Tự tạo bảng màu pastel bằng công cụ của ColorME

Khi cần màu riêng cho thương hiệu, bạn tự làm theo cùng nguyên tắc (sáng cao, thuần sắc vừa phải, chữ đậm):

1. Chọn sắc độ và quy tắc phối ở Bánh xe màu. Trang công cụ ghi: "Công cụ này tạo nhanh bảng 5 màu hài hoà cho logo, poster, giao diện web hay bộ nhận diện thương hiệu", với "8 lựa chọn: tương đồng, đơn sắc, bộ ba, bổ sung, bổ sung chia tách, ghép đôi (hai cặp màu bổ sung), sắc độ (cùng màu khác độ sáng) và tuỳ chỉnh để kéo từng chấm tự do". Nhập một mã pastel trong bài làm màu gốc rồi giữ các màu ra ở vùng sáng.
2. Kiểm tra chữ ngay trên bảng màu: bánh xe màu có khung "Kiểm tra độ tương phản Chuẩn WCAG 2.1"; công thức tỉ lệ của WCAG 2.1 và 2.2 là một.
3. Tạo dải sáng tối từ một màu ở Thang màu & design token: theo trang công cụ, nó tạo "11 bậc từ 50 đến 950 theo chuẩn OKLCH". Thường thì các bậc sáng (số nhỏ) là chỗ tìm màu nền pastel, các bậc tối (số lớn) cho màu chữ cùng họ; nhớ so độ sáng với bảng 40 màu ở trên; hướng dẫn có ở bài tạo thang màu 50–950.
4. Lấy màu pastel từ ảnh bạn thích (ảnh hoa, bánh, vải) bằng Trích xuất bảng màu: trang ghi công cụ cho "bảng màu chủ đạo, mã HEX, RGB, HSL", rồi bạn so độ sáng với bảng 40 màu ở trên.
5. Vẽ tay bằng màu nước, acrylic? Màu pastel trên giấy được pha bằng cách thêm trắng; Bảng pha màu ghi: "Màu bất kỳ + trắng ra màu nhạt hơn (màu pastel)", và nói rõ đây "chỉ là mô phỏng trên màn hình". Cách pha từng cặp màu có trong bài bảng pha màu: trộn màu gì ra màu gì.

Bánh xe màu ColorME: gốc xanh bạc hà, quy tắc sắc độ, tương phản 7.03:1.

Trang Bánh xe màu ghi: "Hoàn toàn miễn phí và không cần đăng nhập." Muốn hiểu các quy tắc phối trước khi bấm, đọc bài vòng tròn màu sắc 12 màu.

Lỗi hay gặp khi dùng màu pastel

• Toàn bộ thiết kế đều pastel, không có điểm neo. Cả trang cùng độ sáng nên mắt không biết nhìn đâu trước; cần ít nhất một màu đậm (thường là màu chữ) và một mảng nhấn ở tầng đậm hơn.
• Chữ trắng trên nền pastel. Như bảng tương phản ở trên, không màu nào trong 40 màu đạt dù chỉ 3:1 với chữ trắng.
• Đường kẻ mảnh, icon nhỏ bằng màu pastel trên nền trắng. Chúng gần như biến mất. Đường mảnh nên dùng màu chữ hoặc màu tầng đậm hơn hạ thêm độ sáng.
• Trộn quá nhiều họ màu. Thường 3 đến 4 màu là đủ, như các bộ ở trên. Màu cơ bản, màu bậc hai là gì thì xem bài 24 màu cơ bản.
• Kỳ vọng màu in ra giống hệt màn hình. Mã HEX là màu màn hình (sRGB); màu in còn phụ thuộc giấy và mực, như trang Kiểm tra tương phản lưu ý "hãy in thử". Màu pastel nhạt lệch một chút cũng dễ thấy.
• Lấy mã HEX đi chọn sơn tường. Màu sơn pastel trên tường còn đổi theo ánh sáng phòng và chất sơn; mã HEX chỉ dùng để tham khảo hướng màu, còn chọn sơn thì nên xem mẫu thật của hãng sơn ở nơi sẽ sơn.

Muốn đọc thêm về lịch sử và cảm xúc của gam pastel (từng là trào lưu thời trang nam những năm 1980), xem bài cũ gam màu pastel và những điều bạn có thể chưa biết.

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

Mã màu pastel là gì?

Là mã HEX (hoặc RGB, HSL) của một màu pastel, ví dụ Hồng phấn #FEBCCF, Xanh bạc hà #A1E2C1. Không có bộ mã "chuẩn" chung; 40 mã trong bài do ColorME sinh theo quy tắc OKLCH đã nêu và kiểm tra lại từng mã.

Màu pastel có phải chỉ là màu nhạt?

Gần đúng, nhưng chưa đủ. Pastel là màu sáng và ít thuần sắc. Một màu sáng nhưng rất rực như vàng chanh thuần #FFFF00 (OKLCH L 0.968, chroma 0.211) không được xem là pastel.

Màu chữ nào hợp với nền pastel?

Màu đậm cùng họ với nền (nâu đậm trên be kem, xanh than trên xanh baby, tím than trên oải hương) hoặc gần đen như #121212. Kiểm tra để chữ thường đạt ít nhất 4.5:1.

Dùng mã màu pastel trong CSS, Figma, Canva thế nào?

Dán mã HEX vào ô màu. Trong CSS, bạn có thể dùng thẳng cột OKLCH, ví dụ oklch(0.93 0.045 162); đặc tả CSS Color 4 định nghĩa hàm oklch(). Cần đổi qua lại HEX, RGB, CMYK, HSL thì dùng bài đổi mã màu HEX sang RGB, CMYK, HSL.