Tại Sao Designer Lấy Màu từ Thế Giới Thực

Những bảng màu đẹp nhất hiếm khi được tạo ra trên màn hình. Chúng đến từ tấm vải định nghĩa bản sắc của một thương hiệu thời trang, bức tường được chụp trong chuyến du lịch trở thành màu chủ đạo của trang web du lịch, hoặc sản phẩm vật lý của khách hàng cần được tái hiện chính xác trong thế giới số. Vật liệu vật lý mang tính xác thực cảm xúc mà các mẫu màu tổng hợp khó có thể sao chép.

Thách thức luôn nằm ở bước dịch thuật: bạn thấy màu, bạn cần mã.

Cơ Bản về CSS Variables

CSS custom properties — thường gọi là CSS variables — cho phép định nghĩa một giá trị một lần và sử dụng lại ở mọi nơi. Khai báo chúng trong :root để mọi phần tử trên trang có thể kế thừa:

:root {
  --color-brand-500: hsl(220, 60%, 45%);
}

Thay đổi giá trị ở một nơi duy nhất và bản cập nhật sẽ lan rộng đến tất cả các thành phần sử dụng nó.

Từng Bước: Từ Camera đến CSS Variable

Mở Color Picker Camera: HEX RGB, hướng camera trực tiếp vào bất kỳ vật liệu nào — tường, bao bì, danh mục in — và nhấn để cố định màu. Ứng dụng ngay lập tức hiển thị các giá trị HEX, RGB và HSL. Sao chép giá trị HSL bằng một lần nhấn.

Dán trực tiếp vào stylesheet và tạo toàn bộ thang màu bằng cách chỉ điều chỉnh độ sáng:

:root {
  --color-brand-900: hsl(220, 60%, 20%);
  --color-brand-500: hsl(220, 60%, 45%);
  --color-brand-100: hsl(220, 60%, 90%);
}

Design Token và Tích Hợp Figma

Color Picker Camera: HEX RGB cho phép xuất bảng màu đã lưu dưới dạng file JSON — cùng định dạng mà plugin Tokens của Figma và các công cụ như Style Dictionary hỗ trợ gốc. Tính năng color harmonies gợi ý các biến thể bổ sung và bộ ba ngay khi bạn chọn màu, giúp bạn xây dựng bảng màu hoàn chỉnh trước khi mở laptop.

Toàn bộ quy trình — chụp bằng camera, xuất JSON, biến CSS — rút ngắn khoảng cách giữa thế giới vật lý và stylesheet của bạn chỉ còn vài phút.

Tải Color Picker Camera: HEX RGB miễn phí cho iOS hoặc Android — không quảng cáo, không theo dõi và hoạt động hoàn toàn ngoại tuyến.