Eyedrop màu từ screenshot brand & landing đối thủ | Image color picker【2026】

Freelance và team outsourcing ở Việt Nam hay nhận brief kiểu: “Làm landing giống vibe trang này” kèm một URL hoặc file PNG. Designer chưa gửi Figma, hoặc bạn chỉ có quyền xem bản live. Lúc đó image color picker (eyedrop từ ảnh) là cầu nối nhanh giữa screenshot và tailwind.config / CSS variables.

Bài này tập trung góc eyedrop từ screenshot brand & competitor landing — không phải hướng dẫn “click 3 bước” chung chung. Bạn sẽ có checklist pixel nào nên lấy, lỗi JPEG hay gặp, và cách đưa màu vào token UI mà không lệch với bản live.

Bài viết này giúp bạn

• Hiểu khi nào dùng eyedrop thay vì DevTools / Figma
• Quy trình lấy 5–8 màu cốt lõi từ một landing
• Tránh lệch màu do JPEG, zoom, và dark mode screenshot
• Đưa HEX vào CSS variables hoặc Tailwind một cách có tên
• Biết giới hạn: màu ≠ brand kit đầy đủ

---

Vì sao đoán màu bằng mắt thường sai

Màn hình laptop văn phòng, màn hình khách hàng, và bản in PDF marketing không cùng gamma. Hai HEX lệch #0F766E vs #0D9488 nhìn gần giống trên OLED nhưng lệch rõ trên LCD văn phòng — và trong code review sẽ thành “sao nút khác Figma?”.

Eyedrop đọc pixel đã render, không phải “cảm giác”. Với landing đối thủ, đây thường là nguồn duy nhất bạn có quyền dùng ngay (không có design system của họ).

Khi nào nên eyedrop — khi nào không

Tình huống	Nên eyedrop?	Ghi chú
Client gửi screenshot brand + “làm giống tone”	Có	PNG tốt hơn JPEG
Cần khớp màu nút trên staging vs production	Có	So sánh cùng điều kiện zoom 100%
Đã có Figma variables đầy đủ	Không cần	Copy token từ Figma nhanh hơn
Cần toàn bộ scale 50–950	Một phần	Eyedrop 1–2 màu gốc rồi derive HSL
Logo vector / SVG có fill	Không	Đọc fill trong SVG chính xác hơn ảnh raster

---

Image color picker làm gì (đúng kỹ thuật)

Công cụ tải ảnh lên canvas, khi bạn click sẽ đọc getImageData tại tọa độ đó và trả về:

• HEX — #1d4ed8
• RGB — rgb(29, 78, 216)
• HSL — hsl(224, 76%, 48%)

Lấy mã màu từ ảnh trên Kawa hỗ trợ kéo-thả, chọn file, hoặc Ctrl+V dán ảnh từ clipboard — hữu ích khi vừa Win+Shift+S / screenshot macOS. Bạn có thể thêm vào bảng màu (tối đa 10 màu, lưu localStorage trình duyệt). Xử lý trong trình duyệt, không upload file lên server — phù hợp mock nội bộ hoặc landing chưa public.

So với cách khác

---

Quy trình: từ screenshot landing → token UI

Bước 1 — Chụp đúng nguồn

1. Mở landing ở zoom 100% (không 90%/110% — một số trình duyệt làm soft pixel).
2. Ưu tiên PNG (Win+Shift+S rồi lưu PNG, hoặc snipping tool lossless).
3. Chụp đủ: hero nền, headline, primary CTA, secondary link, border/card.
4. Nếu trang có dark/light toggle — chụp đúng theme bạn sẽ implement trước.

Bước 2 — Eyedrop theo thứ tự ưu tiên

Đừng click lung tung. Lấy theo lớp:

1. Surface / background — nền hero hoặc body
2. On-surface (text) — chữ chính trên nền đó
3. Primary — nút CTA lớn nhất
4. Primary foreground — chữ trên nút
5. Accent / link — màu nhấn thứ hai
6. Border / muted — đường kẻ, placeholder
7. Success / danger (nếu form có) — chỉ khi nhìn thấy trên screenshot

Mỗi màu: click vùng phẳng lớn (giữa nút), không click cạnh chữ có antialias xám.

Bước 3 — Đặt tên trước khi dán code

Sai phổ biến: copy 6 HEX rồi đặt tên --blue1, --blue2. Đặt theo vai trò:

:root {
  --color-surface: #0b1220;
  --color-text: #e8eef9;
  --color-primary: #3b82f6;
  --color-primary-fg: #ffffff;
  --color-accent: #22d3ee;
  --color-border: #1e293b;
}

Hoặc Tailwind:

// tailwind.config.js (rút gọn)
theme: {
  extend: {
    colors: {
      brand: {
        surface: "#0b1220",
        primary: "#3b82f6",
        accent: "#22d3ee",
      },
    },
  },
}

Bước 4 — Kiểm tra contrast ngay

Màu đẹp trên landing đối thủ không đảm bảo WCAG AA với chữ tiếng Việt (dấu thanh làm glyph phức tạp hơn Latin thuần). Sau khi có --color-text / --color-primary-fg, chạy qua kiểm tra tương phản trước khi merge.

---

Case study 1: Landing SaaS đối thủ (freelance)

Bối cảnh: Client gửi link competitor + “muốn primary xanh tương tự, không copy logo”. Không có Figma.

Làm:

1. Screenshot hero PNG, dán vào image color picker bằng Ctrl+V.
2. Lấy: nền #0F172A, CTA #2563EB, chữ #F8FAFC, accent link #38BDF8.
3. Derive thêm primary-600 / primary-700 bằng HSL (giảm lightness ~6–8%) cho trạng thái hover — không cần eyedrop hover nếu screenshot không có.
4. Ghi trong PR: “Brand tokens tham chiếu competitor X — chỉ tone, layout tự thiết kế.”

Kết quả: Client duyệt tone trong 1 vòng; tránh tranh cãi “xanh đậm quá” vì đã có HEX từ ảnh họ gửi.

Case study 2: Lệch màu vì JPEG marketing

Bối cảnh: Team nhận banner JPEG từ phòng marketing; junior eyedrop cạnh logo → HEX xám #9CA3AF thay vì brand #111827.

Nguyên nhân: JPEG artifact + antialias quanh chữ.

Cách tránh:

• Xin lại PNG/SVG logo khi có thể.
• Click vùng giữa khối màu đặc, không click mép.
• So sánh 2–3 điểm gần nhau; nếu HEX nhảy liên tục → ảnh bị nén, đừng tin điểm đơn.

---

Lỗi thường gặp (và cách tránh)

1. Zoom ≠ 100% — pixel bị interpolate; HEX lệch 1–3 bậc.
2. Screenshot màn Retina rồi scale hiển thị — vẫn ổn nếu click trên canvas tool (tool scale ảnh nội bộ); đừng screenshot rồi resize bằng app nén mạnh.
3. Lấy màu từ ảnh có overlay gradient — một pixel không đại diện cả brand; lấy ở đầu/cuối gradient và quyết định token “mid” có chủ đích.
4. Copy nguyên 10 màu từ đối thủ — đủ cho moodboard, thừa cho design system. Giữ 5–7 token lõi.
5. Quên alpha — nút rgba trên ảnh opaque; nếu design cần overlay, chuyển HEX → RGBA bằng chuyển mã màu sau khi đã có RGB.

---

Checklist trước khi đưa màu vào production

• Nguồn ảnh là PNG (hoặc vùng solid đủ lớn trên JPEG)
• Đã lấy surface, text, primary, primary-fg, border (tối thiểu)
• Token có tên theo vai trò, không theo “blue-1”
• Contrast AA cho chữ chính và chữ trên nút
• Hover/focus derive có chủ đích (HSL), không đoán mắt
• Không clone layout/logo đối thủ — chỉ tham chiếu tone

---

Cách dùng nhanh trên Kawa

1. Mở Lấy mã màu từ ảnh
2. Thả ảnh, chọn file, hoặc Ctrl+V dán screenshot
3. Click pixel → copy HEX (hoặc xem RGB/HSL)
4. Thêm vào bảng màu nếu cần giữ 5–10 màu trong phiên làm việc
5. Đặt token trong CSS/Tailwind → kiểm tra contrast

Không cần tài khoản. Ảnh không rời trình duyệt — phù hợp khi brief còn confidential.

---

Câu hỏi thường gặp

Có lấy được màu từ PDF catalog không?
Xuất trang PDF thành PNG độ phân giải cao rồi eyedrop. Tránh screenshot cửa sổ PDF bị downsample.

Bảng màu 10 màu có đủ không?
Đủ cho một landing section. Design system lớn nên tách brand kit; tool này là bước “bắt” màu từ ảnh, không thay Figma Tokens.

DevTools của Chrome đã có eyedropper — sao còn tool này?
DevTools cần trang live. Tool ảnh phục vụ mock, PDF, screenshot Slack, và ảnh đối thủ khi bạn không muốn (hoặc không thể) mở DevTools trên domain họ.

---

Liên kết liên quan

• Lấy mã màu từ ảnh
• Chuyển HEX / RGB / RGBA
• Kiểm tra tương phản màu (WCAG)
• Danh sách công cụ