nicetool.dev logo

Chuyển đổi màu

Nhập bất kỳ màu CSS nào (HEX, rgb(), hsl(), oklch(), cmyk() hoặc tên màu).

#3B82F6
Định dạng
  • HEX#3B82F6
  • RGBrgb(59 130 246)
  • RGB (legacy)rgb(59, 130, 246)
  • HSLhsl(217 91.2% 59.8%)
  • HSVhsv(217 76% 96.5%)
  • HWBhwb(217 23.1% 3.5%)
  • OKLCHoklch(62.31% 0.188 259.81)
  • CMYKcmyk(76% 47% 0% 4%)

Độ tương phản WCAG

Aa 123

Chữ trên nền trắng

3.68:1

AAAA chữ lớnAAA
Aa 123

Chữ trên nền đen

5.71:1

AAAA chữ lớnAAA

Dải sắc độ

Bấm vào một sắc độ để sử dụng.

Vì sao cần chuyển đổi định dạng màu?

Designer và lập trình viên làm việc với nhiều định dạng màu: HEX trong công cụ thiết kế, rgb() và hsl() trong CSS, OKLCH trong các design system hiện đại như Tailwind CSS v4, và CMYK cho in ấn. Công cụ này chuyển đổi giữa tất cả chúng ngay lập tức.

Tính năng

  • • Xuất HEX, RGB, HSL, HSV, HWB, OKLCH và CMYK
  • • Bảng chọn màu và thanh chỉnh độ trong suốt
  • • Tỷ lệ tương phản WCAG 2 trên nền trắng và đen
  • • Tự động tạo dải màu sáng và tối

Tức thì & cục bộ

Mọi phép chuyển đổi được tính trong trình duyệt, không có request mạng nào.

Màu dễ đọc, không theo dõi.

Cách dùng công cụ Chuyển đổi màu

  1. 1

    Nhập màu theo bất kỳ định dạng CSS nào: #3B82F6, rgb(59 130 246), hsl(217 91% 60%), oklch(...), cmyk(...) hoặc tên màu như tomato. Bạn cũng có thể chọn bằng bảng chọn màu.

  2. 2

    Kéo thanh độ trong suốt nếu cần. Mọi định dạng cập nhật cùng lúc, kể cả HEX 8 chữ số và rgba.

  3. 3

    Sao chép định dạng cần dùng: HEX để trao đổi thiết kế, rgb() hay hsl() cho CSS, OKLCH cho design token hiện đại, CMYK làm điểm khởi đầu cho in ấn.

  4. 4

    Kiểm tra độ tương phản WCAG với chữ trắng và chữ đen, và bấm vào một sắc độ trong bảng để xem các biến thể sáng hơn hoặc tối hơn.

Ví dụ thực tế

Chuyển thiết kế sang code

Designer gửi mã #0EA5E9 từ Figma. Đổi sang hsl() để dễ tạo trạng thái hover và active chỉ bằng cách thay đổi độ sáng.

Kiểm tra khả năng tiếp cận

Chữ nội dung cần tỉ lệ tương phản ít nhất 4,5:1 theo WCAG AA. Hãy kiểm tra màu thương hiệu trước khi dùng làm nền nút có chữ trắng.

Xây dựng thang màu

Dùng các sắc độ tạo ra làm điểm khởi đầu cho bảng màu 50 đến 900 trong Tailwind CSS hay design system của bạn.

Tài liệu in

Đổi màu trên màn hình sang CMYK để trao đổi với nhà in. Hãy coi đó là giá trị gần đúng: màu in chính xác còn phụ thuộc giấy và cấu hình máy in.

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

RGB và HSL khác nhau thế nào?+

Cả hai mô tả cùng một màu. RGB pha trộn ánh sáng đỏ, xanh lá và xanh dương; HSL dùng sắc độ, độ bão hòa và độ sáng, dễ điều chỉnh hơn với con người, ví dụ làm màu sáng thêm 10%.

Vì sao nên dùng OKLCH?+

OKLCH đồng đều về cảm nhận: cùng mức thay đổi độ sáng trông khác biệt như nhau với mắt người, khác với HSL. Mọi trình duyệt hiện đại đều hỗ trợ và nó giúp tạo thang màu cũng như giao diện tối nhất quán hơn.

Cần tỉ lệ tương phản bao nhiêu?+

WCAG AA yêu cầu 4,5:1 cho chữ thường và 3:1 cho chữ lớn (khoảng 24 px, hoặc 19 px đậm). Mức AAA nâng lên 7:1 và 4,5:1.

Giá trị CMYK có chính xác không?+

Không. Đổi từ RGB màn hình sang CMYK mà không có cấu hình màu chỉ cho kết quả gần đúng theo công thức. Với ấn phẩm quan trọng về thương hiệu, hãy yêu cầu nhà in in thử hoặc dùng mã Pantone.