RevealTheme logo

Trình chuyển đổi màu (HEX/RGB/HSL)

Chuyển đổi màu giữa các định dạng HEX, RGB và HSL. Chọn màu trực quan hoặc nhập các giá trị thủ công.

HEX
#535beb
RGB
rgb(83, 91, 235)
HSL
hsl(237, 79%, 62%)

Cách sử dụng công cụ này

  1. 1

    Click the color swatch to open your operating system's color picker and choose a color visually.

  2. 2

    Or type a 6-digit HEX value (such as #535beb, with or without the leading #) into the text field.

  3. 3

    Read the matching rgb(R, G, B) and hsl(H, S%, L%) strings in the result cards below.

  4. 4

    Copy whichever format you need straight into your CSS or design file.

Trình chuyển đổi màu (HEX/RGB/HSL) là gì?

HEX, RGB và HSL là ba cách để biểu diễn cùng một màu. HEX (#RRGGBB) phổ biến nhất trong CSS và các công cụ thiết kế. RGB (rgb(R,G,B)) tách các kênh màu một cách số học. HSL (hsl(H,S%,L%)) trực quan hơn đối với con người: tông màu (hue) là màu sắc, độ bão hòa (saturation) là cường độ và độ sáng (lightness) là độ chói. Hãy dùng HSL khi thiết kế bảng màu; chuyển nó sang HEX khi triển khai.

Các trường hợp sử dụng phổ biến

  • Translating a brand HEX code from a style guide into the rgb() values a legacy stylesheet or email template requires.

  • Grabbing the HSL form of a color so you can nudge its lightness or saturation while keeping the same hue for a palette.

  • Checking the exact RGB channels of a color picked from a screenshot or mockup before writing it into CSS.

  • Confirming what a designer's HEX swatch becomes in RGB for a canvas, SVG, or charting library that wants numeric channels.

  • Teaching or learning how hexadecimal color notation maps to decimal RGB and to the HSL model.

  • Quickly sampling a color visually with the picker and reading all three CSS-ready notations at once.

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

Khi nào tôi nên dùng HSL thay vì HEX?
Khi thiết kế: HSL cho phép bạn điều chỉnh độ sáng hoặc độ bão hòa một cách độc lập. Sau đó hãy chuyển nó sang HEX để dùng trong mã.
Còn OKLCH và các không gian màu hiện đại thì sao?
OKLCH đồng nhất về mặt cảm nhận và tốt hơn cho khả năng tiếp cận. Nó được hỗ trợ trong CSS Color Level 4 (tất cả các trình duyệt hiện đại).

Công cụ liên quan