Bộ chuyển đổi Hex sang RGB

Chào mừng bạn đến với Bộ chuyển đổi Hex sang RGB, một công cụ chuyển đổi màu sắc toàn diện giúp chuyển đổi ngay lập tức các mã màu thập lục phân thành các giá trị RGB, RGBA, HSL, HSLA và CMYK. Cho dù bạn là một nhà thiết kế web, nhà phát triển hay nghệ sĩ kỹ thuật số, công cụ này cung cấp tính năng xem trước màu sắc theo thời gian thực, chức năng sao chép một lần nhấp, tạo màu bổ túc và kiểm tra độ tương phản khả năng tiếp cận WCAG.

Mã màu Hex là gì?

Một mã màu hex (màu thập lục phân) là một mã gồm 6 chữ số được sử dụng để đại diện cho màu sắc trong thiết kế web, CSS và đồ họa kỹ thuật số. Mã này bao gồm ba cặp chữ số thập lục phân (0-9 và A-F) đại diện cho cường độ của các thành phần đỏ (red), xanh lá cây (green) và xanh lam (blue). Mỗi cặp nằm trong khoảng từ 00 (tối thiểu, 0) đến FF (tối đa, 255).

Ví dụ, #FF5733 được phân tích như sau:

• FF = 255 Đỏ (cường độ đỏ tối đa)
• 57 = 87 Xanh lá (cường độ xanh lá trung bình)
• 33 = 51 Xanh lam (cường độ xanh lam thấp)

Kết quả là một màu cam san hô rực rỡ. Ký hiệu # là tùy chọn nhưng thường được bao gồm để xác định giá trị là một mã màu hex.

Viết tắt 3 chữ số

Khi cả ba cặp màu đều sử dụng các chữ số lặp lại, bạn có thể sử dụng cách viết tắt 3 chữ số. Ví dụ, #FF5533 không thể viết tắt, nhưng #FFAA00 có thể được viết là #FA0. Mỗi chữ số được tự động nhân đôi: F thành FF, A thành AA, 0 thành 00.

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

Việc chuyển đổi hex sang RGB bao gồm việc chuyển đổi mỗi cặp chữ số thập lục phân sang giá trị thập phân tương đương của nó:

1. Xóa ký hiệu # nếu có
2. Chia thành các cặp: Chia 6 chữ số thành 3 cặp (RR, GG, BB)
3. Chuyển đổi mỗi cặp: Chuyển từ hệ cơ số 16 (thập lục phân) sang hệ cơ số 10 (thập phân)

Chuyển đổi Hex sang Thập phân

Mỗi vị trí chữ số hex có một giá trị: chữ số đầu tiên được nhân với 16, và chữ số thứ hai được cộng vào. Đối với cặp hex "5A":

5 × 16 + 10 (A) = 80 + 10 = 90

Hiểu về các định dạng màu

RGB và RGBA

RGB (Red, Green, Blue) sử dụng ba giá trị từ 0-255 để xác định một màu. RGBA thêm một kênh Alpha (0 đến 1) cho độ trong suốt. RGB(255, 87, 51) là màu đặc, trong khi RGBA(255, 87, 51, 0.5) là trong suốt 50%.

HSL và HSLA

HSL (Hue, Saturation, Lightness) thường trực quan hơn đối với các nhà thiết kế:

• Sắc thái (Hue): Vị trí trên bánh xe màu (0-360 độ). 0=đỏ, 120=xanh lá, 240=xanh lam
• Độ bão hòa (Saturation): Cường độ màu (0-100%). 0% là màu xám, 100% là màu rực rỡ
• Độ sáng (Lightness): Độ rạng rỡ (0-100%). 0% là màu đen, 100% là màu trắng, 50% là màu thuần khiết

CMYK

CMYK (Cyan, Magenta, Yellow, Key/Black) được sử dụng cho sản xuất in ấn. Trong khi màn hình sử dụng pha trộn màu cộng (RGB), máy in sử dụng pha trộn màu trừ (CMYK). Màu sắc có thể hiển thị khác nhau khi in, vì vậy việc kiểm tra các giá trị CMYK giúp đảm bảo tái tạo bản in chính xác.

Lý thuyết màu sắc: Màu bổ túc và màu tam giác

Màu bổ túc

Màu bổ túc nằm đối diện nhau trên bánh xe màu, tạo ra độ tương phản tối đa. Màu bổ túc trên bánh xe màu được xác định bằng cách xoay sắc độ 180° trong khi giữ nguyên độ bão hòa và độ sáng. Trừ mỗi giá trị RGB khỏi 255 sẽ tạo ra màu âm RGB, không phải màu bổ túc trên bánh xe; xem /color-inverter/ để biết sự khác biệt. Các cặp màu bổ túc được sử dụng cho:

• Các nút kêu gọi hành động (CTA) cần nổi bật
• Thiết kế logo có tác động thị giác mạnh
• Tạo ra sự căng thẳng và năng lượng thị giác

Màu tam giác (Triadic)

Màu tam giác là ba màu cách đều nhau trên bánh xe màu (cách nhau 120 độ). Chúng tạo ra các bảng màu sống động, cân bằng, duy trì sự hài hòa trong khi vẫn mang lại sự đa dạng. Sơ đồ này phổ biến trong thiết kế đồ họa và xây dựng thương hiệu.

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

Hướng dẫn khả năng tiếp cận nội dung web (WCAG) xác định tỷ lệ tương phản cho văn bản có thể đọc được:

• Cấp độ AAA (7:1): Tuyệt vời - tiêu chuẩn tiếp cận cao nhất
• Cấp độ AA (4.5:1): Tốt - mức tối thiểu cho văn bản bình thường
• Cấp độ AA Large (3:1): Có thể chấp nhận cho văn bản lớn (18pt+ hoặc 14pt đậm)
• Không đạt (<3:1): Độ tương phản không đủ cho khả năng tiếp cận

Công cụ của chúng tôi tính toán tỷ lệ tương phản đối với cả nền trắng và đen, giúp bạn chọn màu văn bản dễ tiếp cận cho các thiết kế của mình.

Cách sử dụng bộ chuyển đổi này

1. Nhập mã hex của bạn: Nhập hoặc dán mã màu hex (có hoặc không có #). Cả định dạng 6 chữ số và 3 chữ số đều hoạt động.
2. Thiết lập alpha (tùy chọn): Điều chỉnh độ trong suốt từ 0 (vô hình) đến 1 (màu đặc) cho đầu ra RGBA/HSLA.
3. Nhấp vào Chuyển đổi: Xem ngay các giá trị RGB, HSL, CMYK và bản xem trước màu sắc.
4. Sao chép bất kỳ định dạng nào: Nhấp vào nút sao chép để sao chép các giá trị vào bộ nhớ tạm.
5. Khám phá các bảng màu: Xem các màu bổ túc, sơ đồ tam giác, sắc độ và tông màu để lấy cảm hứng thiết kế.

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

Mã màu hex là gì?

Mã màu hex là biểu diễn thập lục phân gồm 6 chữ số (hoặc 3 chữ số viết tắt) của một màu được sử dụng trong thiết kế web và đồ họa kỹ thuật số. Nó bắt đầu bằng ký hiệu # theo sau là sáu ký tự (0-9 và A-F) đại diện cho các thành phần đỏ, xanh lá cây và xanh lam. Ví dụ, #FF5733 đại diện cho màu cam san hô với Đỏ=255, Xanh lá=87, Xanh lam=51.

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

Để chuyển đổi hex sang RGB thủ công: 1) Xóa ký hiệu #, 2) Chia 6 chữ số thành 3 cặp (RR, GG, BB), 3) Chuyển đổi mỗi cặp từ hệ thập lục phân sang hệ thập phân. Ví dụ, #FF5733: FF=255 (đỏ), 57=87 (xanh lá), 33=51 (xanh lam), cho kết quả RGB(255, 87, 51). Trình chuyển đổi của chúng tôi thực hiện việc này ngay lập tức.

Sự khác biệt giữa RGB và RGBA là gì?

RGB xác định màu bằng các giá trị Red (Đỏ), Green (Xanh lá) và Blue (Xanh lam) (mỗi giá trị từ 0-255). RGBA thêm một kênh Alpha (0-1) cho độ trong suốt. RGB(255, 87, 51) là một màu đặc, trong khi RGBA(255, 87, 51, 0.5) là cùng một màu đó nhưng với độ mờ 50%. RGBA rất cần thiết để tạo các lớp phủ và hiệu ứng bán trong suốt.

Định dạng màu HSL là gì?

HSL là viết tắt của Hue (Sắc thái), Saturation (Độ bão hòa) và Lightness (Độ sáng). Hue là góc màu (0-360 độ), Saturation là cường độ màu (0-100%), và Lightness là độ rạng rỡ (0-100%). HSL thường trực quan hơn đối với các nhà thiết kế vì việc điều chỉnh độ sáng hoặc độ bão hòa rất đơn giản mà không ảnh hưởng đến sắc thái cơ bản.

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

CMYK là viết tắt của Cyan (Xanh lơ), Magenta (Hồng sẫm), Yellow (Vàng) và Key (Đen). Đây là mô hình màu được sử dụng trong sản xuất in ấn. Trong khi hex và RGB dành cho màn hình (màu cộng), CMYK dành cho in ấn (màu trừ). Nếu thiết kế của bạn sẽ được in ra, bạn nên kiểm tra các giá trị CMYK để đảm bảo độ chính xác của màu sắc.

Màu bổ túc là gì?

Màu bổ túc là màu nằm trực tiếp đối diện với một màu khác trên bánh xe màu, tạo ra độ tương phản tối đa. Đối với bất kỳ màu nào, màu bổ túc của nó được tìm thấy bằng cách đảo ngược các giá trị RGB (255 trừ đi mỗi kênh). Màu bổ túc tạo ra các thiết kế sống động, có độ tương phản cao và thường được sử dụng trong logo và các yếu tố kêu gọi hành động.

Tài nguyên liên quan

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