Làm thế nào để tìm ra màu nền trên một trang? Hãy chọn ColorZilla! Máy đo màu của App Store. Biết tất cả các màu sắc

Rất thường xuyên, khi làm việc với các trang web và hình ảnh, bạn cần xác định màu sắc bất kỳ điểm nào trên màn hình điều khiển của bạn.

Ví dụ: bạn muốn làm cho màu nền trên trang web của mình giống hệt với màu của bầu trời xanh trong ảnh. Hoặc làm cho phông chữ tiêu đề có cùng màu với màu xanh nước biển. Hoặc ngược lại sử dụng màu chữ làm nền để tạo banner. Tóm lại, có rất nhiều lựa chọn. Việc lựa chọn màu sắc cẩn thận có ý nghĩa rất lớn cả trong thiết kế web và công việc của quản trị trang web.

Xác định màu có nghĩa là tìm mã của nó. Sau đó, mã, tùy thuộc vào mục tiêu của bạn, có thể được sử dụng cả trong các trình soạn thảo đồ họa khác nhau và trực tiếp trong mã html.

Thông thường nó được sử dụng, trong đó mã có thể được biểu diễn dưới dạng hệ thập phân và thập lục phân.

Rất thuận tiện khi sử dụng pipet để xác định màu sắc. Tuy nhiên, ngoài chương trình này, còn có những chương trình khác mà bạn có thể thực hiện việc này.

Adobe Photoshop Eyedropper

Tôi nghĩ rất ít người dùng chương trình này biết rằng khi sử dụng nó, bạn có thể xác định màu sắc không chỉ bất kỳ điểm nào trong ảnh được mở trong trình chỉnh sửa mà còn bất kỳ điểm nào trên màn hình điều khiển của bạn.

Việc này được thực hiện rất đơn giản. Mở, tạo một hình ảnh trong đó và không nhả nút chuột trái, di chuyển con trỏ ống nhỏ mắt đến vị trí của điểm bạn đã chọn. Đây có thể là bất kỳ điểm nào bên ngoài cửa sổ chương trình. Khi di chuyển con trỏ, bạn sẽ thấy màu vẽ thay đổi như thế nào trong bảng màu. Sau khi chọn điểm mong muốn, nhả nút chuột. Bấm vào hộp màu vẽ trên bảng màu và xem mã màu của bạn.

Phương pháp xác định màu này rất tiện lợi vì nó không yêu cầu cài đặt thêm bất kỳ chương trình nào ngoại trừ Photoshop mà hầu hết người dùng đã cài đặt.

Một ngày nọ, có một người đàn ông dạy máy tính xác định màu sắc bằng mã. Thật đơn giản - mã bằng màu và màu bằng mã. #FFFFFF = "trắng", "đen" = #000000. Và bây giờ máy tính hiển thị một màu trên màn hình và bạn cần tìm ra mã màu để sử dụng cùng màu đó trong một chương trình khác. Làm thế nào để tìm ra mã màu? Để làm được điều này, bạn cần có một “bộ dò màu pixel” hay nói cách khác là “chương trình pipet”. Chương trình ColorPic là việc xác định tức thời mã màu tại bất kỳ điểm nào trên màn hình điều khiển. Tiện ích nhận dạng màu sắc và hiển thị mã của nó ở định dạng thập lục phân và thập phân. Tiện ích ColorPic rất hữu ích và sẽ phục vụ tốt cho nhà thiết kế và nhà phát triển.

Xác định màu pixel

Các màu do chương trình xác định có thể được lưu trữ trong một bảng màu riêng gồm 16 màu để ghi nhớ. Người dùng luôn có thể quay lại bản đồ đã biên soạn của các màu được tìm thấy; bảng màu có sẵn ngay cả sau khi khởi động lại chương trình. ColorPic chụp một mảnh màn hình xung quanh con trỏ chuột và hiển thị hình ảnh phóng to của nó trong cửa sổ, trong khi hệ số tỷ lệ của hình ảnh đã chụp có thể thay đổi từ 2 thành 36. Sau khi khởi chạy, chương trình sẽ xác định màu và ký hiệu mã của nó pixel nằm dưới con trỏ chuột ở bất cứ đâu trên màn hình. Để thêm màu vào bảng màu, ColorPic thực hiện tổ hợp phím Ctrl+G.

HEX/HTML

Màu HEX không là gì ngoài biểu diễn thập lục phân của RGB.

Màu sắc được biểu diễn dưới dạng ba nhóm chữ số thập lục phân, trong đó mỗi nhóm chịu trách nhiệm về màu riêng của mình: #112233, trong đó 11 là màu đỏ, 22 là màu xanh lá cây, 33 là màu xanh lam. Tất cả các giá trị phải nằm trong khoảng từ 00 đến FF.

Nhiều ứng dụng cho phép ký hiệu màu thập lục phân được rút gọn. Nếu mỗi nhóm trong số ba nhóm chứa các ký tự giống nhau, ví dụ #112233, thì chúng có thể được viết là #123.

1. h1 (màu: #ff0000; ) /* đỏ */
2. h2 ( màu: #00ff00; ) /* xanh */
3. h3 ( màu: #0000ff; ) /* xanh */
4. h4 ( color: #00f; ) /* cùng màu xanh, viết tắt */

RGB

Không gian màu RGB (Đỏ, Xanh lục, Xanh lam) bao gồm tất cả các màu có thể được tạo ra bằng cách trộn màu đỏ, xanh lục và xanh lam. Mô hình này phổ biến trong nhiếp ảnh, truyền hình và đồ họa máy tính.

Giá trị RGB được chỉ định dưới dạng số nguyên từ 0 đến 255. Ví dụ: rgb(0,0,255) được hiển thị dưới dạng màu xanh lam vì tham số màu xanh lam được đặt thành giá trị cao nhất (255) và các tham số khác được đặt thành 0.

Một số ứng dụng (đặc biệt là trình duyệt web) hỗ trợ ghi phần trăm giá trị RGB (từ 0% đến 100%).

1. h1 ( màu: rgb(255, 0, 0); ) /* đỏ */
2. h2 ( màu: rgb(0, 255, 0); ) /* xanh */
3. h3 ( màu: rgb(0, 0, 255); ) /* xanh */
4. h4 ( color: rgb(0%, 0%, 100%); ) /* cùng màu xanh, mục nhập phần trăm */

Giá trị màu RGB được hỗ trợ trong tất cả các trình duyệt chính.

RGBA

Gần đây, các trình duyệt hiện đại đã học cách làm việc với mô hình màu RGBA - một phần mở rộng của RGB có hỗ trợ kênh alpha, xác định độ mờ của đối tượng.

Giá trị màu RGBA được chỉ định là: rgba(red, green, blue, alpha). Tham số alpha là một số nằm trong khoảng từ 0,0 (hoàn toàn trong suốt) đến 1,0 (hoàn toàn mờ).

1. h1 ( color: rgb(0, 0, 255); ) /* màu xanh lam trong RGB thông thường */
2. h2 ( color: rgba(0, 0, 255, 1); ) /* cùng màu xanh lam trong RGBA, vì độ mờ: 100% */
3. h3 ( color: rgba(0, 0, 255, 0.5); ) /* độ mờ: 50% */
4. h4 ( color: rgba(0, 0, 255, .155); ) /* độ mờ: 15,5% */
5. h5 ( color: rgba(0, 0, 255, 0); ) /* hoàn toàn trong suốt */

RGBA được hỗ trợ trong IE9+, Firefox 3+, Chrome, Safari và Opera 10+.

HSL

Mô hình màu HSL là sự thể hiện của mô hình RGB trong hệ tọa độ hình trụ. HSL thể hiện màu sắc theo cách trực quan và dễ đọc hơn so với RGB thông thường. Mô hình này thường được sử dụng trong các ứng dụng đồ họa, bảng màu và phân tích hình ảnh.

HSL là viết tắt của Hue (màu sắc/màu sắc), Saturation (độ bão hòa), Lightness/Luminance (độ sáng/độ sáng/độ sáng, đừng nhầm lẫn với độ sáng).

Hue chỉ định vị trí của màu trên bánh xe màu (từ 0 đến 360). Độ bão hòa là giá trị phần trăm của độ bão hòa (từ 0% đến 100%). Độ sáng là tỷ lệ phần trăm của độ sáng (từ 0% đến 100%).

1. h1 ( màu: hsl(120, 100%, 50%); ) /* xanh */
2. h2 ( màu: hsl(120, 100%, 75%); ) /* xanh nhạt */
3. h3 ( màu: hsl(120, 100%, 25%); ) /* xanh đậm */
4. h4 ( color: hsl(120, 60%, 70%); ) /* xanh nhạt */

HSL được hỗ trợ trong IE9+, Firefox, Chrome, Safari và Opera 10+.

HSLA

Tương tự như RGB/RGBA, HSL có chế độ HSLA hỗ trợ kênh alpha để biểu thị độ mờ của đối tượng.

Giá trị màu HSLA được chỉ định là: hsla(màu sắc, độ bão hòa, độ sáng, alpha). Tham số alpha là một số nằm trong khoảng từ 0,0 (hoàn toàn trong suốt) đến 1,0 (hoàn toàn mờ).

1. h1 ( color: hsl(120, 100%, 50%); ) /* màu xanh lá cây trong HSL bình thường */
2. h2 ( color: hsla(120, 100%, 50%, 1); ) /* màu xanh lá cây tương tự trong HSLA, vì độ mờ: 100% */
3. h3 ( color: hsla(120, 100%, 50%, 0.5); ) /* độ mờ: 50% */
4. h4 ( color: hsla(120, 100%, 50%, .155); ) /* độ mờ: 15,5% */
5. h5 ( color: hsla(120, 100%, 50%, 0); ) /* hoàn toàn trong suốt */

CMYK

Mô hình màu CMYK thường gắn liền với việc in và in màu. CMYK (không giống như RGB) là một mô hình trừ, nghĩa là giá trị cao hơn gắn liền với màu tối hơn.

Màu sắc được xác định bằng tỷ lệ màu lục lam (Cyan), đỏ tươi (Magenta), vàng (Yellow), có thêm màu đen (Key/blacK).

Mỗi con số xác định một màu trong CMYK đại diện cho phần trăm mực của một màu nhất định tạo nên sự kết hợp màu sắc, hay chính xác hơn là kích thước của điểm màn hình được xuất ra trên máy sắp chữ trên phim có màu đó (hoặc trực tiếp trên tấm in trong trường hợp CTP).

Ví dụ: để có được màu PANTONE 7526, bạn sẽ trộn 9 phần lục lam, 83 phần đỏ tươi, 100 phần vàng và 46 phần đen. Điều này có thể được ký hiệu như sau: (9,83,100,46). Đôi khi các ký hiệu sau được sử dụng: C9M83Y100K46 hoặc (9%, 83%, 100%, 46%) hoặc (0,09/0,83/1,0/0,46).

HSB/HSV

HSB (còn được gọi là HSV) tương tự như HSL, nhưng chúng là hai mẫu màu khác nhau. Cả hai đều dựa trên hình học hình trụ, nhưng HSB/HSV dựa trên mô hình "hexcone", trong khi HSL dựa trên mô hình "bi-hexcone". Các nghệ sĩ thường thích sử dụng mẫu này hơn, người ta thường chấp nhận rằng thiết bị HSB/HSV gần với cảm nhận màu sắc tự nhiên hơn. Đặc biệt, mô hình màu HSB được sử dụng trong Adobe Photoshop.

HSB/HSV là viết tắt của Hue (màu sắc/màu sắc), Saturation (độ bão hòa), Brightness/Value (độ sáng/giá trị).

Hue chỉ định vị trí của màu trên bánh xe màu (từ 0 đến 360). Độ bão hòa là giá trị phần trăm của độ bão hòa (từ 0% đến 100%). Độ sáng là giá trị phần trăm của độ sáng (từ 0% đến 100%).

XYZ

Mô hình màu XYZ (CIE 1931 XYZ) là một không gian toán học thuần túy. Không giống như RGB, CMYK và các mô hình khác, trong XYZ các thành phần chính là “tưởng tượng”, nghĩa là bạn không thể kết hợp X, Y và Z với bất kỳ bộ màu nào để trộn. XYZ là mẫu chính cho hầu hết các mẫu màu khác được sử dụng trong lĩnh vực kỹ thuật.

PHÒNG THÍ NGHIỆM

Mô hình màu LAB (CIELAB, “CIE 1976 L*a*b*”) được tính toán từ không gian CIE XYZ. Mục tiêu thiết kế của Lab là tạo ra một không gian màu trong đó các thay đổi màu sắc sẽ tuyến tính hơn theo nhận thức của con người (so với XYZ), nghĩa là, cùng một sự thay đổi về giá trị tọa độ màu ở các vùng khác nhau của không gian màu sẽ tạo ra cảm giác thay đổi màu sắc tương tự.

Khi làm việc với hình ảnh, bạn thường cần xác định chính xác màu sắc của pixel. Điều này cần thiết cho việc chỉnh sửa hình ảnh hoặc trong công việc thiết kế để điều chỉnh bảng màu của nền, bảng hoặc nút trên trang Internet hoặc trang web của bạn.

Dịch vụ này sẽ cho phép bạn tìm hiểu màu của dấu chấm trực tuyến mà không cần tải xuống và cài đặt các chương trình bổ sung. Làm việc trong dịch vụ Eyedropper trực tuyến của chúng tôi, bạn có thể nhanh chóng và dễ dàng tìm ra màu sắc của bất kỳ phần nào của hình ảnh.

Để làm điều này, bạn cần tải hình ảnh lên trang web. Để tải xuống tệp, nhấp vào nút "Duyệt". Chọn tệp hình ảnh mong muốn và nhấp vào "Tải lên". Ngay sau khi tải hình ảnh, bạn sẽ thấy nó trên màn hình. Sau đó, bạn cần di chuyển con trỏ qua pixel có màu bạn muốn xác định. Trong một cửa sổ riêng biệt, bạn sẽ có thể xem màu pixel và trường Giá trị hiện tại sẽ hiển thị số pixel tương ứng theo màu HTML và RGB của pixel.

Dịch vụ này cung cấp tính năng lưu mã màu ở định dạng màu HTML và RGB. Để thực hiện việc này, bạn cần di chuyển con trỏ qua pixel mong muốn và nhấp vào nút chuột trái. Trong trường “Giá trị đã lưu” trong một cửa sổ riêng biệt, bạn có thể thấy màu pixel cũng như các giá trị mã pixel đã lưu ở định dạng màu HTML và RGB.

Đánh giá