Lấy mã màu từ ảnh: HEX, RGB, HSL và bảng màu

Mỗi điểm ảnh trong ảnh kỹ thuật số lưu màu dưới dạng ba con số: đỏ, xanh lá và xanh dương. Công cụ lấy màu đọc các số đó tại điểm bạn chọn và hiển thị theo định dạng mà nhà thiết kế và lập trình viên dùng. Nhờ đó dễ dàng dùng lại chính xác một sắc độ từ ảnh, logo hay ảnh chụp màn hình thay vì đoán bằng mắt.

Mắt dễ bị đánh lừa bởi màu xung quanh và độ sáng màn hình, nên hai sắc độ trông giống hệt có thể khá khác nhau về mã. Lấy màu từ chính tệp ảnh loại bỏ sự phỏng đoán.

Ba cách viết một màu

Khi chọn giữa HEX, RGB và HSL, hãy nhớ chúng mô tả cùng một màu. HEX là mã sáu ký tự gọn dùng trong thiết kế web và hầu hết công cụ thiết kế. RGB liệt kê giá trị đỏ, xanh lá và xanh dương từ 0 đến 255. HSL mô tả sắc độ, độ bão hòa và độ sáng, là định dạng dễ nhất để làm màu sáng hơn hoặc tối hơn trong CSS mà vẫn giữ tính chất của nó.

Thêm ảnh bằng cách kéo vào ô, duyệt tìm, hoặc dán ảnh chụp màn hình. Di chuột trên ảnh: màu bên dưới hiển thị trực tiếp phía dưới. Nhấp để chọn. Màu đã chọn hiện với ô mẫu lớn và mã HEX, RGB, HSL, mỗi mã có nút sao chép riêng.

Mỗi lần chọn được thêm vào lịch sử ngắn, nên bạn có thể gom nhiều màu từ một ảnh và sao chép sau. Nhấp ô mẫu bất kỳ trong lịch sử để hiện lại mã của nó.

Sao chép mã

Để lấy mã HEX từ ảnh nhanh chóng, hãy phóng to trình duyệt nếu vùng nhỏ, nhấp đúng điểm ảnh và nhấn Sao chép HEX. Mã bắt đầu bằng dấu thăng và dùng trực tiếp được trong CSS, Figma, Canva và hầu hết công cụ khác.

Ngay khi bạn thêm ảnh, công cụ phân tích một bản sao nhỏ và tìm các màu chủ đạo bằng phương pháp phân cụm. Tối đa tám màu hiện ra, sắp xếp theo diện tích chúng chiếm trong ảnh. Nhấp vào màu bất kỳ để xem đầy đủ mã, hoặc sao chép cả bộ dạng danh sách HEX hoặc thuộc tính tùy chỉnh CSS sẵn sàng dán vào stylesheet.

Tạo bảng màu từ ảnh là cách nhanh để xây dựng phối màu vốn đã hài hòa, vì màu sắc đến từ khung cảnh thật: hoàng hôn, khu rừng hay căn phòng được thiết kế đẹp.

Làm việc với logo

Để tìm màu thương hiệu từ logo, hãy dùng tệp gốc thay vì ảnh chụp màn hình hoặc bản nén, vốn có thể làm lệch màu một chút. Chọn vùng phẳng của logo thay vì cạnh, nơi màu hòa vào nền.

Chrome, Edge và các trình duyệt Chromium khác trên máy tính hỗ trợ công cụ hút màu màn hình. Nhấn Chọn màu từ bất cứ đâu trên màn hình, và con trỏ trở thành kính lúp bạn có thể di qua mọi cửa sổ, kể cả ứng dụng khác. Nhấp để chọn hoặc nhấn Escape để hủy. Đây là công cụ lấy màu màn hình tiện lợi khi màu bạn cần nằm trong video, ứng dụng thiết kế hay trang web.

Firefox và Safari chưa có tính năng này, nên nút bị ẩn ở đó và bạn có thể chọn từ ảnh đã tải lên. Trên điện thoại, hãy dùng ảnh chụp màn hình: chụp rồi dán hoặc chọn nó ở đây.

Ảnh chụp và đồ họa phẳng

Ảnh chụp chứa nhiễu và dải chuyển màu, nên các điểm ảnh cạnh nhau có thể hơi khác. Để có màu đại diện từ ảnh chụp, bảng màu thường tốt hơn một điểm ảnh vì nó lấy trung bình các điểm ảnh tương tự. Với logo và đồ họa phẳng, một cú nhấp là chính xác.

Hồ sơ màu và màn hình

Mã lấy từ dữ liệu ảnh khi trình duyệt giải mã. Ảnh gam màu rất rộng có thể trông hơi khác trên các màn hình khác nhau, nhưng mã là thứ bạn cần để tái tạo màu trong công cụ web và thiết kế.

Ảnh bị nén

JPEG nén nặng tạo lỗi khối quanh cạnh. Hãy chọn ở giữa vùng phẳng, hoặc dùng phiên bản chất lượng cao hơn của ảnh nếu có.

Ảnh của bạn ở lại trong bộ nhớ trình duyệt; không có gì được tải lên, ghi nhật ký hay lưu trữ. Hỗ trợ tệp JPG, PNG, WebP, GIF và BMP, và vùng trong suốt được bỏ qua khi tạo bảng màu.

Công cụ miễn phí và không giới hạn, không thêm hình mờ và không dùng tín dụng EnhancerPro. Nếu muốn biến bảng màu đã chọn thành logo hoặc biểu tượng, công cụ tạo favicon và chuyển ảnh sang SVG của chúng tôi là bước tiếp theo phù hợp.

Dùng màu trong CSS

Dán mã HEX thẳng vào thuộc tính màu, hoặc sao chép bảng màu dạng biến CSS và tham chiếu bằng var(--color-1). Giá trị HSL giúp dễ tạo sắc nhạt hơn bằng cách tăng phần trăm độ sáng.

Bắt đầu từ một màu mạnh

Hầu hết phối màu tốt bắt đầu với một màu chính, thường lấy từ logo hoặc ảnh chủ đạo. Chọn nó ở đây, rồi quyết định một màu trung tính sáng và một màu trung tính tối cho nền và chữ. Dùng HSL giúp việc này dễ dàng: giữ sắc độ và độ bão hòa, rồi tăng độ sáng cho sắc nền hoặc giảm cho màu nhấn đậm.

Màu phụ từ bảng màu

Bảng màu trích xuất thường chứa một hai màu rực và vài màu trầm. Màu trầm hợp với nền, viền và nút phụ, còn màu rực hợp với nút kêu gọi hành động và điểm nhấn. Vì chúng đến từ cùng một ảnh, chúng thường hài hòa tự nhiên.

Kiểm tra độ tương phản

Chữ phải dễ đọc với mọi người. Chữ tối trên nền sắc nhạt, hoặc chữ trắng trên màu đậm, thường hiệu quả. Hãy kiểm tra các kết hợp quan trọng bằng công cụ kiểm tra tương phản trước khi đăng, nhất là với nút và chữ nhỏ. Màu trông nổi bật trong ảnh có thể quá nhạt cho chữ trên trang trắng.

Lưu lại

Lưu mã cuối cùng trong hướng dẫn phong cách hoặc dạng biến CSS. Sao chép bảng màu dạng thuộc tính tùy chỉnh CSS cho bạn điểm khởi đầu sẵn sàng để đổi tên, như primary, accent và surface, để mọi trang trên site dùng đúng cùng sắc độ.

Màu cho in ấn

Màu màn hình dùng RGB, còn máy in dùng mực CMYK. Mã ở đây hoàn hảo cho màn hình; với ấn phẩm in, hãy nhờ nhà in chuyển đổi hoặc so khớp với mẫu màu in, vì một số màu màn hình rực không thể in chính xác.

Chia sẻ màu với nhóm

Nhà thiết kế, lập trình viên và khách hàng thường mô tả màu theo những cách khác nhau: mã hex trong tệp thiết kế, giá trị RGB trong slide, giá trị HSL trong stylesheet. Sao chép cả ba từ cùng một lần chọn tránh sai lệch nhỏ phát sinh khi chuyển đổi bằng tay. Dán mã vào ghi chú dự án cùng ảnh nguồn, để ai cũng thấy mỗi màu đến từ đâu và chọn lại sau nếu bảng màu cần điều chỉnh.

Bảng màu theo mùa và cảm xúc

Ảnh là nguồn cảm xúc tuyệt vời. Lá thu ấm cho màu cam và đỏ thẫm, cảnh biển cho màu cát trung tính và xanh ngọc, thành phố về đêm cho xanh đậm với điểm nhấn neon. Hãy thử trích xuất bảng màu từ vài ảnh hợp với cảm giác bạn muốn, rồi giữ những màu xuất hiện lặp lại. Bộ màu lặp lại đó thường trở thành phối màu mạnh, nhất quán.