Add arrows, callouts, numbered markers, text labels, and highlights to screenshots and images.
Image Annotation Tool turns an existing screenshot or image into a visual explanation by placing arrows, callouts, numbered markers, text labels, and highlights over the pictured content. Arrows and callouts connect commentary to a location, numbers establish an order, labels name items, and highlights isolate regions. It is useful when prose identifying the button near the top would be vague. The point users often miss is that annotations express the author's interpretation. A highlighted area is not automatically detected or validated, and an imprecise pointer can introduce ambiguity.
Use an arrow when one precise point needs attention, a callout when that point also needs nearby explanation, a numbered marker when order matters, a text label when a pictured object needs a name, and a highlight when an area rather than a point matters. The mark supplies emphasis or direction; its wording and placement supply the intended meaning.
Place arrow tips and numbered markers directly on the intended feature, then keep associated wording close enough that the relationship remains obvious. Let marker numbers follow the reading or action order described elsewhere. Bound highlights tightly enough to separate the relevant region from neighboring content. When annotations overlap the same pixels, simplify them because dense markup can hide the evidence it is meant to explain.
The annotation work runs entirely in the browser, and nothing is uploaded. That prevents this tool from sending the image elsewhere, but it does not redact information that remains visible. Do not treat a callout or highlight placed over a name as verified redaction. Properly remove or redact sensitive content before distributing the annotated image.
No. They can make a visual explanation clearer, but words embedded in an image are not a substitute for accessible surrounding text, an appropriate text alternative, or instructions available outside the pixels. Color-only highlighting may also be missed by some readers. If the image conveys required steps or findings, repeat that information in accessible text.
The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.