Bỏ qua, tới nội dung chính
Menu

Phương pháp và nguồn dữ liệu

Trang này ghi lại cách bangmamau.com tính ra mọi con số bạn thấy trên site và dữ liệu lấy từ đâu, để bạn tự kiểm tra lại được. Có ba loại cơ sở, và chúng tôi luôn tách bạch:

  • Tiêu chuẩn bên ngoài — công thức do W3C, WCAG hoặc tác giả gốc công bố. Chúng tôi làm đúng theo, không tự điều chỉnh.
  • Thuật toán do bangmamau.com lựa chọn — những chỗ không có chuẩn chung (thang sắc độ, pastel, pha màu vẽ, đặt tên màu gần nhất). Đây là cách làm của riêng chúng tôi, được mô tả kèm giới hạn.
  • Dữ liệu biên tập — tên màu tiếng Việt và mã màu thương hiệu, do chúng tôi tổng hợp và đối chiếu nguồn.

Mọi phép tính chạy ngay trên trình duyệt của bạn bằng cùng một bộ công thức; kết quả hiện sẵn khi tải trang (tính trên máy chủ) và kết quả sau khi bạn thao tác (tính trên trình duyệt) luôn trùng nhau.

Chuyển đổi mã màu

Theo W3C CSS Color Module Level 4 (tiêu chuẩn bên ngoài):

  • HEX ↔ RGB: mỗi cặp ký tự hệ 16 là một kênh 0–255. HEX 3/4 ký tự được mở rộng bằng cách nhân đôi từng ký tự; HEX 8 ký tự mang thêm độ trong suốt.
  • RGB ↔ HSL, HSB (HSV): công thức hình nón/hình trụ chuẩn; sắc độ làm tròn đến độ, bão hoà và độ sáng làm tròn đến phần trăm.
  • OKLCH: theo không gian Oklab của Björn Ottosson (2020), từ sRGB tuyến tính hoá (ngưỡng 0,04045). Khi đổi OKLCH về sRGB mà màu vượt gam màn hình thường, chúng tôi giữ nguyên độ sáng và sắc độ, giảm dần độ rực (tìm nhị phân) cho tới khi vừa gam — thay vì cắt từng kênh, vốn làm lệch sắc độ.
  • 148 tên màu CSS: đúng bảng từ khoá của chuẩn. Có 9 cặp tên trùng giá trị (aqua = cyan, fuchsia = magenta, 7 cặp gray/grey), nên 148 tên chỉ ứng với 139 màu.

CMYK trên site là quy đổi lý thuyết (thuật toán lựa chọn, vì CMYK thật phụ thuộc máy in): K = 1 − max(R, G, B)/255, rồi C = (1 − R/255 − K) / (1 − K), tương tự cho M và Y. Không áp dụng hồ sơ ICC, không tính giới hạn tổng mực — chỉ dùng để tham khảo, không thay thế bản in thử của nhà in.

Độ tương phản

Theo WCAG 2.2 (tiêu chuẩn bên ngoài):

  1. Tuyến tính hoá từng kênh: c ≤ 0,04045 ? c/12,92 : ((c + 0,055)/1,055)^2,4. Bản WCAG cũ ghi ngưỡng 0,03928; với màu 8 bit hai ngưỡng cho kết quả giống hệt nhau.
  2. Độ chói tương đối L = 0,2126 R + 0,7152 G + 0,0722 B.
  3. Tỉ lệ (L sáng + 0,05) / (L tối + 0,05), từ 1:1 đến 21:1.

Tỉ lệ được cắt (không làm tròn) còn hai chữ số thập phân, để một cặp màu 4,497:1 không bị báo nhầm là đạt 4,5:1. Ngưỡng dùng để kết luận: 4,5:1 (AA chữ thường), 3:1 (AA chữ lớn và thành phần giao diện), 7:1 (AAA). Màu có độ trong suốt được trộn với màu phía sau trước khi tính, vì đó mới là màu mắt người thấy.

Phối màu và pha màu

Góc xoay sắc độ (HSL) của từng quy tắc phối màu
Quy tắc Các màu (so với màu gốc)
Bổ túc 0°, 180°
Tương đồng −30°, 0°, +30°
Bộ ba 0°, 120°, 240°
Bổ túc xẻ 0°, 150°, 210°
Bộ bốn 0°, 90°, 180°, 270°

Công cụ pha màu có ba chế độ:

  • Kỹ thuật số — trung bình có trọng số trong sRGB, đúng bằng color-mix(in srgb, …) của CSS (tiêu chuẩn bên ngoài).
  • Ánh sáng — cộng các nguồn sáng trong không gian tuyến tính rồi cắt ở mức tối đa (vật lý cộng màu).
  • Màu vẽ — mô phỏng do chúng tôi xây dựng (thuật toán lựa chọn): tách phần trắng, trộn chất màu trong không gian RYB của hoạ sĩ, phần ba màu cơ bản triệt tiêu nhau thành “màu bùn” nâu, rồi đưa độ chói về trung bình nhân của các màu thành phần (chất màu trộn vào luôn tối đi). Đây không phải mô hình quang phổ của sơn thật; kết quả có thể khác loại màu bạn dùng.

Thang sắc độ, pastel và tên màu gần nhất

Ba công cụ dưới đây là thuật toán do bangmamau.com lựa chọn, đều làm việc trong OKLCH vì không gian này đều về độ sáng cảm nhận:

  • Thang 50–950 (trang Tailwind): màu gốc giữ nguyên ở bậc có độ sáng gần nó nhất; các bậc khác giữ sắc độ, đặt độ sáng OKLCH theo nhịp 0,975 · 0,945 · 0,89 · 0,82 · 0,725 · 0,635 · 0,55 · 0,47 · 0,395 · 0,325 · 0,24 và co giãn độ rực theo bậc neo. Nhịp này phỏng theo bảng màu Tailwind, không phải thuật toán của Tailwind.
  • Pastel: 6 mức độ sáng từ 0,95 xuống 0,82, độ rực giới hạn từ 0,035 đến 0,1 và không vượt độ rực của màu gốc (màu xám vẫn là xám).
  • Tên màu gần nhất: khoảng cách trong OKLCH có trọng số — độ sáng × 0,5, độ rực × 1,2, sắc độ × 2 — vì người ta gọi tên màu theo sắc độ trước rồi mới tới độ đậm nhạt. Đây là heuristic để đặt tên, không phải thước đo khác biệt màu chuẩn như ΔE2000.

Nguồn dữ liệu

Nguồn và phạm vi của từng bộ dữ liệu
Bộ dữ liệu Nguồn Ghi chú
148 tên màu CSS CSS Color 4 — Named colors 139 giá trị khác nhau
Tailwind CSS v4.3 theme.css của bản v4.3.3 26 họ × 11 bậc, giá trị oklch() gốc; HEX là quy đổi gần nhất về sRGB
Tailwind CSS v3.4 Tài liệu màu Tailwind v3 22 họ, mã HEX gốc
Material Design Bảng màu Material Design do Google công bố năm 2014 19 họ; là bảng màu đời cũ, không phải hệ màu động của Material 3
111 tên màu tiếng Việt Biên tập của bangmamau.com Tên gọi thông dụng trong thiết kế, thời trang, in ấn; một tên có thể ứng với nhiều sắc gần nhau, mã trên trang là giá trị đại diện phổ biến và có tên tiếng Anh đối chiếu
Mã màu thương hiệu Kênh chính thức của từng thương hiệu (đường dẫn ghi trên từng thẻ) 15 thương hiệu có nguồn chính thức, 18 mã tham khảo; đối chiếu tháng 9/2026

Quy tắc với mã màu thương hiệu: một mã chỉ được xếp là “nguồn chính thức” khi giá trị HEX/RGB xuất hiện trên kênh do chính thương hiệu vận hành (trang nhận diện, design system, brand hub). Mã hút từ logo, blog, Wikipedia hay trang tổng hợp chỉ được xếp là “tham khảo”, kèm lý do. Nhờ vậy chúng tôi phát hiện nhiều mã đang lưu truyền không còn đúng — ví dụ màu đỏ chính thức của YouTube là #FF0033, không phải #FF0000.

Ca kiểm thử

Các giá trị dưới đây được chạy trực tiếp bằng công thức đang dùng trên site; bạn có thể nhập lại vào công cụ để đối chiếu.

Đầu vào và kết quả mong đợi
Đầu vào Kết quả
#FF5733 rgb(255, 87, 51) · hsl(11, 100%, 60%) · cmyk(0%, 66%, 80%, 0%) · oklch(68.04% 0.2100 33.69)
Tương phản #777777 trên trắng 4,47:1 — chưa đạt AA (giá trị thật 4,478…; làm tròn sẽ thành 4,48 nhưng vẫn dưới 4,5)
Tương phản #767676 trên trắng 4,54:1 — màu xám nhạt nhất vẫn đạt AA trên nền trắng
Tương phản #FF0000 trên trắng 3,99:1 — chỉ đạt AA cho chữ lớn
Thang 50–950 từ #2F6FE0 Màu gốc nằm ở bậc 600; bậc 50 = #F2F7FF, bậc 950 = #021B4B
Pha ánh sáng đỏ + xanh lá #FFFF00 (vàng)
Pha kỹ thuật số đỏ + xanh dương #800080, bằng color-mix(in srgb, red, blue)

Giới hạn

  • Màu bạn nhìn thấy phụ thuộc màn hình (độ sáng, cân bằng trắng, gam P3 hay sRGB). Mã màu thì chính xác, còn hiển thị thì không đồng nhất giữa các thiết bị.
  • CMYK và pha màu vẽ là ước lượng; với bản in hay sơn thật, hãy in thử hoặc pha thử.
  • Tên màu tiếng Việt mang tính quy ước; cùng một tên, mỗi ngành có thể hiểu một sắc hơi khác.

Thấy một con số chưa đúng? Hãy báo lỗi cho chúng tôi — mọi chỉnh sửa được ghi trong nhật ký cập nhật.

Cập nhật lần cuối: · Nhật ký cập nhật · Báo lỗi trang này