Nhập màu → xem đầy đủ: tên màu, format hex/rgb/hsl, biến thể tối/sáng, màu bổ sung và contrast accessibility
CSS Name
royalblueRGB
HSL
Color Formats
Color Variations
Lighter shades
Current
Darker shades
Color Harmonies
Complementary
180°
Analogous
±30°
Triadic
±120°
Split-Complementary
150°/210°
Accessibility — Contrast
vs White (#ffffff)
3.68:1
vs Black (#000000)
5.71:1
Recommended text color
Black text#000000
Contrast ratio: 5.71:1
Điểm nổi bật
Các điểm đáng chú ý nhất của công cụ này để bạn nắm nhanh trước khi dùng.
HEX, RGB, HSL, RGBA — tất cả được sync realtime. Thay đổi bất kỳ đầu vào nào và các định dạng khác tự cập nhật.
Tự động nhận ra tên màu CSS gần nhất — "cornflowerblue", "darkslategray" hay "mediumaquamarine".
Complementary, Analogous, Triadic, Split-complementary — tính toán ngay từ màu đang chọn.
Xem ngay contrast ratio vs white và black, biết ngay nên dùng chữ màu gì trên nền màu đó.
Cách sử dụng
Làm theo từng bước để dùng công cụ nhanh và đúng intent ngay từ lần đầu.
Click vào ô màu lớn để mở color picker, nhập hex trực tiếp, hoặc kéo slider RGB/HSL.
Copy từng định dạng (HEX, RGB, HSL) theo nhu cầu — dùng HEX cho CSS thông thường, HSL cho tính toán màu.
Xem biến thể sáng/tối và màu harmony để mở rộng palette hoặc tìm màu accent phù hợp.
Câu hỏi thường gặp
Những câu hỏi gặp nhiều nhất khi dùng công cụ, được trình bày ngắn gọn và dễ quét.