OKLCH là gì và tại sao tôi nên dùng thay vì HEX hay HSL?

OKLCH (Độ Sáng, Chroma, Màu Sắc) là không gian màu đồng đều về mặt nhận thức dựa trên mô hình Oklab. Không giống HEX hay HSL, các thay đổi số bằng nhau trong OKLCH tạo ra sự khác biệt nhận thức bằng nhau. Điều này khiến nó trở nên lý tưởng để thiết kế bảng màu dễ tiếp cận, tạo gradient mượt mà và tạo thang màu Tailwind v4 nhất quán. Ngoài ra, OKLCH đã được hỗ trợ trong tất cả các trình duyệt hiện đại như một phần của tiêu chuẩn CSS Color Level 4.

Làm thế nào để chuyển đổi HEX sang OKLCH?

Dán giá trị HEX (ví dụ: #3b82f6) vào trường nhập HEX và trường OKLCH sẽ cập nhật ngay lập tức với ký hiệu tương đương oklch(0.6 0.18 250). Tất cả các định dạng khác — OKLab, RGB và HSL — cũng đồng bộ cùng lúc. Bạn không cần làm gì thêm — việc chuyển đổi diễn ra hoàn toàn tự động và theo thời gian thực mà không cần tải lại trang.

'Ngoài gam sRGB' có nghĩa là gì và màu sẽ xảy ra điều gì?

Một số màu OKLCH — đặc biệt là các giá trị chroma cao — vượt quá không gian màu sRGB mà hầu hết các màn hình sử dụng. Khi điều này xảy ra, công cụ áp dụng thuật toán toGamut của CSS Color 4 để tìm màu sRGB có thể hiển thị gần nhất. Một banner cảnh báo màu hổ phách xuất hiện hiển thị giá trị gốc ngoài gam cùng với kết quả được ánh xạ, mang lại sự minh bạch hoàn toàn về quá trình chuyển đổi.

Bộ tạo bảng màu OKLCH Tailwind v4 hoạt động như thế nào?

Bộ tạo sử dụng lịch độ sáng chính thức của Tailwind v4 (50=0.971, 100=0.945, cho đến 950=0.238) áp dụng cho màu sắc và chroma hiện tại của bạn. Nó tạo ra 11 bước màu từ sáng đến tối và xuất chúng dưới dạng khối mã @theme { --color-brand-50: oklch(...); } sẵn sàng dán vào CSS của bạn. Chỉ cần chọn bất kỳ màu cơ sở nào và bảng màu sẽ được tạo tự động.

Tại sao nội suy OKLCH trông đẹp hơn HSL cho gradient?

HSL nội suy qua hệ tọa độ hình trụ không phù hợp với nhận thức của con người, thường gây ra điểm xám hoặc sự dịch chuyển màu sắc không mong muốn giữa gradient. OKLCH nội suy trong không gian Oklab đồng đều về mặt nhận thức, vì vậy độ sáng và chroma chuyển tiếp mượt mà mà không có các sắc màu không mong muốn. Kết quả là gradient trông tự nhiên và chuyên nghiệp hơn nhiều.

Bộ chuyển đổi OKLCH này có miễn phí và riêng tư không?

Có. Công cụ hoàn toàn miễn phí và chạy hoàn toàn trong trình duyệt của bạn bằng thư viện culori. Không có giá trị màu nào được tải lên máy chủ. Bạn có thể tự do chuyển đổi màu mà không lo về quyền riêng tư hay chi phí — công cụ có sẵn mà không cần đăng ký và không có giới hạn sử dụng.

OKLCH CSS Color 4 có hoạt động trên tất cả các trình duyệt không?

Cú pháp màu OKLCH (oklch()) được hỗ trợ trong tất cả các trình duyệt hiện đại kể từ năm 2023, bao gồm Chrome 111+, Firefox 113+, Safari 15.4+ và Edge 111+. Đối với các trình duyệt cũ hơn, hãy sử dụng các giá trị HEX hoặc RGB dự phòng mà bộ chuyển đổi này cung cấp. Bạn có thể sử dụng OKLCH trong môi trường sản xuất một cách an toàn bằng cách cung cấp các giá trị dự phòng phù hợp cho các môi trường cũ hơn.

Công Cụ Màu Sắc

Bộ Chuyển Đổi Màu OKLCH – CSS Color 4, Bộ Tạo Bảng Màu Tailwind v4

Bộ chuyển đổi màu OKLCH miễn phí với đồng bộ trực tiếp giữa OKLCH, OKLab, RGB, HSL và HEX. Bao gồm thanh trượt L/C/H/alpha, ánh xạ gam màu CSS Color 4 và xuất bảng màu Tailwind v4.

OKLCH (Độ Sáng, Chroma, Màu Sắc) là không gian màu đồng đều về mặt nhận thức được xây dựng trên mô hình Oklab và được chấp nhận chính thức trong CSS Color Level 4. Không giống RGB hay HSL, OKLCH duy trì độ sáng nhận thức nhất quán trên tất cả các màu sắc, khiến nó trở nên lý tưởng cho các hệ thống màu có thể truy cập, bảng màu Tailwind v4 và gradient mượt mà.

Cách Sử Dụng Bộ Chuyển Đổi Màu OKLCH

1
Nhập giá trị màu
Gõ hoặc dán giá trị theo bất kỳ định dạng nào được hỗ trợ: oklch(0.6 0.18 250), #3b82f6, rgb(59, 130, 246), hsl(217deg 91% 60%) hoặc oklab(0.6 -0.056 -0.169). Công cụ đồng bộ tất cả các định dạng khác ngay lập tức.
2
Tinh chỉnh với thanh trượt L/C/H/Alpha
Kéo thanh trượt Độ Sáng (L), Chroma (C), Màu Sắc (H) hoặc Alpha. Thanh trượt Chroma hiển thị điểm đánh dấu ranh giới gam sRGB để bạn luôn biết khi nào màu vượt quá phạm vi hiển thị tiêu chuẩn.
3
Kiểm tra cảnh báo gam màu nếu xuất hiện
Nếu màu OKLCH của bạn nằm ngoài gam sRGB, một banner cảnh báo màu hổ phách sẽ hiển thị giá trị gốc và kết quả được ánh xạ bởi toGamut CSS Color 4 dùng để hiển thị.
4
Tạo bảng màu Tailwind v4
Phần bảng màu OKLCH Tailwind v4 tự động tạo các bước màu 50–950 cho màu sắc hiện tại của bạn, theo lịch độ sáng chính thức của Tailwind. Nhấp Sao Chép để dán khối @theme trực tiếp vào CSS của bạn.

Tài Liệu Tham Khảo

W3C CSS Color Level 4 – oklch()
Đặc tả W3C xác định ký hiệu màu OKLCH và các thuật toán ánh xạ gam màu.
Culori – Thư Viện Màu JavaScript
Thư viện mã nguồn mở hỗ trợ chuyển đổi OKLCH, ánh xạ toGamut và nội suy nhận thức trong công cụ này.
Evil Martians – OKLCH trong CSS: Tại Sao Bỏ RGB và HSL?
Hướng dẫn toàn diện giải thích những ưu điểm của OKLCH so với RGB và HSL cho công việc màu sắc hiện đại.
Tailwind CSS v4 – Bảng Màu Mặc Định
Tài liệu bảng màu chính thức của Tailwind, bao gồm các giá trị độ sáng OKLCH được sử dụng trong bộ tạo bảng màu này.

Công Cụ Liên Quan

Bộ Chuyển Đổi Màu

Chuyển đổi giữa RGB, RGBA, HEX, HSL, HSV và CMYK với đồng bộ trực tiếp hai chiều.

Bộ Thu Nhỏ CSS

Thu nhỏ CSS sử dụng các giá trị màu OKLCH của bạn.

Trình Xem SVG

Xem trước và kiểm tra đồ họa SVG sử dụng các giá trị fill và stroke OKLCH.

Câu Hỏi Thường Gặp

OKLCH là gì và tại sao tôi nên dùng thay vì HEX hay HSL?: OKLCH (Độ Sáng, Chroma, Màu Sắc) là không gian màu đồng đều về mặt nhận thức dựa trên mô hình Oklab. Không giống HEX hay HSL, các thay đổi số bằng nhau trong OKLCH tạo ra sự khác biệt nhận thức bằng nhau. Điều này khiến nó trở nên lý tưởng để thiết kế bảng màu dễ tiếp cận, tạo gradient mượt mà và tạo thang màu Tailwind v4 nhất quán. Ngoài ra, OKLCH đã được hỗ trợ trong tất cả các trình duyệt hiện đại như một phần của tiêu chuẩn CSS Color Level 4.
Làm thế nào để chuyển đổi HEX sang OKLCH?: Dán giá trị HEX (ví dụ: #3b82f6) vào trường nhập HEX và trường OKLCH sẽ cập nhật ngay lập tức với ký hiệu tương đương oklch(0.6 0.18 250). Tất cả các định dạng khác — OKLab, RGB và HSL — cũng đồng bộ cùng lúc. Bạn không cần làm gì thêm — việc chuyển đổi diễn ra hoàn toàn tự động và theo thời gian thực mà không cần tải lại trang.
'Ngoài gam sRGB' có nghĩa là gì và màu sẽ xảy ra điều gì?: Một số màu OKLCH — đặc biệt là các giá trị chroma cao — vượt quá không gian màu sRGB mà hầu hết các màn hình sử dụng. Khi điều này xảy ra, công cụ áp dụng thuật toán toGamut của CSS Color 4 để tìm màu sRGB có thể hiển thị gần nhất. Một banner cảnh báo màu hổ phách xuất hiện hiển thị giá trị gốc ngoài gam cùng với kết quả được ánh xạ, mang lại sự minh bạch hoàn toàn về quá trình chuyển đổi.
Bộ tạo bảng màu OKLCH Tailwind v4 hoạt động như thế nào?: Bộ tạo sử dụng lịch độ sáng chính thức của Tailwind v4 (50=0.971, 100=0.945, cho đến 950=0.238) áp dụng cho màu sắc và chroma hiện tại của bạn. Nó tạo ra 11 bước màu từ sáng đến tối và xuất chúng dưới dạng khối mã @theme { --color-brand-50: oklch(...); } sẵn sàng dán vào CSS của bạn. Chỉ cần chọn bất kỳ màu cơ sở nào và bảng màu sẽ được tạo tự động.
Tại sao nội suy OKLCH trông đẹp hơn HSL cho gradient?: HSL nội suy qua hệ tọa độ hình trụ không phù hợp với nhận thức của con người, thường gây ra điểm xám hoặc sự dịch chuyển màu sắc không mong muốn giữa gradient. OKLCH nội suy trong không gian Oklab đồng đều về mặt nhận thức, vì vậy độ sáng và chroma chuyển tiếp mượt mà mà không có các sắc màu không mong muốn. Kết quả là gradient trông tự nhiên và chuyên nghiệp hơn nhiều.
Bộ chuyển đổi OKLCH này có miễn phí và riêng tư không?: Có. Công cụ hoàn toàn miễn phí và chạy hoàn toàn trong trình duyệt của bạn bằng thư viện culori. Không có giá trị màu nào được tải lên máy chủ. Bạn có thể tự do chuyển đổi màu mà không lo về quyền riêng tư hay chi phí — công cụ có sẵn mà không cần đăng ký và không có giới hạn sử dụng.
OKLCH CSS Color 4 có hoạt động trên tất cả các trình duyệt không?: Cú pháp màu OKLCH (oklch()) được hỗ trợ trong tất cả các trình duyệt hiện đại kể từ năm 2023, bao gồm Chrome 111+, Firefox 113+, Safari 15.4+ và Edge 111+. Đối với các trình duyệt cũ hơn, hãy sử dụng các giá trị HEX hoặc RGB dự phòng mà bộ chuyển đổi này cung cấp. Bạn có thể sử dụng OKLCH trong môi trường sản xuất một cách an toàn bằng cách cung cấp các giá trị dự phòng phù hợp cho các môi trường cũ hơn.