Skip to main content
Filed
FeaturesDocsBlogPricing
Add to Chrome
Navigation
On this page

Save Colors

Pixel picker and palette extractor

The EyeDropper saves a single color with hex, RGB, and HSL values. Color palette extraction scans the whole page and saves the dominant colors (requires Pro).

Two ways to save color data from a webpage to Notion. The Color picker (single pixel) is free. Color palette extraction (full page scan) requires Pro.

Color picker

Free

Sample any pixel on a page with the system EyeDropper and save the color to Notion.

From the toolbar: Click Color in the Instant zone. The EyeDropper cursor activates. Click any pixel on the page to sample it. The color saves immediately. The orb confirms.

From the side panel: Click + → Color. The chip appears in the attachment row. You can pick multiple colors this way and save them together.

After saving: The orb shows the hex value with a Copy button. Clipboard is written only on explicit user action. No auto-copy.

What lands in Notion: The sampled color as hex, RGB, and HSL values, plus the detected color family (e.g. "Warm red", "Deep blue"). Saved as a structured note block.

Browser requirement: The EyeDropper API requires Chrome 95 or later. On older Chromium builds, the Color button may not appear.

Color palette extraction

Pro

Extract the dominant color palette from an entire page by scanning its CSS and rendered elements.

From the side panel: Click + → Color palette. Filed scans the page and extracts the most prominent colors. A palette chip appears showing the extracted colors. Edit the selection before saving.

Configuration (Settings → Palette):

  • Number of colors: 3–12 (default 6)
  • Deduplicate near-duplicates: on/off (default on)

After saving: The orb shows "N colors saved" with a Copy all button that copies all hex values comma-separated to clipboard.

What lands in Notion: A set of swatches with their hex, RGB, and HSL values, saved as structured blocks on the Notion page. A 1,500×600 WebP banner showing colored columns with hex text is set as the page cover.

How it works: Extraction reads computed CSS properties (background-color, color, border-color) from rendered page elements. It skips transparent values and merges near-identical shades. Results reflect what's visually prominent on the page, not every color in the CSS.

Limitations:

  • Colors set via canvas, SVG fill, or CSS gradients may not be captured.
  • Pages that load colors dynamically after interaction (e.g. dark mode toggle) reflect the state at extraction time.
  • Canvas-rendered images and image pixel data are not scanned. CSS computed styles only.