Skip to content
English
Submit a request
  • There are no suggestions because the search field is empty.

Color Dropper (Eyedropper) Tool

Sampling canvas colors directly within the Tiled Builder color picker

1. Purpose & Scope

This article documents the Color Dropper (Eyedropper) Tool, a new capability added to the Tiled Builder color picker in v60.0.0. This feature enables content creators to sample any color present on the builder canvas and apply it directly as a fill or stroke color.

Scope: All Tiled users with Builder access (Editor role and above).

2. Feature Description

The Color Dropper tool appears as a new option within the Tiled color picker interface. When activated, it enables the user to click any pixel on the current builder canvas to capture that pixel's exact color value (expressed as a hexadecimal color code) and apply it to the selected element.

This eliminates the need to manually identify and transcribe hex codes from design references, reducing the risk of color inconsistency in microapp brand expression.

3. Using the Color Dropper

  1.     Select a tile or element in the Builder where you wish to apply a color.
  2.     Open the color picker by clicking the color swatch for the relevant property (fill, border, text color, etc.).
  3.     Click the Eyedropper icon within the color picker panel.
  4.     Your cursor will change to indicate sampling mode.
  5.     Click the pixel on the canvas whose color you wish to sample.
  6.     The sampled color is applied to the selected element and added to Recent Colors.

Note: The Color Dropper samples colors from the current canvas view only. Colors from off-canvas or off-screen elements cannot be sampled. Browser security restrictions may limit sampling from embedded iframes or cross-origin content.

4. Color Picker Improvements Shipped in v60.0.0

The following additional color picker improvements shipped alongside the Color Dropper and are documented here for completeness:

Non-brand color in Recent Colors (TD-6689)

Selecting a non-brand color now correctly populates the Recent Colors section.

Recent Colors cut-off fix (TD-6745)

Recent Colors display is no longer truncated when the side navigation panel is in a scrollable state.

Hover state on eyedropper section (TD-6744)

The eyedropper section now displays a hover state indicator for improved discoverability.

Recent color selection updates palette (TD-6743)

Clicking a Recent Color now correctly updates the full color palette to reflect the selection.

Drag request throttling (TD-6740)

Dragging the color picker gradient no longer fires excessive API requests, improving performance and reducing unnecessary server load.

5. Change History

v1.0 — May 5, 2026

Initial article. Feature and related fixes shipped in Tiled v60.0.0 (TD-6690, TD-6689, TD-6745, TD-6744, TD-6743, TD-6740).