Bộ chọn và chuyển đổi màu Hex (RGB, HSL, HSV)

Chuyển đổi hex sang RGB, HSL và HSV, sao chép các mẫu màu hài hòa và xuất CSS hoặc JSON—ngay trong trình duyệt của bạn.

Cần có JavaScript cho các tính năng tương tác. Vui lòng kích hoạt JavaScript trong trình duyệt của bạn để sử dụng công cụ này.

màu lục giác

Nhập #RGB hoặc #RRGGBB (có hoặc không có #). Giá trị không hợp lệ sẽ giữ lại chuyển đổi tốt cuối cùng.

Chuyển đổi

HEX#3B82F6

RGBrgb(59, 130, 246)

HSLhsl(217.219, 91.2%, 59.8%)

HSVhsv(217.219, 76%, 96.5%)

Mẫu hài hòa

Kiểu hòa âm

Số lượng mẫu

Dải màu/bóng râm

Các bước nhuộm màu/bóng râm

Xuất mẫu

CSS

:root {
  --color-base: #3B82F6;
  --color-analogous-1: #3BF6AF;
  --color-analogous-2: #3BDFF6;
  --color-analogous-3: #3B82F6;
  --color-analogous-4: #513BF6;
  --color-analogous-5: #AF3BF6;
  --color-tint-shade-1: #000000;
  --color-tint-shade-2: #0A162B;
  --color-tint-shade-3: #142D55;
  --color-tint-shade-4: #1F4380;
  --color-tint-shade-5: #295AAA;
  --color-tint-shade-6: #3370D5;
  --color-tint-shade-7: #3D87FF;
}

JSON

{
  "baseHex": "#3B82F6",
  "harmony": "analogous",
  "harmonyCount": 5,
  "harmonySwatches": [
    "#3BF6AF",
    "#3BDFF6",
    "#3B82F6",
    "#513BF6",
    "#AF3BF6"
  ],
  "tintShadeStrip": [
    "#000000",
    "#0A162B",
    "#142D55",
    "#1F4380",
    "#295AAA",
    "#3370D5",
    "#3D87FF"
  ],
  "stripCount": 7
}

Chọn hoặc dán màu hex, chuyển đổi sang RGB, HSL và HSV, tạo các mẫu màu bổ sung/tương tự/bộ ba/đơn sắc, sao chép giá trị và xuất CSS hoặc JSON. Miễn phí, nhanh chóng và chạy hoàn toàn trong trình duyệt của bạn.

Cách sử dụng bộ chọn màu hex này

Nhập hoặc dán giá trị hex hoặc sử dụng bộ chọn gốc. Trang này sẽ chuyển đổi nó thành RGB, HSL và HSV ngay lập tức, tạo ra các mẫu màu hài hòa và dải màu/bóng râm, đồng thời giữ cho mọi thứ luôn sẵn sàng để sao chép. Chia sẻ thiết lập của bạn với URL—trạng thái được lưu trữ trong chuỗi truy vấn.

Tham chiếu hex, RGB, HSL và HSV

Hex là một mã hóa RGB nhỏ gọn. RGB mô tả các kênh màu đỏ/xanh lục/xanh lam. HSL thể hiện màu sắc, độ bão hòa và độ sáng; HSV sử dụng màu sắc, độ bão hòa và giá trị (độ sáng). Công cụ này sử dụng phép toán xác định trong trình duyệt của bạn—không cần tải lên và không có API bên ngoài.

Bổ sung, tương tự, ba và đơn sắc

Bổ sung quay màu sắc 180°. Các bước tương tự màu sắc theo một góc cố định xung quanh chân đế của bạn. Triadic sử dụng độ lệch 120°. Đơn sắc giữ màu sắc và thay đổi độ sáng. Điều khiển đếm áp dụng cho chế độ tương tự và đơn sắc.

Biến CSS và xuất JSON

Quá trình xuất tạo ra các thuộc tính tùy chỉnh :root với các tên ổn định (ví dụ --color-base, --color-analogous-1) và JSON với baseHex, chế độ hài hòa và danh sách mẫu màu cho tập lệnh hoặc mã thông báo thiết kế.

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

#ABC có mở rộng thành sáu chữ số không?

Vâng. Hệ thập lục phân ba chữ số được mở rộng theo từng cặp chữ số, do đó #ABC trở thành #AABBCC.

Điều gì xảy ra nếu hex của tôi không hợp lệ?

Bạn thấy một lỗi nội tuyến. Màu hợp lệ cuối cùng vẫn nằm trong các hàng chuyển đổi, bộ chọn và xuất cho đến khi bạn nhập lại hệ thập lục phân hợp lệ.

Màu sắc hài hòa được tính như thế nào?

Chúng mang tính quyết định: bổ sung là sự thay đổi màu sắc 180° trong HSL; tương tự sử dụng các bước sắc cố định; bộ ba sử dụng độ lệch 120°; đơn sắc thay đổi độ sáng trong khi vẫn giữ màu sắc và độ bão hòa từ nền.

Xuất JSON là gì?

Các khóa ổn định: baseHex, Harmony, HarmonyCount nếu có, HarmonySwatches (chuỗi hex), tintShadeStrip và StripCount—thích hợp cho công cụ hoặc tài liệu.

Tôi có thể chia sẻ màu sắc của tôi không?

Vâng. URL cập nhật với hex, chế độ hài hòa, số lượng và kích thước dải để bạn có thể đánh dấu hoặc chia sẻ thiết lập chính xác.