logo
GeekFormat

Công cụ chuyển đổi màu

最接近的 CSS 颜色名: mediumseagreen

RGB

R
G
B
A

HSL

H
S
L

HSV

H
S
V
HEX#22c55e
RGBrgb(34, 197, 94)
RGBArgba(34, 197, 94, 1)
HSLhsl(142, 71%, 45%)
HSLAhsla(142, 71%, 45%, 1)
HSVhsv(142, 83%, 77%)
HWBhwb(142, 13%, 23%)
CMYKcmyk(83%, 0%, 52%, 23%)
XYZxyz(22.64, 41.08, 17.32)
LABlab(70, -62, 40)
LCHlch(70, 74, 147)
OKLABoklab(1, 0, 0)
OKLCHoklch(1, 0, 180)

WCAG 对比度检查

白字
2.28:1
AA ✗AAA ✗
黑字
9.22:1
AA ✓AAA ✓

Công cụ chuyển đổi màu trực tuyến hỗ trợ chuyển đổi một cú nhấp chuột giữa 14 định dạng màu bao gồm HEX, RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK, XYZ, LAB, LCH, OKLAB và OKLCH. Tích hợp bộ chọn màu để điều chỉnh thời gian thực, kiểm tra độ tương phản WCAG, sơ đồ hài hòa màu, tạo sắc thái, chuyển đổi hàng loạt và trích xuất màu từ hình ảnh. Mọi phép tính chạy hoàn toàn cục bộ trong trình duyệt—không cần tải tệp lên, hoàn hảo cho nhà thiết kế và nhà phát triển frontend.

Đề xuất Liên quan

Trình mô phỏng mù màu

Bộ lọc hình ảnh

CSS Formatter

Chuyển đổi đơn vị

Trình chuyển đổi tiền tệ

Chuyển đổi định dạng ảnh

Trường hợp sử dụng

  • Chuyển đổi giá trị HEX từ bản mô phỏng thiết kế sang RGB/HSL cho kiểu CSS trong phát triển frontend, hoặc sang RGBA khi cần độ trong suốt
  • Thống nhất định dạng giá trị màu khi chuyển đổi giữa các công cụ thiết kế như Figma, Sketch và Photoshop cho nhà thiết kế UI/UX
  • Chuyển đổi giá trị RGB màn hình sang CMYK để tham khảo trong quá trình giao tiếp sản xuất in ấn ban đầu
  • Kiểm tra tỷ lệ tương phản giữa văn bản và màu nền để tuân thủ WCAG AA/AAA trong thiết kế dễ tiếp cận
  • Nhanh chóng tạo một họ đầy đủ từ tints đến shades để xây dựng hệ thống thiết kế bằng trình tạo sắc thái
  • Tạo sơ đồ màu chuyên nghiệp (bổ sung, tương đồng, v.v.) cho thương hiệu hoặc thiết kế áp phích bằng hài hòa màu
  • Trích xuất màu chủ đạo từ hình ảnh tham khảo hoặc ảnh chụp để lấy cảm hứng (chọn màu từ hình ảnh)
  • Xử lý hàng loạt nhiều giá trị màu từ bản mô phỏng thiết kế và chuyển đổi sang các định dạng cần thiết cùng lúc
  • Thuận tiện điều chỉnh độ sáng và độ bão hòa bằng HSL hoặc OKLCH khi viết các trạng thái CSS như hover
  • Xây dựng màu hệ thống thiết kế đồng nhất về tri giác bằng không gian màu OKLCH của CSS hiện đại
  • Giảng dạy nguyên tắc không gian màu với so sánh trực quan tương tác về cách các định dạng khác nhau biểu thị cùng một màu
  • Nhanh chóng tìm tên màu CSS tiếng Anh cho bất kỳ giá trị nào để dễ dàng tham khảo và giao tiếp

Tính năng

  • Chuyển đổi 14 định dạng màu: Hỗ trợ HEX, RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK, XYZ, LAB, LCH, OKLAB, OKLCH và tên màu CSS tiêu chuẩn
  • Nhận dạng đầu vào thông minh: Dán bất kỳ định dạng màu nào sẽ tự động phát hiện; hỗ trợ viết tắt #rgb, #rrggbbaa với alpha, rgb(), hsl() và tên màu CSS
  • Điều chỉnh thanh trượt thời gian thực: Đỏ/xanh lá/xanh dương RGB, Hue/Saturation/Lightness HSL, thanh trượt HSV để tinh chỉnh màu WYSIWYG tức thì
  • Hỗ trợ độ trong suốt alpha: Chuyển đổi RGBA và HSLA với kênh alpha, hỗ trợ cả định dạng độ mờ phần trăm và thập phân
  • Đối sánh tên màu CSS: Tự động tìm tên màu CSS tiêu chuẩn gần nhất (hơn 140 lựa chọn) để tham khảo nhanh
  • Kiểm tra độ tương phản WCAG: Tính toán tỷ lệ tương phản thời gian thực với văn bản trắng và đen, với chỉ báo đạt/không đạt AA (≥4.5:1) và AAA (≥7:1) tự động
  • Trình tạo hài hòa màu: Tạo một cú nhấp chuột 5 sơ đồ cổ điển—bổ sung, tương đồng, bộ ba, bổ sung phân tách và bộ tứ
  • Tạo sắc thái: Cả sắc thái trộn RGB truyền thống và sắc thái OKLCH đồng nhất về tri giác, tạo 11 bước độ sáng tức thì
  • Chuyển đổi hàng loạt: Xử lý nhiều giá trị màu cùng lúc với đầu vào nhiều dòng—lý tưởng để xử lý bảng màu hệ thống thiết kế
  • Chọn màu từ hình ảnh: Tải lên hình ảnh để tự động lấy mẫu và trích xuất 16 màu chủ đạo, tuyệt vời để lấy bảng màu từ tài liệu tham khảo hoặc ảnh
  • Sao chép một cú nhấp chuột: Nút sao chép bên cạnh mọi định dạng màu để sao chép tức thì theo ký hiệu chuẩn—sẵn sàng dán trực tiếp vào CSS hoặc phần mềm thiết kế
  • Trình tạo màu ngẫu nhiên: Tạo màu ngẫu nhiên một cú nhấp chuột để lấy cảm hứng nhanh
  • Xử lý hoàn toàn trên trình duyệt: Mọi phép tính màu chạy cục bộ trong trình duyệt không cần tải lên máy chủ—hoạt động tức thì không cần đăng ký
  • Thiết kế đáp ứng: Hoạt động mượt mà trên máy tính, di động và máy tính bảng—tinh chỉnh màu và sao chép giá trị thoải mái trên điện thoại

Cách Sử dụng

  1. Nhập giá trị định dạng màu bất kỳ vào hộp nhập liệu phía trên, nhấp vào ô màu để sử dụng bộ chọn, hoặc kéo thanh trượt RGB/HSL/HSV để điều chỉnh
  2. Công cụ tự động chuyển đổi thời gian thực sang tất cả 14 định dạng bao gồm HEX, RGB, RGBA, HSL, HSV, CMYK, OKLCH
  3. Chuyển sang 'Hài hòa màu' cho các sơ đồ, 'Sắc thái' cho dải tints/shades, hoặc 'Hàng loạt/Chọn màu' để chuyển đổi hàng loạt hoặc trích xuất màu từ hình ảnh
  4. Nhấp nút sao chép bên cạnh bất kỳ định dạng màu nào để sao chép trực tiếp ký hiệu chuẩn để sử dụng

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

Công cụ chuyển đổi màu hỗ trợ những định dạng màu nào?

Hỗ trợ chuyển đổi giữa 14 định dạng màu phổ biến: HEX (viết tắt 3 chữ số và 8 chữ số với alpha), RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK, XYZ (CIE 1931 với nguồn sáng D65), CIE LAB, LCH, OKLAB, OKLCH, cùng hơn 140 tên màu CSS tiêu chuẩn. Nhập bất kỳ định dạng nào để tự động chuyển đổi sang tất cả các định dạng khác.

Làm thế nào để sử dụng công cụ chuyển đổi màu này?

Rất đơn giản: 1) Nhập bất kỳ giá trị màu nào vào hộp nhập liệu phía trên—ví dụ #22c55e, rgb(34,197,94), hsl(142,71%,45%), hoặc thậm chí tên màu như green; 2) Hoặc nhấp vào ô màu để sử dụng bộ chọn, hoặc kéo thanh trượt RGB/HSL/HSV để điều chỉnh thời gian thực; 3) Tất cả 14 chuyển đổi định dạng sẽ xuất hiện tức thì bên dưới—nhấp nút sao chép bên cạnh bất kỳ định dạng nào để sao chép vào bộ nhớ tạm.

Sự khác biệt giữa HEX, RGB và HSL là gì? Mỗi loại được sử dụng ở đâu?

HEX là ký hiệu thập lục phân phổ biến nhất cho web—#ff0000 cho màu đỏ—được sử dụng rộng rãi trong CSS và tệp bàn giao thiết kế. RGB biểu thị màu với giá trị 0-255 cho đỏ, xanh lá và xanh dương, nền tảng của hiển thị màn hình. HSL sử dụng Hue (0-360°), Saturation và Lightness, phù hợp hơn với nhận thức màu của con người và trực quan hơn cho nhà thiết kế khi điều chỉnh màu. CMYK sử dụng tỷ lệ phần trăm mực lục lam, đỏ tươi, vàng và đen cho in ấn. OKLCH là không gian màu đồng nhất về tri giác hiện đại tạo ra gradient và dải sắc thái mượt mà về mặt thị giác.

Tỷ lệ tương phản WCAG là gì? Tỷ lệ nào đáp ứng tiêu chuẩn khả năng truy cập?

Tỷ lệ tương phản WCAG đo lường sự khác biệt độ chói giữa màu văn bản và màu nền, đảm bảo nội dung có thể đọc được cho người dùng khiếm thị. Theo Nguyên tắc truy cập nội dung web: văn bản nội dung thông thường cần ≥4.5:1 cho Mức AA (đạt) và ≥7:1 cho Mức AAA (xuất sắc); văn bản lớn (≥18pt đậm hoặc ≥24pt thường) cần ≥3:1 cho AA. Công cụ hiển thị tỷ lệ tương phản thời gian thực với cả văn bản trắng và đen, với chỉ báo đạt/không đạt tự động cho tiêu chuẩn AA và AAA.

Chữ A trong RGBA có nghĩa là gì? Làm thế nào để đặt độ trong suốt?

Chữ A trong RGBA là viết tắt của kênh Alpha, kiểm soát độ trong suốt—giá trị nằm trong khoảng từ 0 (hoàn toàn trong suốt) đến 1 (hoàn toàn mờ đục). Ví dụ, rgba(34,197,94,0.5) là màu xanh lá cây bán trong suốt. Điều chỉnh độ trong suốt bằng thanh trượt Alpha; kết quả chuyển đổi hiển thị cả định dạng RGBA và HSLA với alpha. HEX cũng hỗ trợ độ trong suốt bằng cách thêm hai chữ số thập lục phân sau màu 6 chữ số—ví dụ #22c55e80 biểu thị độ mờ 50%.

OKLCH và LCH là gì? Chúng khác với HSL như thế nào?

LCH và OKLCH là không gian màu đồng nhất về tri giác trong đó L là Lightness (độ sáng), C là Chroma (độ bão hòa), và H là Hue. Ưu điểm lớn nhất so với HSL là: các màu có cùng giá trị L thực sự trông sáng bằng nhau về mặt thị giác, điều này rất quan trọng cho hệ thống thiết kế—nếu bạn tạo bảng màu với các hue khác nhau nhưng cùng độ sáng bằng HSL, một số màu sẽ trông tối hơn các màu khác, nhưng OKLCH đảm bảo độ sáng tri giác đồng nhất. OKLCH mới hơn LAB/LCH với phép tính đơn giản hơn và dự đoán màu chính xác hơn, được khuyến nghị trong CSS hiện đại (CSS Color Level 4).

Làm thế nào để sử dụng tính năng chọn màu từ hình ảnh?

Chuyển sang tab 'Hàng loạt/Chọn màu', nhấp tải lên để chọn hình ảnh—công cụ tự động co giãn hình ảnh thành lưới 100×100 và trích xuất 16 màu từ các vị trí phân bố đều, hiển thị ô màu và giá trị màu. Nhấp vào bất kỳ ô màu nào để đặt màu đó làm màu chính của bạn để điều chỉnh và chuyển đổi tiếp theo. Hoàn hảo để nhanh chóng trích xuất bảng màu từ hình ảnh tham khảo, bản mô phỏng thiết kế hoặc ảnh chụp.

Có những sơ đồ hài hòa màu nào và làm thế nào để sử dụng chúng?

Công cụ cung cấp 5 sơ đồ hài hòa cổ điển: 1) Bổ sung: Các màu cách nhau 180° để tạo độ tương phản cao; 2) Tương đồng: Các màu cách nhau 30° để tạo sự hài hòa tự nhiên; 3) Bộ ba: Các màu cách nhau 120° để tạo sự cân bằng sống động; 4) Bổ sung phân tách: Màu cơ bản + 30° ở hai phía của màu bổ sung để tạo độ tương phản nhẹ nhàng; 5) Bộ tứ (hình chữ nhật): Bốn màu cách nhau 90° để tạo sự đa dạng phong phú. Chuyển sang tab 'Hài hòa màu' để xem các sơ đồ đã tạo—nhấp vào bất kỳ ô màu nào để đặt nó làm màu chính.

Kết quả chuyển đổi CMYK có thể sử dụng trực tiếp cho in ấn không?

Chúng hoạt động tốt làm tài liệu tham khảo, nhưng lưu ý: màn hình sử dụng màu RGB cộng (phát xạ ánh sáng), trong khi in ấn sử dụng CMYK trừ (phản xạ mực). Chúng có các gam màu khác nhau—một số màu RGB tươi sáng (như xanh lá và xanh dương rực rỡ) không thể tái tạo chính xác bằng mực CMYK, vì vậy sẽ có một số sự thay đổi màu. Công cụ sử dụng công thức chuyển đổi RGB sang CMYK tiêu chuẩn, phù hợp cho giao tiếp ban đầu và tham khảo nhanh. Đối với sản xuất in cuối cùng, chúng tôi khuyến nghị sử dụng phần mềm thiết kế chuyên nghiệp với cấu hình màu ICC thích hợp để kiểm chứng mềm.

Chuyển đổi hàng loạt hoạt động như thế nào? Tôi có thể chuyển đổi bao nhiêu màu cùng lúc?

Chuyển sang tab 'Hàng loạt/Chọn màu', nhập một màu trên mỗi dòng vào hộp văn bản (có thể trộn tự do HEX/RGB/HSL/tên màu CSS), sau đó nhấp chuyển đổi hàng loạt để xử lý tất cả các màu cùng lúc. Kết quả hiển thị ô màu và giá trị HEX cho mỗi màu. Không có giới hạn lý thuyết, nhưng đối với hàng trăm màu, chúng tôi khuyến nghị xử lý theo lô để tránh trình duyệt bị lag.

Tôi có thể sử dụng công cụ chuyển đổi màu trên di động không?

Có. Công cụ sử dụng thiết kế đáp ứng và hoạt động hoàn hảo trên màn hình di động, máy tính bảng và máy tính để bàn mọi kích thước. Trên di động, bạn vẫn có thể nhập giá trị màu, kéo thanh trượt để điều chỉnh màu, xem các chuyển đổi và sao chép giá trị—tất cả các tính năng đều tương đương trải nghiệm máy tính. Và vì nó là tính toán cục bộ thuần túy, nó sẽ không sử dụng dữ liệu di động của bạn.

Phải làm gì nếu đầu vào hiển thị 'định dạng màu không được nhận dạng'?

Kiểm tra định dạng đầu vào: 1) HEX phải bắt đầu bằng # (tùy chọn) theo sau là 3, 6 hoặc 8 ký tự thập lục phân (0-9/a-f)—#f00, #ff0000, #ff0000ff đều hợp lệ; 2) Định dạng RGB phải là rgb(r,g,b) với ba giá trị 0-255 phân cách bằng dấu phẩy; 3) Định dạng HSL là hsl(h,s%,l%) với hue 0-360°, độ bão hòa và độ sáng 0-100%; 4) Tên màu CSS phải là tên tiêu chuẩn như red/blue/green—không hỗ trợ tên màu tiếng Việt.

Tại sao màu đã chuyển đổi trông khác nhau trong các phần mềm khác nhau?

Đây là hành vi quản lý màu bình thường: các phần mềm, màn hình và hệ điều hành khác nhau có thể sử dụng cấu hình màu khác nhau (sRGB, Display P3, Adobe RGB), gây ra sự khác biệt thị giác nhỏ cho cùng một giá trị màu. Trang web mặc định sử dụng không gian màu sRGB—nếu bạn đang sử dụng cấu hình Adobe RGB hoặc Display P3 trong phần mềm như Photoshop, bạn sẽ cần chuyển đổi sang sRGB khi xuất để hiển thị web nhất quán.

Tôi nên sử dụng định dạng màu nào trong phát triển frontend?

CSS hiện đại hỗ trợ tất cả các định dạng màu: HEX là phổ biến nhất với khả năng tương thích tốt nhất và là tiêu chuẩn cho bàn giao thiết kế; RGB/RGBA hoạt động tốt khi bạn cần điều chỉnh độ mờ động hoặc thao tác ở cấp độ kênh; HSL trực quan nhất để viết các biến thể màu trực tiếp trong mã (như làm sáng trạng thái hover chỉ bằng cách tăng L); OKLCH là tương lai, được hỗ trợ nguyên bản trong CSS Color Level 4, với sự đồng nhất về tri giác hoàn hảo để tạo sắc thái và gradient—hãy chọn dựa trên nhu cầu tương thích của dự án.

Tính năng tạo sắc thái dùng để làm gì? Sự khác biệt giữa sắc thái truyền thống và OKLCH là gì?

Tạo sắc thái tức thì tạo 11 bước (50-900) của tints và shades cho một họ màu, lý tưởng để xây dựng bảng màu hệ thống thiết kế (như hệ thống màu của Tailwind). Sắc thái truyền thống chỉ đơn giản trộn về phía trắng trong không gian RGB—mặc dù đồng nhất về số, các tông màu trung gian có thể trông không đồng đều. Sắc thái OKLCH duy trì hue và chroma trong khi chỉ điều chỉnh độ sáng L, tạo ra chuyển đổi mượt mà giữa sáng và tối về mặt thị giác—chuyên nghiệp và trau chuốt hơn.

Về không gian màu và chuyển đổi định dạng màu

Công cụ chuyển đổi màu là một trong những công cụ được sử dụng thường xuyên nhất cho nhà thiết kế và nhà phát triển frontend, cung cấp chuyển đổi chính xác giữa các biểu diễn màu khác nhau. Bản thân màu sắc là một nhận thức thị giác; để biểu thị nó trên máy tính và trong in ấn, con người đã phát triển nhiều mô hình màu (không gian màu) mô tả cùng một màu bằng các hệ thống số khác nhau, mỗi hệ thống phù hợp với các tình huống và thiết bị khác nhau.

Các định dạng màu phổ biến bao gồm: HEX (RGB thập lục phân, ký hiệu chuẩn web), RGB (giá trị Đỏ/Xanh lá/Xanh dương 0-255, nền tảng của hiển thị màn hình), HSL (Hue/Saturation/Lightness, trực quan nhất cho con người điều chỉnh màu), CMYK (tỷ lệ phần trăm mực Lục lam/Đỏ tươi/Vàng/Đen cho in ấn). Trong những năm gần đây, các không gian màu đồng nhất về tri giác như OKLCH đã trở nên phổ biến vì chúng đảm bảo về mặt toán học rằng các màu có cùng giá trị độ sáng thực sự trông sáng bằng nhau về mặt thị giác—rất quan trọng để xây dựng hệ thống thiết kế và tạo gradient.

Tại sao phải chuyển đổi giữa các định dạng màu? Các công cụ, nền tảng và phương tiện đầu ra khác nhau sử dụng các định dạng màu khác nhau: CSS web hỗ trợ HEX/RGB/HSL/OKLCH và nhiều định dạng khác; phần mềm thiết kế như Figma/Sketch mặc định là HEX; in ấn yêu cầu CMYK; và khi điều chỉnh màu động trong mã (như trạng thái hover hoặc thay đổi độ mờ), HSL và OKLCH thuận tiện hơn nhiều so với HEX. Chuyển đổi màu chính xác đảm bảo tính nhất quán màu giữa bản mô phỏng thiết kế và triển khai cuối cùng.

Độ tương phản WCAG là một tiêu chuẩn quan trọng cho khả năng truy cập web, đo lường sự khác biệt độ chói giữa văn bản tiền cảnh và màu nền để đảm bảo khả năng đọc cho người dùng khiếm thị. Văn bản nội dung thông thường cần tỷ lệ tương phản 4.5:1 (mức AA), với nội dung quan trọng được khuyến nghị ở mức 7:1 (mức AAA). Công cụ của chúng tôi tính toán điều này theo thời gian thực, giúp nhà thiết kế cân nhắc khả năng truy cập trong quá trình lựa chọn màu thay vì khắc phục sau này.

Hài hòa màu là một lý thuyết màu cổ điển dựa trên bánh xe màu, tạo ra các kết hợp hài hòa thị giác bằng cách sử dụng vị trí hình học của các hue xung quanh bánh xe. Màu bổ sung tạo ra độ tương phản mạnh lý tưởng cho nút và điểm nhấn; màu tương đồng hài hòa và tự nhiên cho các vùng nền lớn; các sơ đồ bộ ba và bộ tứ cung cấp sự cân bằng và phong phú cho nhận diện thương hiệu. Công cụ bao gồm 5 trong số các sơ đồ hài hòa được sử dụng phổ biến nhất, tạo bảng màu một cú nhấp chuột.

Sắc thái/Tints màu là các biến thể từ sáng đến tối của cùng một hue, nền tảng để xây dựng hệ thống thiết kế (như bảng màu 50-900 của Tailwind CSS). Sắc thái RGB truyền thống chỉ đơn giản trộn về phía trắng, nhưng trông không đồng đều về mặt thị giác; sắc thái dựa trên OKLCH duy trì hue và chroma trong khi chỉ điều chỉnh độ sáng, tạo ra chuyển đổi sáng-tối mượt mà về mặt thị giác—phương pháp được khuyến nghị cho hệ thống thiết kế hiện đại. Công cụ của chúng tôi cung cấp cả hai kiểu sắc thái để so sánh.

Tại sao xử lý cục bộ lại quan trọng? Chuyển đổi màu hoàn toàn là toán học và hoàn toàn không cần tải dữ liệu lên máy chủ. Mọi phép tính trong công cụ của chúng tôi chạy hoàn toàn cục bộ trong trình duyệt của bạn—mở trang và sử dụng tức thì không cần đăng ký hoặc đăng nhập, không có hình ảnh hoặc dữ liệu màu nào được tải lên. Nó nhanh chóng và bảo vệ quyền riêng tư—bạn có thể tự tin sử dụng nó ngay cả đối với các màu từ bản mô phỏng thiết kế chưa phát hành và bí mật.

Lưu ý quan trọng: Chuyển đổi định dạng màu là chính xác về mặt toán học, nhưng do gam màu màn hình, hiệu chuẩn màn hình và quy trình in ấn, cùng một giá trị màu có thể trông hơi khác nhau trên các thiết bị và phương tiện khác nhau. Màn hình sử dụng RGB cộng (nhiều ánh sáng hơn = sáng hơn), trong khi in ấn sử dụng CMYK trừ (nhiều mực hơn = tối hơn). Cả hai có gam màu khác nhau—một số màu RGB bão hòa cao không thể tái tạo chính xác bằng mực CMYK. Kết quả chuyển đổi lý tưởng cho thiết kế kỹ thuật số và phát triển web; đối với sản xuất in cuối cùng, chúng tôi khuyến nghị phần mềm quản lý màu chuyên nghiệp để kiểm chứng.

术语表

HEX
Ký hiệu màu thập lục phân sử dụng # theo sau là 6 chữ số thập lục phân biểu thị RGB (hai chữ số cho mỗi kênh, 00-FF)—#FF0000 cho màu đỏ, định dạng phổ biến nhất cho web và phần mềm thiết kế. Hỗ trợ viết tắt 3 chữ số (ví dụ #f00) và ký hiệu 8 chữ số với alpha.
RGB/RGBA
Biểu thị màu với ba giá trị 0-255 cho Đỏ, Xanh lá và Xanh dương; rgba() thêm kênh Alpha cho độ trong suốt (0-1). Mô hình màu nền tảng cho hiển thị màn hình.
HSL/HSLA
Biểu thị màu với Hue (0-360°), Saturation (0-100%), và Lightness (0-100%), phù hợp hơn với nhận thức màu của con người—trực quan hơn cho nhà thiết kế khi điều chỉnh màu.
HSV/HSB
Hue, Saturation, Value/Brightness—tương tự HSL nhưng với cách tính độ sáng khác nhau, thường tìm thấy trong bộ chọn màu trong phần mềm thiết kế như Photoshop.
HWB
Hue, Whiteness, Blackness—một bổ sung của CSS Color Level 4 trực quan hơn HSL: chỉ cần thêm trắng hoặc đen để điều chỉnh tông màu.
CMYK
Tỷ lệ phần trăm mực Lục lam, Đỏ tươi, Vàng và Đen (Key), được sử dụng trong ngành in ấn để biểu thị tỷ lệ pha trộn mực.
CIE LAB/LAB
Một không gian màu đồng nhất về tri giác được định nghĩa bởi Ủy ban Chiếu sáng Quốc tế (CIE): L cho Lightness (0-100), a cho trục xanh lá-đỏ, b cho trục xanh dương-vàng—được thiết kế để khoảng cách số tương ứng với sự khác biệt màu tri giác.
LCH
Biểu diễn tọa độ cực được chuyển đổi từ LAB: L Lightness, C Chroma (độ bão hòa), H Hue—đồng nhất về tri giác hơn HSL, phù hợp cho thiết kế chuyên nghiệp đòi hỏi kiểm soát tri giác chính xác.
OKLAB/OKLCH
Thế hệ mới của không gian màu đồng nhất về tri giác được giới thiệu vào năm 2020—phép tính đơn giản hơn và dự đoán hue chính xác hơn LAB/LCH. OKLCH là dạng cực của nó, được hỗ trợ nguyên bản trong CSS hiện đại và được khuyến nghị để xây dựng hệ thống thiết kế.
Độ tương phản WCAG
Tỷ lệ độ chói giữa văn bản tiền cảnh và nền được quy định bởi Nguyên tắc truy cập nội dung web: AA yêu cầu ≥4.5:1 cho văn bản nội dung, AAA yêu cầu ≥7:1—đảm bảo khả năng đọc cho người dùng khiếm thị.
Hài hòa màu
Lý thuyết màu dựa trên vị trí xung quanh bánh xe màu, sử dụng các mối quan hệ hình học (bổ sung 180°, tương đồng cách 30°, bộ ba cách 120°, v.v.) để tạo ra các kết hợp hài hòa và thẩm mỹ về mặt thị giác.
Sắc thái/Tints
Một loạt các biến thể từ sáng đến tối của cùng một hue, thường được tạo thành 11 bước từ 50 đến 900, được sử dụng trong hệ thống thiết kế cho các ứng dụng khác nhau của một màu đơn lẻ (nền, viền, văn bản, điểm nhấn).

Bảng tham khảo nhanh so sánh 14 định dạng màu

Dưới đây là phạm vi giá trị, ví dụ màu đỏ thuần túy và các trường hợp sử dụng chính cho mỗi định dạng màu:

Định dạngPhạm vi giá trịVí dụ màu đỏ thuầnTrường hợp sử dụng chính
HEX#RRGGBB 00-FF#ff0000CSS web, bàn giao thiết kế—định dạng phổ quát nhất
RGBR/G/B: 0-255rgb(255,0,0)Nền tảng hiển thị màn hình, lập trình Canvas/WebGL
RGBACộng A: 0-1rgba(255,0,0,1)CSS yêu cầu độ trong suốt, hiệu ứng lớp phủ
HSLH:0-360°, S/L:0-100%hsl(0,100%,50%)Điều chỉnh màu của nhà thiết kế, thao tác màu động trong mã
HSVH:0-360°, S/V:0-100%hsv(0,100%,100%)Bộ chọn màu phần mềm thiết kế như Photoshop
HWBH:0-360°, W/B:0-100%hwb(0,0%,0%)CSS Color 4—điều chỉnh trực quan bằng cách thêm trắng/đen
CMYKC/M/Y/K: 0-100%cmyk(0%,100%,100%,0%)Ngành in ấn và xuất bản
OKLCHL:0-1, C:0-0.4, H:0-360°oklch(0.63,0.24,29)CSS hiện đại, bảng màu hệ thống thiết kế, gradient đồng nhất về tri giác

Bảng tham khảo tiêu chuẩn độ tương phản khả năng truy cập WCAG

Yêu cầu tỷ lệ tương phản tối thiểu từ Nguyên tắc truy cập nội dung web (WCAG 2.1):

MứcYêu cầu tỷ lệ tương phảnLoại văn bản áp dụngGhi chú
AA≥ 4.5:1Văn bản nội dung thông thường (<18pt thường hoặc <14pt đậm)Tiêu chuẩn đạt tối thiểu, yêu cầu tuân thủ pháp lý
AA≥ 3:1Văn bản lớn (≥18pt thường hoặc ≥14pt đậm)Tiêu đề lớn có thể có yêu cầu giảm
AAA≥ 7:1Văn bản nội dung thông thường (nâng cao)Khuyến nghị cho nội dung quan trọng, đọc nội dung dài
AAA≥ 4.5:1Văn bản lớn (nâng cao)Thiết kế dễ tiếp cận xuất sắc

Bảng tham khảo nhanh 5 sơ đồ hài hòa màu

Các kết hợp màu cổ điển dựa trên góc bánh xe hue—nhấp để tạo tức thì:

Loại sơ đồKhoảng cách HueSố lượng màuHiệu ứng thị giác & trường hợp sử dụng
Bổ sungCách nhau 180°2 màuĐộ tương phản cao—lý tưởng cho nút, điểm nhấn, CTA
Tương đồngLiền kề ±30°3 màuHài hòa và tự nhiên—tuyệt vời cho nền lớn, bảng màu chính
Bộ baCách nhau 120°3 màuSống động và cân bằng—lý tưởng cho thương hiệu, minh họa
Bổ sung phân táchMàu cơ bản + ±30° của màu bổ sung3 màuĐộ tương phản nhẹ nhàng—tinh tế hơn bổ sung
Bộ tứCách nhau 90°4 màuPhong phú và đa dạng—lý tưởng cho thiết kế phức tạp, sản phẩm trẻ em

Privacy & Security

Công cụ chuyển đổi màu này chạy tất cả các phép tính màu, chọn màu từ hình ảnh và xử lý hàng loạt hoàn toàn cục bộ trong trình duyệt của bạn bằng JavaScript thuần túy trong bộ nhớ trình duyệt. Các giá trị màu bạn nhập và hình ảnh bạn tải lên không bao giờ được truyền qua mạng đến bất kỳ máy chủ nào, cũng không được ghi lại, lưu bộ đệm hoặc lưu trữ. Sau khi xử lý, đóng hoặc làm mới trang sẽ tự động xóa dữ liệu tạm thời khỏi bộ nhớ trình duyệt. Nội dung nhạy cảm như màu từ bản mô phỏng thiết kế chưa phát hành và màu thương hiệu có thể được sử dụng an toàn mà không có nguy cơ rò rỉ.

Authoritative References

Troubleshooting

Phải làm gì nếu đầu vào hiển thị 'định dạng màu không được nhận dạng'?

Kiểm tra: 1) Định dạng HEX sử dụng ký tự thập lục phân hợp lệ (0-9, a-f, A-F) với 3, 6 hoặc 8 chữ số; # là tùy chọn; 2) Định dạng RGB/RGBA yêu cầu ba hoặc bốn giá trị trong dấu ngoặc đơn—R/G/B 0-255, Alpha 0-1, phân cách bằng dấu phẩy; 3) Định dạng HSL/HSLA yêu cầu H 0-360, S và L là giá trị phần trăm 0-100; 4) Tên màu CSS phải là tên tiếng Anh tiêu chuẩn—không hỗ trợ tên màu tiếng Việt.

Tại sao chuyển đổi CMYK trông khác với in ấn thực tế?

Điều này là dự kiến: RGB và CMYK có các gam màu khác nhau—nhiều màu RGB tươi sáng không thể tái tạo bằng mực CMYK. Công cụ sử dụng công thức chuyển đổi tiêu chuẩn phù hợp cho tham khảo ban đầu. Đối với in ấn chuyên nghiệp: 1) Chuyển đổi sang chế độ CMYK trong phần mềm thiết kế; 2) Sử dụng cấu hình màu ICC chính xác; 3) Thực hiện kiểm chứng kỹ thuật số.

Tại sao cùng một màu trông khác nhau trên điện thoại so với máy tính?

Các màn hình khác nhau có độ phủ gam màu, nhiệt độ màu, độ sáng và hiệu chuẩn khác nhau: Mac mặc định là gam rộng Display P3, hầu hết PC Windows sử dụng sRGB và màn hình di động thì khác nhau. Thiết kế web được khuyến nghị chuẩn hóa trên sRGB làm đường cơ sở để xuất hiện nhất quán trên hầu hết các thiết bị.

Tải lên hình ảnh để chọn màu không phản hồi?

Vui lòng xác nhận: 1) Bạn đang tải lên định dạng hình ảnh tiêu chuẩn (JPG/PNG/GIF/WebP); 2) Tệp hình ảnh không bị hỏng; 3) Kích thước tệp không quá lớn (khuyến nghị dưới 5MB). Chọn màu từ hình ảnh xử lý cục bộ trên canvas và không bao giờ được tải lên máy chủ—làm mới và tải lên lại thường giải quyết được sự cố.