Design Tools Suite

Eyedropper · CSS Colours · Palette · Measure

🎯 Pick Colour from Screen

Click Pick Colour to sample any colour from your screen. Values are shown in HEX, RGB, HSL, and CMYK.

HEX#6C63FF
RGBrgb(108, 99, 255)
HSLhsl(244, 100%, 69%)
CMYKcmyk(58%, 61%, 0%, 0%)
🕐 Colour History (click to select · hover for options)
No colours picked yet.
🔍 Extract Colours from Website CSS

Enter any website URL to extract colours from its stylesheets, inline styles, and <style> blocks. Click any chip to copy, or hover and click + to send it to your active palette.

🗂️ Manage Palettes
PALETTE PREVIEW
No colours yet — add some below
🎨 My Palette

No colours in this palette yet.

Add Colours to Palette
Click to pick
#
QUICK SCHEME STARTERS

Click any swatch to add it to your active palette.

No eyedropper history yet. Go to the Eyedropper tab to pick colours.

Colours extracted from the CSS tab appear here. Click to add individual colours.

No CSS colours extracted yet.

📤 Export Palette
Select an export format above…
📏 Rectangle Measurement Tool

Click Activate Measurement to enter fullscreen mode. Then click and drag anywhere on the screen to draw a rectangle. Dimensions are shown live in pixels, centimetres, and millimetres. Press Esc or click Exit to close.

⚙️  Conversion basis: CSS standard (1 inch = 96 px = 2.54 cm = 25.4 mm)
      Device pixel ratio:  |  Estimated DPI:

📊 Results

No measurements yet. Activate the overlay above and draw a rectangle.

ℹ️ Screen DPI Reference

Physical accuracy depends on your actual screen DPI. CSS uses 96 dpi as the standard reference.

Screen type
DPI
1 px in mm
Standard HD monitor (CSS reference)
96 dpi
0.265 mm
Full HD 24"
~92 dpi
~0.276 mm
4K 27"
~163 dpi
~0.156 mm
MacBook Pro 14" Retina
~220 dpi
~0.116 mm
iPhone 15 Pro
~460 dpi
~0.055 mm
Click and drag to draw a rectangle