Khách hàng gửi logo và bảo: "dùng màu y chang trong này nhé". Bạn nhìn vào file PNG và không biết màu đó là # bao nhiêu. Hay bạn đang code CSS và muốn thử nghiệm màu sắc mà không cần mở Figma hay Photoshop. Color Picker giải quyết cả hai — chọn màu trực quan, lấy ngay mã HEX, RGB, HSL hay HSV, dùng được luôn trong code.
Tại sao cần color picker khi làm web?
Màu sắc trong thiết kế web không đơn giản là "màu đỏ" hay "màu xanh" — mỗi màu cần một giá trị chính xác để hiển thị nhất quán trên mọi màn hình, mọi trình duyệt. Một màu xanh dương có thể có hàng ngàn biến thể khác nhau, và sai một chút là sai cả bộ nhận diện thương hiệu.
Color picker giúp bạn: chọn màu chính xác bằng mắt, lấy mã màu theo định dạng cần dùng, thử nghiệm màu sắc nhanh mà không cần mở tool thiết kế nặng, và convert qua lại giữa các định dạng màu khác nhau.
Các định dạng màu phổ biến
| Định dạng | Ví dụ | Dùng ở đâu | Đặc điểm |
|---|---|---|---|
| HEX | #FF5733 | CSS, HTML, design tool | Phổ biến nhất — 6 ký tự hex đại diện cho RGB |
| RGB | rgb(255, 87, 51) | CSS, canvas, image processing | 3 kênh màu 0-255, dễ hiểu về mặt kỹ thuật |
| RGBA | rgba(255, 87, 51, 0.8) | CSS với độ trong suốt | Thêm kênh Alpha (0=trong suốt, 1=đục) |
| HSL | hsl(11, 100%, 60%) | CSS, thân thiện với designer | Hue-Saturation-Lightness — dễ điều chỉnh sắc thái hơn RGB |
| HSLA | hsla(11, 100%, 60%, 0.8) | CSS với độ trong suốt | HSL + Alpha channel |
| HSV/HSB | hsv(11°, 80%, 100%) | Photoshop, Figma, design tools | Hue-Saturation-Value — trực quan hơn trong color picker |
| CMYK | cmyk(0, 66, 80, 0) | In ấn, print design | Cyan-Magenta-Yellow-Key(Black) — dành cho in ấn |
Cách sử dụng tool
- Chọn màu bằng mắt: Kéo con trỏ trên bảng màu (color canvas) để chọn màu mong muốn — trục ngang là saturation, trục dọc là brightness.
- Chỉnh Hue: Kéo thanh spectrum ngang để chọn màu gốc (hue) — đỏ, cam, vàng, xanh lá, xanh dương, tím…
- Chỉnh Alpha: Kéo thanh opacity để điều chỉnh độ trong suốt từ 0% đến 100%.
- Nhập mã trực tiếp: Gõ hoặc paste HEX, RGB, HSL vào ô nhập liệu — bảng màu tự động cập nhật.
- Copy mã màu: Nhấn icon copy bên cạnh bất kỳ định dạng nào để copy vào clipboard.
HEX, RGB hay HSL — dùng cái nào trong CSS?
| Tình huống | Nên dùng | Lý do |
|---|---|---|
| Màu solid không cần transparency | HEX | Ngắn gọn, copy nhanh, hầu hết designer quen dùng |
| Cần điều chỉnh opacity | RGBA hoặc HSLA | Kênh Alpha cho phép điều chỉnh độ trong suốt |
| Tạo color system, palette nhất quán | HSL | Dễ tạo dark/light variant — chỉ thay đổi Lightness |
| Làm việc với canvas, WebGL | RGB (0-1) | WebGL dùng giá trị 0.0-1.0 thay vì 0-255 |
| CSS custom properties (variables) | HSL | Dễ generate màu programmatically với hsl(var(--hue), ...) |
Bí quyết làm việc với màu sắc trong thiết kế web
- Dùng HSL để tạo color palette: Giữ nguyên Hue và Saturation, chỉ thay đổi Lightness để có các màu sáng tối nhất quán. Ví dụ:
hsl(220, 80%, 20%)là màu tối,hsl(220, 80%, 95%)là màu rất nhạt — cùng một tông xanh dương. - Contrast ratio cho accessibility: Màu chữ trên nền cần đạt contrast ratio tối thiểu 4.5:1 (WCAG AA) để người dùng có thị lực kém đọc được. Tool color picker thường hiển thị contrast ratio ngay khi bạn chọn màu.
- CSS custom properties + HSL: Kết hợp CSS variables với HSL giúp tạo dark mode dễ dàng — chỉ cần thay đổi giá trị Lightness trong một chỗ, toàn bộ theme cập nhật.
- Màu sắc thương hiệu: Luôn lưu mã màu chính xác (HEX) vào tài liệu dự án hoặc design token — tránh dùng tên màu như
bluehayredvì mỗi trình duyệt render khác nhau.
Named colors trong CSS
CSS hỗ trợ 140+ tên màu được đặt sẵn — từ những cái quen thuộc như red, blue, white, black cho đến những cái buồn cười như rebeccapurple (được đặt theo tên con gái của một developer nổi tiếng) hay cornflowerblue, lemonchiffon, papayawhip. Tuy nhiên trong dự án thực tế, nên dùng HEX hoặc HSL thay vì named colors để kiểm soát màu chính xác hơn.
Kết luận
Color picker tưởng chỉ là công cụ nhỏ nhưng lại xuất hiện trong workflow hàng ngày của mọi frontend developer và designer. Có sẵn một tool nhanh, không cần mở app nặng, copy được ngay nhiều định dạng — tiết kiệm được kha khá thao tác mỗi ngày.
Khám phá thêm các tool hữu ích tại codetuthub.com/tools.
0 Bình luận