Bảng màu thương hiệu dựa trên OKLCH. Chọn một màu cơ sở, nhận mọi loại hài hòa kinh điển cùng thang sắc độ 50–950. Khóa, roll lại, xuất ra CSS / Tailwind v4 / SCSS / JSON.
Bảng màu thương hiệu dựa trên OKLCH. Chọn một màu cơ sở, nhận mọi loại hài hòa kinh điển cùng thang sắc độ 50–950. Khóa, roll lại, xuất ra CSS / Tailwind v4 / SCSS / JSON.
Color Picker & Converter của chúng tôi dùng cho từng màu một — chọn / chuyển đổi / sao chép. Còn công cụ này dành cho bảng màu: đưa vào một màu cơ sở, nhận cả một hệ thống sẵn sàng cho thương hiệu (hài hòa + thang sắc độ) chỉ trong một lần. Khác biệt giống như mua một chiếc áo và sở hữu cả tủ quần áo.
HSL phân bố các tông màu không đều (vàng ở 60° trông sáng hơn nhiều so với xanh dương ở 240° dù cùng giá trị độ sáng). Một bảng màu tam giác trong HSL sẽ có một ô sáng hoặc xỉn rõ hơn các ô khác. OKLCH thì đồng đều về cảm nhận — ba ô có cùng độ sáng OKLCH trông sáng như nhau. Đó là lý do mọi hệ thống thiết kế hiện đại (Apple HI, Tailwind v4, IBM Carbon) đều chuyển sang OKLCH cho hài hòa và thang sắc độ.
Màu thương hiệu của bạn không bao giờ rời khỏi thiết bị. Mở DevTools → Network và bạn sẽ thấy không có request nào đi ra trong bất kỳ thao tác nào.
Mẹo: nhấn Space để roll lại các ô màu chưa khóa.
Hài hòa OKLCH, thang sắc độ, khóa và roll lại, xuất design token — cùng vài chi tiết nhỏ giúp việc dùng thực sự thú vị.
Bổ túc, tương đồng, tam giác, tứ giác, bổ túc tách, đơn sắc — tất cả được tính trong OKLCH nên một bảng màu tam giác gồm ba màu rực rỡ vẫn giữ độ sáng đồng đều. Không còn cảm giác đục như HSL.
Đưa vào màu thương hiệu của bạn, nhận thang sắc độ kiểu Tailwind 50, 100, 200, … 900, 950 được tạo bằng cách dịch độ sáng dọc theo một đường cong OKLCH. Chroma được nén ở các đầu mút để màu luôn nằm trong gam sRGB.
Ghim bất kỳ ô màu nào (biểu tượng khóa) và bấm Re-roll (hoặc chỉ cần nhấn Space) để biến đổi phần còn lại trong kiểu hài hòa đã chọn. Lặp nhanh, giữ lại những gì bạn yêu thích.
CSS custom properties (--brand-500), Tailwind v4 @theme block, SCSS map, và JSON design tokens sẵn sàng cho Style Dictionary / Figma Tokens. Kèm dải ô màu PNG 1200×200.
Mỗi ô màu hiển thị tỉ lệ tương phản WCAG so với đen hoặc trắng (chọn cái tốt hơn), kèm huy hiệu AA / AAA / fail. Phát hiện vấn đề tiếp cận trước khi sản phẩm ra mắt.
Mọi byte đều ở lại trên thiết bị của bạn. Toán OKLCH, sinh hài hòa, suy thang sắc độ, xuất PNG đều chạy bằng JavaScript cục bộ. Mở DevTools → Network để xác minh không có request nào đi ra.
Bốn bước từ một màu cơ sở đến một bảng màu hoàn chỉnh sẵn sàng dưới dạng design token.
Bấm vào ô màu, dán mã HEX, hoặc nhấn Random base để lấy cảm hứng. Công cụ sẽ lấy màu này làm tâm cho cả bảng — bao gồm các ô màu hài hòa và thang sắc độ 11 bậc.
Mặc định là Tương đồng — ba màu trong phạm vi 30° quanh màu cơ sở, hoàn hảo cho bảng màu thương hiệu nhẹ nhàng. Bổ túc để tạo điểm nhấn tương phản. Tam giác / Tứ giác cho thương hiệu biên tập / vui tươi. Đơn sắc cho hệ thống cùng một tông màu. Tất cả được tính trong OKLCH nên độ sáng đồng đều.
Bấm biểu tượng khóa trên bất kỳ ô màu nào bạn muốn giữ, sau đó nhấn Space (hoặc bấm Re-roll) để biến đổi phần còn lại trong kiểu hài hòa. Lặp nhanh. Chỉnh trực tiếp bất kỳ ô nào bằng cách bấm vào ô HEX nếu bạn muốn ấn định một giá trị chính xác.
Sao chép đầu ra CSS (custom properties), Tailwind v4 (khối @theme), SCSS map, hoặc JSON design tokens. Hoặc bấm Download PNG để có dải ô màu 1200×200 sẵn sàng đưa vào tài liệu thiết kế.
Bốn tình huống phổ biến nơi một công cụ palette OKLCH ưu tiên quyền riêng tư vượt trội so với việc tinh chỉnh hex bằng tay trong Figma.
Bạn có một màu thương hiệu, bạn cần một hệ thống xoay quanh nó. Đưa HEX vào, chọn Tương đồng, roll lại đến khi hai màu phụ trợ ăn khớp, khóa cả ba. Chuyển sang khung Thang sắc độ, sao chép khối Tailwind @theme, dán vào app.css của dự án mới. Tổng thời gian: 5 phút.
Mặc định indigo của Tailwind không phải thương hiệu của bạn. Thương hiệu bạn là #5B3FCD. Đưa nó vào, nhận thang sắc độ 11 bậc phản chiếu hoàn hảo cấu trúc của Tailwind. Sao chép khối @theme — mọi bg-brand-500 / text-brand-700 hoạt động ngay.
Mỗi ô màu hiển thị tỉ lệ tương phản WCAG kèm huy hiệu AA/AAA. Kiểm tra nhanh rằng brand-500 đạt AA trên nền trắng, và brand-100 vẫn đọc được khi làm nền với chữ brand-900. Sửa các ô có vấn đề bằng cách roll lại từng cái một.
Các agency / công ty đa thương hiệu duy trì N hệ thống thiết kế song song, mỗi hệ thống cùng cấu trúc nhưng khác tông màu thương hiệu. Dùng cùng một quy trình hài hòa + thang sắc độ cho mọi thương hiệu, xuất từng cái thành JSON token, đưa vào Style Dictionary. Cùng cấu trúc, khác bản sắc.
Màu thương hiệu của bạn không bao giờ rời khỏi thiết bị. Mở DevTools → Network và bạn sẽ thấy không có request nào đi ra trong bất kỳ thao tác nào.
canvas cục bộ; ảnh dải màu được tạo hoàn toàn trong bộ nhớ trình duyệt và tải xuống dưới dạng Blob — không gì đi qua mạng.
Các bài đọc chọn lọc về bảng màu OKLCH, hệ thống màu thương hiệu và design token.
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
Color Picker & Converter của chúng tôi dùng cho từng màu một — chọn / chuyển đổi / sao chép. Còn công cụ này dành cho bảng màu: đưa vào một màu cơ sở, nhận cả một hệ thống sẵn sàng cho thương hiệu (hài hòa + thang sắc độ) chỉ trong một lần. Khác biệt giống như mua một chiếc áo và sở hữu cả tủ quần áo.
HSL phân bố các tông màu không đều (vàng ở 60° trông sáng hơn nhiều so với xanh dương ở 240° dù cùng giá trị độ sáng). Một bảng màu tam giác trong HSL sẽ có một ô sáng hoặc xỉn rõ hơn các ô khác. OKLCH thì đồng đều về cảm nhận — ba ô có cùng độ sáng OKLCH trông sáng như nhau. Đó là lý do mọi hệ thống thiết kế hiện đại (Apple HI, Tailwind v4, IBM Carbon) đều chuyển sang OKLCH cho hài hòa và thang sắc độ.
Đây là thang màu thương hiệu kiểu Tailwind: indigo-50 (sáng nhất), indigo-100, indigo-200, … indigo-900, indigo-950 (đậm nhất). Đưa vào màu thương hiệu của bạn và công cụ sẽ tự động tạo cả 11 bậc bằng cách dịch độ sáng OKLCH theo một đường cong cố định. Kết quả là một thay thế trực tiếp cho mọi token bảng màu Tailwind, theo tông màu thương hiệu của bạn.
Bấm vào biểu tượng khóa ở góc trên bên trái của ô màu — nó sẽ giữ nguyên. Sau đó bấm Re-roll hoặc nhấn Space để biến đổi mọi ô chưa khóa trong kiểu hài hòa đã chọn. Đây là cách bạn tìm ra một bảng màu tuyệt vời: ghim màu thương hiệu đã quyết, rồi khám phá các biến thể xung quanh nó.
Không. Toán OKLCH, sinh hài hòa, suy thang sắc độ, tính tỉ lệ tương phản, xuất PNG, mọi thao tác sao chép vào clipboard — tất cả chạy bằng JavaScript trên thiết bị của bạn. Mở DevTools → Network và bạn sẽ thấy không có request nào đi ra. Dán màu thương hiệu, design token nội bộ, bảng màu thuộc NDA — không gì rời khỏi máy của bạn.