🎨 Trình chuyển đổi màu

Một công cụ chuyển đổi màu toàn diện dành cho nhà thiết kế web và lập trình viên. Chuyển đổi giữa các định dạng màu như HEX, RGB, HSL, HSV theo thời gian thực và xem trước ngay lập tức. Tìm màu mong muốn một cách trực quan bằng bộ chọn màu và thanh trượt, hoặc làm việc nhanh với các màu có sẵn.

Chọn màu

Đỏ (0-255) — 102

Xanh lá (0-255) — 126

Xanh dương (0-255) — 234

HEX

—

RGB

—

HSL

—

CMYK

—

Phối màu

Bổ túc

Tương tự

Bộ ba

Bổ túc chia tách

Màu có sẵn

HƯỚNG DẪN

Tìm hiểu thêm

Chuyển đổi mã màu là gì?

Chuyển đổi mã màu là quá trình chuyển đổi giữa các định dạng biểu diễn màu khác nhau (HEX, RGB, HSL, HSV) dùng trong thiết kế số. Điều này rất quan trọng trong thiết kế web, thiết kế đồ họa và phát triển ứng dụng. Mỗi định dạng mã màu có ưu điểm riêng, vì vậy việc chọn định dạng phù hợp cho từng tình huống là rất cần thiết.

Các định dạng mã màu chính

HEX: định dạng #RRGGBB, được dùng phổ biến nhất trên web (ví dụ, #FF0000 là màu đỏ). RGB: định dạng rgb(255, 0, 0), mỗi kênh trong phạm vi 0-255, hỗ trợ trong suốt (rgba). HSL: định dạng hsl(0, 100%, 50%), dễ điều chỉnh trực quan theo sắc độ/bão hòa/độ sáng. HSV: tương tự HSL nhưng cách tính độ sáng khác, chủ yếu dùng trong phần mềm thiết kế.

Ứng dụng trong thiết kế web

Mã HEX được dùng phổ biến nhất trong CSS (như các màu thương hiệu kiểu #3498db), còn RGB hữu ích cho điều khiển màu động bằng JavaScript. HSL đặc biệt tiện khi tạo giao diện màu - chỉ cần thay đổi Hue trong khi giữ nguyên saturation và lightness là bạn có thể dễ dàng tạo bảng màu đồng nhất.

Khả năng tiếp cận và độ tương phản màu

Theo hướng dẫn khả năng tiếp cận WCAG, độ tương phản giữa chữ và nền là rất quan trọng. Văn bản thường cần tỷ lệ tương phản tối thiểu 4.5:1, còn chữ lớn cần 3:1. Khi dùng công cụ chuyển đổi màu, bạn có thể điều chỉnh giá trị Lightness để đảm bảo độ tương phản phù hợp, giúp dễ đọc hơn.

Hài hòa màu và bảng màu

Các cách tạo bảng màu hài hòa: Đơn sắc: chỉ thay đổi Saturation/Lightness với cùng Hue. Tương tự: thay đổi Hue trong phạm vi 30 độ. Bổ túc: Hue đối diện nhau 180 độ. Bộ ba: đặt các Hue cách nhau 120 độ (0°, 120°, 240°).

Mẹo dùng công cụ chuyển đổi màu

Giai đoạn thiết kế: Dùng HSL để chọn màu (trực quan). Khi viết CSS: Dùng HEX hoặc RGB. Hiệu ứng JavaScript: RGB/RGBA (điều khiển độ mờ). Tạo bảng màu: HSL (biến thể theo Hue). Tương thích trình duyệt: HEX an toàn nhất. Lưu trữ màu: Ghi chú ở tất cả định dạng.

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

Nên dùng định dạng nào trong CSS: HEX, RGB hay HSL?

Cả ba đều biểu diễn cùng một màu nên định dạng nào cũng dùng được. HEX phổ biến cho màu thương hiệu cố định, RGBA khi bạn cần độ trong suốt, còn HSL tiện khi muốn chỉnh độ sáng hoặc bão hòa mà vẫn giữ nguyên sắc độ.

Chuyển đổi mã màu có làm thay đổi màu thực tế không?

Không, nó chỉ thay đổi cách viết cùng một màu. Màu hiển thị trên màn hình vẫn giữ nguyên, dù việc làm tròn khi chuyển đổi HSL/RGB có thể tạo ra khác biệt rất nhỏ ở giá trị.

Màu bổ túc được tính như thế nào?

Nó cộng thêm 180 độ vào giá trị Hue trong HSL, tạo ra màu nằm đối diện trực tiếp trên vòng màu. Saturation và Lightness giữ nguyên, nên sắc độ vẫn hài hòa với màu gốc.

Khi R, G và B bằng nhau thì là màu gì (ví dụ: 128,128,128)?

Khi R, G, B bằng nhau thì độ bão hòa bằng 0, tức là một sắc xám. 0 là màu đen, 255 là màu trắng, và mọi giá trị ở giữa là các sắc xám với độ sáng khác nhau.

Tôi nên kiểm tra gì để đảm bảo độ tương phản của chữ?

Hãy so sánh giá trị Lightness của màu chữ và màu nền. Văn bản thường cần tỷ lệ tương phản ít nhất 4.5:1 so với nền.