Chuyển đổi mã màu

    Chuyển đổi giá trị màu sắc giữa các hệ màu HEX, RGB, HSL, HSV, CMYK và không gian màu hiện đại OKLCH. Tùy chỉnh độ trong suốt và xem trước bảng màu tức thì.

    Xem trước màu sắc
    Nhập một mã màu hợp lệ để xem trước màu sắc trực tiếp

    Các định dạng đã chuyển đổi

    6 định dạng
    —
    —
    —
    —
    —
    —

    Bảng phối màu

    Nhấp vào bất kỳ ô màu nào để nạp vào công cụ chuyển đổi

    Nhập mã màu hợp lệ để tự động sinh bảng màu

    Hướng dẫn sử dụng

    Làm theo các bước đơn giản sau để nhận kết quả chuẩn xác nhất.

    1Nhập hoặc dán mã màu: HEX, RGB, RGBA, HSL, HSLA hoặc OKLCH; công cụ sẽ tự động nhận diện định dạng.
    2Sử dụng bảng chọn màu trực quan bằng cách nhấp vào ô màu để chọn sắc độ mong muốn trên màn hình.
    3Khám phá các sắc thái: Chuyển qua các tab Tailwind, Bóng tối (Shades), Ánh sáng (Tints) hoặc Tông màu (Tones) để xem bảng 11 sắc thái tương ứng.
    4Nhấp vào bất kỳ ô màu nào trong bảng để nạp ngay sắc độ đó vào công cụ chuyển đổi.
    5Sao chép các định dạng đã chuyển đổi: Mỗi trường đều có nút sao chép chuyên dụng (HEX, RGBA, OKLCH...).
    6Nhấn Đặt lại để xóa sạch các trường và bắt đầu phối màu mới.

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

    Giải đáp các thắc mắc phổ biến nhất liên quan đến công cụ.

    Hỗ trợ 6 định dạng phổ biến nhất trong thiết kế và phát triển web: HEX (#2563eb), RGB (rgb(37, 99, 235)), RGBA (có kênh trong suốt alpha), HSL (hsl(221, 83%, 53%)), HSLA và không gian màu hiện đại OKLCH.

    OKLCH là không gian màu hiện đại được chuẩn hóa trong CSS Color Level 4, mô tả màu sắc tương đồng với thị giác con người (Độ sáng, Sắc độ, Góc màu). Hai màu có cùng giá trị L sẽ có cùng độ sáng cảm nhận được bằng mắt, lý tưởng cho việc xây dựng bảng màu giao diện dễ tiếp cận.

    Ô màu cạnh ô nhập liệu sẽ mở ra bộ chọn màu tương tác đầy đủ với quang phổ màu, bảng màu cơ bản và công cụ chấm màu (Eyedropper). Bất kỳ thay đổi nào cũng cập nhật ngay lập tức cả 6 định dạng.

    Kênh Alpha biểu thị độ mờ đục của màu sắc từ 0 (trong suốt hoàn toàn) đến 1 (màu đặc hoàn toàn). Ví dụ: rgba(37, 99, 235, 0.5) cho màu xanh trong suốt 50%.

    Mã HEX 6 ký tự đảm bảo tính tương thích phổ quát trên tất cả các trình duyệt và phần mềm thiết kế cũ. Nếu cần độ trong suốt, bạn nên sử dụng định dạng RGBA hoặc HSLA.

    Công cụ tự động sinh ra 11 sắc thái tương ứng theo thang chuẩn Tailwind (từ 50 đến 950), các biến thể tối hơn (Shades), sáng hơn (Tints) hoặc giảm độ bão hòa (Tones), cho phép bạn sao chép mã HEX của từng ô dễ dàng.

    Hoàn toàn bí mật. Mọi phép tính toán chuyển đổi màu đều diễn ra nội bộ trong trình duyệt của bạn.

    Bạn chỉ cần nhấp vào nút Sao chép bên cạnh định dạng mong muốn và dán trực tiếp vào thuộc tính CSS của mình như color, background-color hay border-color.

    Cách thức hoạt động

    Tìm hiểu phương pháp luận, công thức toán học và nguyên lý kỹ thuật của công cụ này.

    Chuyển đổi mã màu tức thì giữa HEX, RGB, HSL và OKLCH

    Các nhà thiết kế đồ họa và lập trình viên web thường xuyên phải làm việc với các công cụ có chuẩn mã màu khác nhau: Figma chuộng mã HEX, mã nguồn CSS thích HSL, React thường dùng RGBA và các Design System hiện đại đang nhanh chóng chuyển sang OKLCH. Bộ chuyển đổi màu sắc miễn phí của công cụ của chúng tôi hợp nhất các định dạng này trên một màn hình trực quan duy nhất.

    The Six Color Formats You Need to Know

    HEX là cú pháp lâu đời nhất trên internet. Một chuỗi 6 ký tự như #2563eb được hỗ trợ bởi mọi trình duyệt và công cụ đồ họa trên thế giới.

    RGB (Đỏ, Xanh lá, Xanh dương) phản ánh cách thức phát sáng của các điểm ảnh phụ trên màn hình kỹ thuật số với 3 kênh có giá trị từ 0 đến 255.

    RGBA bổ sung thêm kênh Alpha vào RGB để kiểm soát độ trong suốt (từ 0 đến 1), rất cần thiết cho các lớp phủ popup, kính mờ hay bóng đổ.

    HSL (Hue, Saturation, Lightness) biểu diễn màu sắc một cách trực quan trên vòng xoay màu 360 độ, rất thuận tiện để lập trình viên tạo biến thể màu sáng tối trong CSS.

    HSLA bổ sung thêm độ trong suốt Alpha cho định dạng HSL.

    OKLCH là tương lai của thiết kế giao diện web. Được chuẩn hóa trong CSS Color 4, không gian màu này mô phỏng chính xác cơ chế sinh học của mắt người: Thay đổi độ sáng mà giữ nguyên góc màu sẽ không làm lệch sắc độ cơ bản.

    Why Color Format Conversion Matters in Real Projects

    Cầu nối từ thiết kế đến mã nguồn: Chuyển đổi các mã HEX từ bản thiết kế sang HSL hoặc OKLCH để phục vụ các biến màu giao diện trong dự án web.

    Đảm bảo chuẩn tương phản tiếp cận WCAG: Không gian màu OKLCH giúp bạn dự đoán chính xác độ tương phản thực tế giữa chữ và nền, đảm bảo bài toán tiếp cận cho người dùng thị lực yếu.

    Thiết kế giao diện ban đêm (Dark Mode): Dễ dàng đảo ngược độ sáng mà vẫn giữ nguyên nhận diện thương hiệu nguyên bản của ứng dụng.

    Interactive Color Palette: Tailwind, Shades, Tints & Tones

    Với mỗi màu sắc bạn đưa vào, công cụ tự động trải rộng thành dải 11 sắc thái hài hòa:

    • Thang Tailwind: Tạo đầy đủ các mức độ từ 50, 100, 200 cho đến 950.
    • Bóng tối (Shades): 10 biến thể đậm dần bằng cách giảm dần độ sáng.
    • Ánh sáng (Tints): 10 biến thể nhạt dần bằng cách pha thêm sắc trắng.
    • Tông màu (Tones): Điều chỉnh giảm độ rực rỡ hướng về màu xám trung tính.

    How the Color Math Works

    Toàn bộ ma trận tính toán chuyển đổi màu sắc đều được thực thi bằng JavaScript ngay trong trình duyệt máy tính của bạn với tốc độ tính bằng phần triệu giây, hoạt động hoàn hảo ngay cả khi ngắt kết nối mạng.

    Cập nhật gần nhất:

    Công cụ chuyển đổi liên quan

    Khám phá thêm các công cụ tương tự để tăng tốc quy trình làm việc của bạn.

    Chuyển đổi đơn vị đo

    Chuyển đổi các đại lượng vật lý về chiều dài, khối lượng, nhiệt độ và diện tích.

    Chuyển đổi thời gian Unix

    Chuyển đổi timestamp Unix sang ngày giờ dễ đọc và tra cứu dấu thời gian Epoch.

    Chuyển SVG sang React JSX

    Chuyển đổi mã SVG thành component React JSX sạch và tối ưu cho dự án web.

    Nén và giảm dung lượng ảnh

    Nén tệp ảnh JPG, PNG và WebP mà vẫn giữ được chất lượng hiển thị sắc nét.