Bộ chuyển đổi RGB sang Hex

Bộ chuyển đổi RGB sang HEX chuyển đổi tức thì các giá trị màu RGB (Đỏ, Lục, Lam) sang mã màu thập lục phân được sử dụng trong thiết kế web, CSS và các ứng dụng đồ họa. Nó cung cấp đầu ra đa định dạng bao gồm HSL, HSV và CMYK, cùng với các đoạn mã CSS, bảng màu phối hợp, kiểm tra độ tương phản khả năng truy cập WCAG và khớp tên màu gần nhất.

Cách hoạt động của việc chuyển đổi RGB sang HEX

RGB (Red, Green, Blue) và HEX là hai ký hiệu khác nhau cho cùng một mô hình màu cộng được sử dụng bởi các màn hình điện tử. Mỗi kênh màu nằm trong khoảng từ 0 đến 255 ở dạng thập phân. Để chuyển sang HEX, mỗi giá trị kênh thập phân được biểu diễn dưới dạng số thập lục phân có hai chữ số (cơ số 16) và ba cặp này được kết hợp với tiền tố #.

Công thức chuyển đổi

Cho mỗi giá trị kênh V (0–255):

1. Chia V cho 16. Thương số là chữ số hex thứ nhất, số dư là chữ số thứ hai.
2. Ánh xạ các chữ số 10–15 thành các chữ cái A–F.
3. Kết hợp: #RRGGBB

Ví dụ: RGB(255, 165, 0) → 255 = FF, 165 = A5, 0 = 00 → #FFA500 (Màu cam)

Giải thích các định dạng màu

HEX (Thập lục phân)

Ký hiệu màu phổ biến nhất trong phát triển web. Một dấu # theo sau bởi 6 chữ số hex đại diện cho RR, GG, BB. Ký hiệu viết tắt (#RGB) có sẵn khi mỗi cặp có các chữ số giống hệt nhau, ví dụ: #FF0000 → #F00.

HSL (Hue, Saturation, Lightness)

Một mô hình trực quan hơn cho các nhà thiết kế. Sắc độ (Hue) là một góc trên vòng tròn màu (0°–360°), Độ bão hòa (Saturation) là độ sống động (0–100%), và Độ sáng (Lightness) nằm trong khoảng từ đen (0%) qua màu thuần khiết (50%) đến trắng (100%). HSL giúp dễ dàng tạo ra các biến thể màu bằng cách điều chỉnh một tham số duy nhất.

HSV / HSB (Hue, Saturation, Value / Brightness)

Tương tự như HSL nhưng định nghĩa độ sáng khác nhau. Giá trị 100% có nghĩa là màu đang ở trạng thái sáng nhất có thể cho sắc độ và độ bão hòa đó. Mô hình này được sử dụng trong nhiều ứng dụng thiết kế đồ họa như Photoshop và Figma.

CMYK (Cyan, Magenta, Yellow, Key/Black)

Mô hình màu trừ được sử dụng trong in ấn. Trong khi màn hình thêm ánh sáng (RGB), máy in trộn mực hấp thụ ánh sáng (CMYK). Chuyển đổi sang CMYK là điều cần thiết khi chuẩn bị các thiết kế kỹ thuật số cho in ấn vật lý để đảm bảo độ chính xác của màu sắc.

Các loại phối hợp màu sắc

Phối hợp màu sắc là sự kết hợp của các màu dựa trên vị trí của chúng trên vòng tròn màu. Công cụ này tạo ra bốn loại:

• Bổ túc (Complementary): Màu nằm đối diện trực tiếp trên vòng tròn màu (cách nhau 180°). Tạo ra sự tương phản tối đa và tác động thị giác mạnh.
• Tương đồng (Analogous): Các màu nằm liền kề trên vòng tròn màu (±30°). Tạo ra các thiết kế hài hòa, thoải mái thường thấy trong tự nhiên.
• Tam giác (Triadic): Ba màu cách đều nhau (cách nhau 120°). Mang lại sự tương phản rực rỡ trong khi vẫn duy trì sự cân bằng.
• Bổ túc bộ ba (Split-Complementary): Hai màu nằm liền kề với màu bổ túc (150° và 210°). Một sự thay thế nhẹ nhàng hơn cho màu bổ túc với nhiều biến thể hơn.

Độ tương phản khả năng truy cập WCAG

Hướng dẫn Khả năng truy cập Nội dung Web (WCAG) xác định các tỷ lệ tương phản để đảm bảo khả năng đọc:

Các chuyển đổi RGB sang HEX phổ biến

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

Làm thế nào để chuyển đổi RGB sang HEX?

Để chuyển đổi RGB sang HEX, hãy lấy giá trị của từng kênh màu (0-255), chia cho 16 để lấy thương số và số dư, sau đó ánh xạ từng giá trị sang các chữ số thập lục phân (0-9, A-F). Kết hợp cả ba giá trị hex 2 chữ số với tiền tố #. Ví dụ: RGB(255, 165, 0) trở thành #FFA500: 255→FF, 165→A5, 0→00.

Sự khác biệt giữa mã màu RGB và HEX là gì?

RGB và HEX đại diện cho cùng một màu bằng cách sử dụng ký hiệu khác nhau. RGB sử dụng ba số thập phân (0-255) cho các kênh Đỏ, Lục và Lam, như rgb(255, 0, 0). HEX sử dụng dấu # theo sau là sáu chữ số thập lục phân, như #FF0000. Cả hai đều mã hóa thông tin màu sắc giống hệt nhau — HEX chỉ đơn giản là một biểu diễn cơ số 16 gọn gàng hơn của cùng giá trị RGB.

HEX sử dụng mô hình màu nào?

Mã màu HEX sử dụng mô hình màu cộng RGB (Đỏ, Lục, Lam), cùng một mô hình được sử dụng bởi màn hình máy tính. Sáu chữ số hex đại diện cho ba cặp: hai chữ số đầu tiên cho màu đỏ, hai chữ số giữa cho màu lục và hai chữ số cuối cho màu lam. Mỗi cặp nằm trong khoảng từ 00 (cường độ 0) đến FF (cường độ tối đa 255).

Tỷ lệ độ tương phản WCAG là gì?

Tỷ lệ độ tương phản WCAG đo lường sự khác biệt về độ chói giữa hai màu, được sử dụng để đảm bảo khả năng đọc văn bản cho người khiếm thị. Tỷ lệ nằm trong khoảng từ 1:1 (không tương phản) đến 21:1 (tối đa). WCAG 2.0 yêu cầu ít nhất 4.5:1 cho văn bản bình thường (mức AA), 3:1 cho văn bản lớn (AA Large) và 7:1 cho độ tương phản nâng cao (mức AAA).

Làm thế nào để chuyển đổi RGB sang HSL?

Để chuyển đổi RGB sang HSL: chuẩn hóa R,G,B về khoảng 0-1, tìm giá trị lớn nhất và nhỏ nhất, tính Độ sáng là (max+min)/2, Độ bão hòa phụ thuộc vào độ sáng, và Sắc độ được tính dựa trên kênh nào chiếm ưu thế (0° cho đỏ, 120° cho lục, 240° cho lam) được điều chỉnh bởi sự khác biệt giữa các kênh.

CMYK là gì và khi nào tôi nên sử dụng nó?

CMYK là viết tắt của Cyan, Magenta, Yellow, và Key (Đen). Đây là mô hình màu trừ được sử dụng trong in ấn. Trong khi RGB/HEX được sử dụng cho màn hình (trộn ánh sáng cộng), CMYK là thiết yếu cho thiết kế in ấn vì máy in trộn mực thay vì ánh sáng. Chuyển đổi RGB sang CMYK giúp đảm bảo màu sắc kỹ thuật số của bạn được chuyển đổi chính xác sang các tài liệu in ấn.

Tài nguyên bổ sung

• Hướng dẫn tương phản WCAG 2.1