Applying solid color overlays to images can be useful for highlighting areas, adding masks, or enhancing design elements. In Cloudinary, you can achieve this by uploading a 1x1 pixel solid color image and using it as an overlay with transformations.
Step 1: Upload a 1x1 Solid Color Image
You can upload a 1x1 pixel solid-colored image to your Cloudinary account. For example, you can use this 1x1 grey square:
http://res.cloudinary.com/demo/image/upload/v1394707379/one_pixel.jpg
Once uploaded, this image can serve as a resizable, color-customizable overlay.
Step 2: Apply the Overlay and Resize It
Once the one_pixel image is in your account, you can overlay it onto another image and resize it to fit the required dimensions.
💡 Example: Overlaying the one_pixel image, stretching it to 60x60 pixels, and placing it over an image called face_left:
https://res.cloudinary.com/demo/image/upload/w_200/l_one_pixel.png,w_60,h_60/face_left.jpgOutput: The overlay appears as a 60x60 pixel grey square over the base image.
Step 3: Change the Overlay Color
You can modify the overlay color by applying the e_colorize effect along with the co (color) parameter.
💡 Example: Changing the overlay color to red:
https://res.cloudinary.com/demo/image/upload/w_200/l_one_pixel.png,w_60,h_60,e_colorize,co_red/face_left.jpgOutput: A 60x60 pixel red square appears over the image.
Step 4: Auto-Position the Overlay on a Detected Face
To automatically place the overlay on top of a detected face, use the g_face (gravity face) parameter.
💡 Example: Positioning the red overlay on a detected face:
https://res.cloudinary.com/demo/image/upload/w_200/l_one_pixel.png,w_60,h_60,e_colorize,co_red,g_face/face_left.jpgOutput: The red square is automatically centered over the detected face in the image.
Step 5: Adjust Overlay Opacity
You can control the transparency of the overlay using the o (opacity) parameter.
💡 Example: Setting the overlay opacity to 50%:
https://res.cloudinary.com/demo/image/upload/w_200/l_one_pixel.png,w_60,h_60,e_colorize,co_red,g_face,o_50/face_left.jpgOutput: The red square is placed over the detected face but appears semi-transparent.
Conclusion
By leveraging a 1x1 pixel image, Cloudinary allows you to create dynamic solid color overlays that can be resized, colored, positioned automatically, and adjusted for opacity. This technique is useful for highlighting, masking, and styling images dynamically with simple URL-based transformations.
For more advanced transformations, refer to Cloudinary’s Image Transformation Documentation.
Comments
4 comments
Great article, do have a question. How to scale the 1x1 px picture to match dimension of the image of the woman (even if we don't know the dimensions of the image of the woman)?
Hi Michiel,
You can use fl_relative and w_1.0,h_1.0 on the layered box and ask Cloudinary to set its size in relation to the main image. For example:
http://res.cloudinary.com/demo/image/upload/w_200/l_one_pixel.png,e_colorize,co_red,c_fill,o_50,w_1.0,y_1.0,fl_relative.no_overflow/face_left.jpg
For more information on this flag:
https://cloudinary.com/documentation/image_transformation_reference#flags_parameter
Hi, How to add radius to this rectangle?
Hi Nitesh,
You can use the radius (r_ in URLs) transformation. For example, the following would apply the radius effect on the red squared:
https://res.cloudinary.com/demo/image/upload/w_200/l_one_pixel.png,w_60,h_60,e_colorize,co_red,g_face,o_50,r_max/f_auto,q_auto/face_left.jpg
But the following would apply it to the entire image:
https://res.cloudinary.com/demo/image/upload/w_200/l_one_pixel.png,w_60,h_60,e_colorize,co_red,g_face,o_50/r_max/f_auto,q_auto/face_left.jpg
The above image is not a circle, unlike the first example because the image is a rectangle. If you resize the image to be a square, then the radius (max) will return a circle. For example:
https://res.cloudinary.com/demo/image/upload/c_crop,h_200,w_200,g_auto/l_one_pixel.png,w_60,h_60,e_colorize,co_red,g_face,o_50/r_max/f_auto,q_auto/face_left.jpg
For more information on possible values you can use for the radius transformation, please see - https://cloudinary.com/documentation/transformation_reference#r_radius
Please sign in to leave a comment.