Chuyển Đổi Màu & Bảng Màu
Chuyển đổi tức thì giữa HEX, RGB, HSL, HSV, CMYK.
Đi kèm với tính năng sinh bảng màu và đo độ tương phản.
Bộ Chọn Màu
Mã Màu
/* CSS Variables */ --color-primary: #3b82f6; --color-primary-rgb: 59, 130, 246; --color-primary-hsl: 217, 90%, 60%;
Bảng Màu
Độ Tương Phản
Chữ Trắng Aa
Ratio: -
Chữ Đen Aa
Ratio: -
Màu Đã Lưu
Lưu màu sắc bằng nút ⭐ (Tối đa 20)
Về Trình Chuyển Đổi Màu
Trình Chuyển Đổi Mã Màu & Sinh Bảng Màu là một tiện ích online miễn phí cho phép biến hóa qua lại chớp nhoáng giữa 5 định dạng màu phổ dụng: HEX, RGB, HSL, HSV, và CMYK. Nó sở hữu một bộ chọn màu siêu trực quan đi kèm cơ chế tự động nặn ra các dải bảng màu tương đồng hay bổ túc cực kỳ khoa học.
Bên cạnh đó, chức năng đo lường độ tương phản WCAG (một chuẩn mực khắt khe về độ thân thiện trên web) được đính kèm sẵn. Nhờ đó, bạn lập tức phán đoán được liệu nền này đi với chữ trắng hay chữ đen thì vừa mắt. Code sinh ra được copy trong tíc tắc hoặc trích thẳng ra biến CSS, đẩy nhanh tốc độ múa phím cho cả giới thiết kế lẫn dân dev Front-end.
Cách sử dụng
Chọn Hoặc Nhập Mã Màu
Tùy ý ấn vào bảng màu, căn chỉnh các thanh trượt sắc độ, độ sáng hay độ mờ để pha màu. Bạn cũng có thể vứt thẳng mã màu có sẵn vào khung nhập HEX hay RGB.
Trích Xuất Mã Đã Đổi
Ngay lúc thay màu, tất tần tật các ô định dạng (HEX, RGB, HSL, HSV, CMYK) đều giật mình biến đổi theo. Chỉ cần cất tiếng ấn nút "Sao chép" bên cạnh là mã đó chui thẳng vào clipboard. Có cả nút copy trọn gói Biến CSS cực chất.
Check Bảng Màu & Tương Phản
Đảo mắt xuống phần "Bảng Màu" để nghía các gợi ý màu phối đẹp mê ly. Ở khu "Độ Tương Phản", bạn sẽ biết tỏng chữ Trắng hay Đen đứng trên nền này đọc có nhức mắt hay không.
Thuật Ngữ Về Màu
- HEX (Mã Màu Thập Lục Phân)
- Chuẩn mực quốc dân của làng thiết kế web. Nó có hình hài 6 ký tự như "#RRGGBB" (hoặc rút gọn 3 ký tự "#RGB"), gán mức độ của Đỏ (R), Xanh lá (G) và Xanh lam (B) bằng hệ Hex. Nếu cộng thêm độ mờ, nó thành 8 ký tự kiểu "#RRGGBBAA", được hỗ trợ nhiệt tình trên khắp các mặt trận HTML, CSS.
- RGB / RGBA
- Mô hình cộng màu mượn từ cơ chế ánh sáng của màn hình TV, máy tính (Đỏ, Xanh lá, Xanh lam). Mỗi tia được gắn cho nấc từ 0-255. Bọn CSS cực kỳ khoái viết thành "rgb(255, 0, 0)", thêm cái đuôi "a" (rgba) để kiểm soát độ trong vắt từ 0.0 - 1.0.
- HSL
- Đại diện cho Sắc Độ (Hue), Bão Hòa (Sat), Sáng Tối (Lit). Vì nó rất dễ mường tượng theo não người như là "chỉnh cho đậm đà hơn" hay "cho chói lóa tí nữa", HSL là bảo bối thần kỳ để thợ gõ CSS (hàm hsl) tùy biến các bộ theme động cho dự án.
- CMYK
- Mô hình trừ màu bằng 4 xô mực: Xanh lơ (Cyan), Hồng sẫm (Magenta), Vàng (Yellow), và Đen (Key). Đây là vũ khí của giới thợ in. Các trị số CMYK trên trình duyệt web chỉ là hàng mô phỏng cho có, nên để in không bị lỗi màu thì buộc phải chỉnh trong phần mềm thiết kế thực thụ.
- Độ Tương Phản (Theo chuẩn WCAG)
- Tỷ lệ chênh lệch độ rực sáng giữa nền móng và con chữ bên trên, một thước đo sinh tử do tổ chức Web Accessibility Guideline đề ra. Để một người bình thường có thể đọc được chữ mà không cau mày, tiêu chuẩn "4.5:1 (Cấp AA)" là tối thiểu đối với chữ thường, còn chữ cỡ bự thì nới lỏng còn "3:1".
Câu Hỏi Thường Gặp
- Q.Kết quả chuyển đổi CMYK có dùng in ấn chính xác 100% không?
- Các giá trị CMYK tính toán trên trình duyệt chỉ là thông số lý thuyết xấp xỉ. Màu in thực tế sẽ dao động rất nhiều phụ thuộc vào profile ICC và thuộc tính mực của máy in. Nếu muốn lấy CMYK chuẩn nhất để đem in, xin vui lòng quy đổi bằng các phần mềm quản lý màu chuyên nghiệp như Adobe Illustrator hay Photoshop.
- Q.Có hỗ trợ quy đổi thuộc tính trong suốt (alpha) không?
- Có, hoàn toàn hỗ trợ. Bằng cách gạt thanh "Độ mờ (Alpha)" bên trong bộ chọn màu hoặc gõ luôn chỉ số alpha vào mã màu, các mã định dạng như HEX (#RRGGBBAA), RGBA và HSLA sẽ được trích xuất hoàn hảo. Cực kỳ có lợi cho việc cắt code UI Web hiện đại luôn cần độ trong suốt.
- Q.Chức năng "Copy CSS Vars" nghĩa là sao?
- Chức năng này dùng để gom màu bạn vừa chọn ra thành cú pháp biến tùy chỉnh (CSS Variables). Nó sẽ phọt ra cấu trúc dạng --color-primary: #3b82f6;, kèm theo cả thông số RGB và HSL đã được tách dấu phẩy, giúp bạn dán thẳng vào file config của Tailwind CSS hay các hệ thống thay theme cực kỳ nhàn nhã.
- Q.Dữ liệu màu tôi vừa nhập có bị gửi lên máy chủ của web không?
- Không bao giờ. Mọi hoạt động của công cụ này đều chạy kín 100% bên phía client (bên trong trình duyệt của bạn). Không một mã màu hay bảng màu nào bị truyền đi hoặc lưu trữ tại máy chủ lạ. Thậm chí tính năng "Lưu vào Yêu Thích" cũng chỉ cất màu vào local storage của chính bạn, đảm bảo an toàn riêng tư tuyệt đối.
Trường Hợp Phổ Biến
Code Web & UI Design
Đem các mã HEX khô khan nhặt từ trong Figma hoặc XD vào để bẻ lái sang định dạng RGB hoặc HSL. Mở đường xuất các biến CSS sạch sẽ để xây dựng kho System Design của dự án.
Nâng cấp Sự Đồng Cảm Người Dùng
Quét lẹ xem chữ viết trên màu nền đang code liệu có chọc thủng ranh giới chuẩn mực WCAG hay không, từ đó giúp UX của sản phẩm cất cánh vì ai nhìn vào cũng thấy thoải mái.
Duyệt Màu Hệ Thống
Dùng làm cỗ máy vắt kiệt ý tưởng bằng cách quăng màu của thương hiệu vào, đợi nó đẻ ra vài dải màu đối xứng, tương phản đỉnh cao. Món hời khổng lồ cho dân Graphic và Branding.
Cầu Nối Thế Giới In Ấn
Đảo mã màu từ không gian kỹ thuật số (Web) sang thông số xô mực CMYK nhằm cung cấp một cái nhìn sơ bộ khi bạn chuẩn bị phải đem những banner, tờ rơi hay card visit ra nhà in ngoài phố.
Gửi phản hồi
Vui lòng cho chúng tôi biết suy nghĩ của bạn để giúp chúng tôi cải thiện công cụ.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.