Get pixel data from image layer at coordinates

100%

Get pixel data from image layer at coordinates

✓ Published0🌍 Public

Last edited Jul 20, 2021

Created on Jul 20, 2021

This example demonstrates how to extract the color of a specific pixel from an image that is part of a Sketch document. It grabs the first selected layer, converts its image data into an `NSBitmapImageRep`, and then calls `colorAtX_y` to read the RGB value at coordinates (1,2). The result is logged as a CSS string using `MSColor.colorWithNSColor`, showing the pixel’s color in a web-friendly format. The code relies on Sketch’s scripting API and the Cocoa/AppKit `NSBitmapImageRep` class for image decoding.

AI-generated description

Similar vizzes

Loading thumbnail…

Create layers for each pixel with opacities

This example shows a raster image decomposed into one layer per pixel, with each layer’s position and fill color corresponding to the original bitmap’s coordinates and sampled color values. It uses the Sketch JavaScript API, iterating over the image’s width and height via `NSBitmapImageRep` to retrieve each pixel’s color with `colorAtX_y`. The code creates a `ShapePath` for every pixel, assigning the color via an `MSColor` fill, and groups all resulting rectangles under a new `Group` named “pixel layers.”

KKevinGutowski

70% match

Loading thumbnail…

Sketch Global colors to Layers

This example demonstrates how to extract the global color palette from Sketch’s asset library and render each color as a square swatch on the selected page. It iterates through the document’s color assets, converts each color from its native color space to a hexadecimal string, and creates a new `ShapePath` for every swatch, positioning them in a horizontal row. The script uses the Sketch JavaScript API, specifically `MSPersistentAssetCollection`, `ShapePath`, and `Rectangle`, with custom helper functions for RGB-to-hex conversion.

KKevinGutowski

59% match

Loading thumbnail…

Change Sketch Measurement Color

This example shows a Sketch plugin that programmatically reads the current measurement color from the active document and prints its RGBA values to the console. The code uses the `sketch` library to access the selection, then the `eventHandlerManager`, `normalHandler`, and `measurementRenderer` APIs to retrieve the color as an `NSColorSpaceColor` object. The resulting output confirms a solid red fill. No data source is involved; it demonstrates direct inspection of a Sketch interface element's style.

KKevinGutowski

58% match

Loading thumbnail…

Get Insertion Point Color

This example shows how to retrieve the color of the text insertion point caret within Sketch’s text-editing mode. It reads the currently selected text layer and, if the layer is actively being edited, logs the numeric caret color returned by the native `textView.insertionPointColor()` API. The snippet relies on Sketch’s CoreText framework, using `sketch/ui` to display a warning message when no editable text is selected and `sketch/dom` to access the selected layer’s editing delegate. The code is provided as a single JavaScript file, with no external dependencies or data source.

KKevinGutowski

56% match

Loading thumbnail…

Get layer from ID

This example demonstrates how to retrieve a specific layer from a Sketch document by its ID using the `document.getLayerWithID(layerID)` method. It also shows an alternative approach with the Sketch API’s `sketch.find(`#${layerID}`)[0]` function, which queries the document tree for elements matching a CSS-style selector. The code highlights two concise techniques for locating layers programmatically, enabling direct access to layer objects for further manipulation or inspection. The gist focuses on the retrieval pattern itself, without additional rendering or data processing.

KKevinGutowski

54% match

Loading thumbnail…

A Sketch snippet to copy global colors to the pasteboard

This sketch copies all global color assets from a Sketch document to the clipboard as CSS rules, converting each color to hex and generating class names. It uses the Sketch JavaScript API (`sketch.globalAssets`) to access color assets and `NSPasteboard` to write the formatted string. The code iterates through every saved color, builds a CSS block with a `.colorN` selector or the asset’s name, and trims trailing whitespace before showing a confirmation message.

KKevinGutowski

54% match

Loading thumbnail…

Add a Color layer on top

A Sketch plugin script adds a full-artboard color overlay to visually inspect design contrast. It targets either a selected artboard or a layer within one, then creates a locked `ShapePath` named "Greyscale Layer" with a white fill and `Style.BlendingMode.Color`. The script uses `sketch` APIs like `getSelectedDocument`, `Rectangle`, and `ShapePath` to construct the overlay. If a greyscale layer already exists on the artboard, the script removes it before adding a fresh one.

KKevinGutowski

54% match

Loading thumbnail…

Reading Sketch preferences for colors

This visualization captures a software designer’s preferred color settings for Sketch by reading them directly from the application’s saved user defaults. The code uses the `NSUserDefaults.standardUserDefaults()` API to retrieve the stored `colorForMeasurements`, `colorForFlows`, and `colorForSnapsAndGuides` preferences, then decodes the binary data with `NSKeyedUnarchiver`. The resulting color values are likely rendered as a palette or swatches, revealing the user’s chosen hues for interface measurement overlays, flow arrows, and snapping guides, all without manual input.

KKevinGutowski

52% match