Softonic

Bộ chọn màu Material Design

Bước 1 / 3 Chọn một họ màu

Bảng màu Material Design cố định năm 2014 (Material Design 2). Material 3 sử dụng các bảng màu tông được tạo tự động.

Chọn một họ màu

Red Pink Purple Deep Purple Indigo Blue Light Blue Cyan Teal Green Light Green Lime Yellow Amber Orange Deep Orange Brown Gray Blue Gray Black White

Bảng màu Material Design gồm 19 họ màu, từ đỏ, hồng, tím đến xám và xám xanh, mỗi họ có dải chuyển sắc từ sắc độ 50 (nhạt) đến 900 (gần đen), cùng các sắc màu điểm nhấn tùy chọn từ A100 đến A700. Bộ chọn này sắp xếp mọi mẫu màu thành lưới và cho phép bạn sao chép bất kỳ giá trị nào dưới dạng HEX, RGB, HSL hoặc tên token Material để dùng trong Tailwind, biến CSS, iOS UIColor hoặc tài nguyên màu của Android.

Cách sử dụng bảng màu

  1. 1

    Lướt qua lưới màu

    Các họ màu xếp dọc bên trái; các sắc độ trải ngang ở phía trên từ 50 đến 900.

  2. 2

    Chạm vào một mẫu màu

    Xem HEX, RGB, HSL và tên token Material chuẩn (ví dụ: Indigo 500).

  3. 3

    Sao chép định dạng bạn cần

    Chỉ cần một lần nhấp là sao chép chính xác chuỗi: `#3F51B5`, `rgb(63 81 181)`, `hsl(231 48% 48%)`.

  4. 4

    Kiểm tra độ tương phản

    Bảng này hiển thị tỷ lệ tương phản WCAG so với màu trắng và màu đen để chọn màu văn bản dễ tiếp cận.

Thang sắc độ

Sắc độ Cách dùng
50 Nền khi di chuột, bề mặt nhạt
100 Nền chip, phần tô có độ nhấn thấp
200 Trạng thái bị vô hiệu hóa, bề mặt phụ
300 Đường viền, dấu phân cách
400 Văn bản phụ trên nền sáng
500 Màu mặc định / màu chính, giá trị cơ sở
600 Trạng thái tương tác (di chuột, nhấn)
700 Tiêu đề, nhấn mạnh mạnh mẽ
800 Văn bản tối trên nền sáng
900 Thành phần tương phản cao nhất (gần đen)
A100 Điểm nhấn nhạt
A200 Điểm nhấn nhạt hơn mặc định
A400 Điểm nhấn (thường là điểm nhấn “rực rỡ” của thương hiệu)
A700 Điểm nhấn đậm

Các họ màu trong bảng màu Material

Đỏ, Hồng, Tím, Tím đậm, Chàm, Xanh dương, Xanh dương nhạt, Xanh lơ, Xanh mòng két, Xanh lá, Xanh lá nhạt, Xanh chanh, Vàng, Hổ phách, Cam, Cam đậm, Nâu, Xám, Xám xanh.

Nâu, Xám và Xám xanh không có sắc màu điểm nhấn, chúng là những họ màu trung tính.

Chọn màu chính

Đặc tả gợi ý dùng 500 làm màu chính, 700 cho biến thể đậm hơn (dùng trên thanh trạng thái của Android), và một điểm nhấn A200 hoặc A400 cho các thao tác phụ. Đây là một quy ước, không phải quy tắc bắt buộc, Material 3 hiện đại (màu động) tạo bảng màu từ một màu gốc duy nhất thay vì chọn từ các dải màu cố định.

Điểm kiểm tra khả năng tiếp cận

  • Văn bản nội dung: tỷ lệ tương phản ≥ 4,5:1 so với nền (WCAG AA).
  • Văn bản lớn (18 pt trở lên in đậm hoặc 24 pt trở lên thường): ≥ 3:1.
  • Thành phần giao diện và đối tượng đồ họa: ≥ 3:1.

Theo mặc định, bảng màu này không an toàn về độ tương phản. Màu vàng 500 trên nền trắng vi phạm WCAG nghiêm trọng. Luôn kiểm tra tỷ lệ trước khi dùng một tổ hợp màu, bộ chọn sẽ hiển thị ngay tại chỗ.

Các định dạng được hỗ trợ

  • HEX: #3F51B5 (Indigo 500).
  • RGB: rgb(63 81 181) (cú pháp hiện đại) hoặc rgb(63, 81, 181) (kiểu cũ).
  • HSL: hsl(231 48% 48%).
  • Token Material: Indigo 500, tiện dụng cho tài liệu thiết kế và Figma.
  • Tailwind: indigo-500, đặt trực tiếp vào thuộc tính class nếu chủ đề Tailwind của bạn dùng thang màu Material.
  • XML màu của Android: <color name="indigo_500">#FF3F51B5</color>, định dạng ARGB.
  • iOS UIColor: UIColor(red: 0.247, green: 0.318, blue: 0.710, alpha: 1.0).

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

Công cụ này tái hiện bảng màu Material Design cố định do Google công bố năm 2014 và sau đó được ghi lại trên trang Material Design 2. Công cụ không tạo bảng màu tông của Material 3 từ màu nguồn. Hãy dùng khi bạn cần các mẫu màu đánh số và màu nhấn cổ điển.

Nâu, Xám và Xám xanh là màu trung tính và không tham gia các cặp màu điểm nhấn. Đặc tả đơn giản là bỏ qua A100–A700 cho chúng.

Bảng màu mặc định của Tailwind lấy cảm hứng từ Material nhưng không giống hệt. Nếu muốn màu Material chính xác, hãy mở rộng theme.extend.colors bằng các giá trị Material và tham chiếu chúng dưới dạng material-indigo-500 trong tên class của bạn.

Quy ước là có, nhưng không gì ngăn bạn dùng 700 hoặc một điểm nhấn làm màu chính. Quy ước 500 nhằm có một sắc độ nền đáng tin cậy với 8 bước về mỗi hướng để tạo biến thể.

Công cụ liên quan

Trình đổi kích thước ảnh

Đổi kích thước ảnh theo số pixel chính xác hoặc theo phần trăm mà vẫn giữ tỷ lệ khung hình. Phù hợp để chuẩn bị nhiều ảnh, không cần tải lên.

Công cụ tăng độ phân giải ảnh

Phóng to ảnh độ phân giải thấp lên 2×, 3× hoặc 4× bằng siêu phân giải AI hoặc nội suy cổ điển, đồng thời giữ các chi tiết quan trọng.

Trình thay đổi kích thước ảnh hàng loạt

Kéo thả nhiều ảnh, căn vừa hoặc kéo giãn theo kích thước mục tiêu, rồi xuất JPG, PNG hoặc WebP trong một file ZIP. Mọi xử lý ở lại trong trình duyệt.

Nén GIF

Giảm kích thước GIF động trong trình duyệt bằng cách thu nhỏ kích thước, giữ ít khung hình hơn và chỉnh chất lượng mã hóa. Xem trước vòng lặp trước khi tải xuống.

Trình tạo GIF

Chuyển chuỗi ảnh hoặc video ngắn thành GIF động. Điều chỉnh tốc độ khung hình, số vòng lặp và kích thước trước khi xuất.

Bộ nén hình ảnh

Nén ảnh JPG, PNG và WebP để giảm kích thước tệp mà vẫn giữ chất lượng hiển thị. Toàn bộ quá trình chạy trong trình duyệt, không cần tải lên.