Back to ScreenTools

How to Use ScreenTools

Quick-start guides for every ScreenTools utility. Jump to the tool you need below — each section covers what it does, who it is for, and a 5-step walkthrough.

Tool-by-Tool Quick Start

Each section below covers one tool — what it does, who should use it, and a 5-step quick start. A short reference on screen pixel density (PPI) follows the tool list. For an on-screen ruler, online protractor, or printable ruler PDF, see our sister site screenruler.online.

Color Picker

Color Picker is a free in-browser tool that combines three jobs designers and developers do constantly: grab a color from anywhere on your screen using the built-in Eyedropper API, convert it between the four formats every workflow needs (HEX, RGB, HSL, HSV), and save the result to a palette that persists across sessions. Every calculation runs locally — your colors never leave the browser, and the shareable URL means a teammate sees the exact same swatch when you send the link.

Quick start

  1. Click the Eyedropper button (or type a value in HEX / RGB / HSL / HSV) to pick or enter a color.
  2. Edit the color in any of the four format inputs — the rest update automatically as you type.
  3. Click Save to add the swatch to your palette, or Copy share link to send the exact color to a teammate.

Read the full Color Picker guide →

Device Specs

A filterable database of 69+ phones, tablets, and laptops with screen size, resolution, PPI, and aspect ratio. Useful for developers checking responsive breakpoints, shoppers comparing models, and designers picking target devices.

Quick start

  1. Open the Device Specs page. You'll see a filterable table with 69+ devices.
  2. Filter by brand, OS, year, type, screen size, or use the search box for a specific model.
  3. Click any device row to open its detail page with full specs and a side-by-side related-devices list.
  4. Use the Open Ruler CTA on a device page to launch a pre-calibrated ruler tuned to that device's PPI.
  5. Bookmark a comparison or copy specs into a spec sheet for procurement and design work.

Read the full Device Specs guide →

Dead Pixel Test

Full-color test screens that surface dead, stuck, and hot pixels on any monitor, phone, or TV. Run before accepting a delivery, after a screen repair, or when you suspect a fault — a 60-second pass tells you if your panel is healthy.

Quick start

  1. Open the Dead Pixel Test page on the screen you want to check.
  2. Maximize your browser to fullscreen so the test fills the whole panel — F11 on most browsers.
  3. Cycle through the color screens (red, green, blue, white, black). Look closely for any pixel that doesn't change with the background.
  4. A pixel that stays black is dead, a pixel stuck on one color is stuck, and a pixel always white is hot.
  5. Run the gradient test for grid uniformity issues like banding. Repeat after a stuck-pixel fix attempt to confirm recovery.

Read the full Dead Pixel Test guide →

Contrast Checker

Color Contrast Checker is a free in-browser WCAG 2.x validator. Type a foreground and a background color — any of HEX, RGB, HSL, HSV — and instantly see the contrast ratio (e.g. 4.51:1) along with pass-or-fail badges for the four WCAG levels: AA normal (4.5:1), AA large text (3:1), AAA normal (7:1), and AAA large (4.5:1). A live preview shows actual rendered text in both sizes so you can verify the ratio visually, not just numerically. All math runs locally; nothing is uploaded.

Quick start

  1. Enter the foreground (text) color in the top input, in any of HEX / RGB / HSL / HSV.
  2. Enter the background color below it. The contrast ratio updates instantly.
  3. Read the four WCAG badges. Green = passes that level; red = fails. The live preview shows what the pair looks like in real text.

Read the full Contrast Checker guide →

HEX Converter

HEX to RGB Converter is a free in-browser tool that takes a color in any of the four formats designers and developers reach for — HEX, RGB, HSL, HSV — and shows the equivalent in the other three. The unique feature is batch mode: paste a list of colors (one per line) and the tool emits the same conversion for every entry at once. Useful for translating a brand color palette from a Figma export into the CSS values your engineer needs, or for going the other direction.

Quick start

  1. Type or paste a color in any of the four format inputs (HEX, RGB, HSL, HSV).
  2. The other three formats update live; click the Copy button next to the one you need.
  3. For multiple colors, switch to Batch mode and paste a list — the converter handles all at once.

Read the full HEX Converter guide →

Screen Size Calculator

Calculate physical screen size from resolution and PPI, or check the right TV size for a viewing distance. Used by home theater builders sizing TVs, designers picking monitors, and shoppers comparing 65-inch vs 75-inch panels.

Quick start

  1. Open the Screen Size Calculator and pick your input mode — diagonal size, width and height, or resolution and PPI.
  2. Enter your numbers. The calculator returns physical width, height, area, and recommended viewing distance.
  3. For TV sizing, use the TV size for room sub-page: enter your couch-to-screen distance and pick a standard (THX, SMPTE, or 4K immersive).
  4. Compare two screens by running the calculator twice and noting the diagonal vs viewable area — a 16:9 65-inch is much larger than a 21:9 65-inch.
  5. Cross-check the physical size with the Device Specs database before buying.

Read the full Screen Size Calculator guide →

Pixel Converter

An instant CSS unit converter — px to mm, cm, inches, rem, em, pt, %, vw, and vh. Designed for front-end developers, designers, and anyone tuning typography or layout against a target DPI.

Quick start

  1. Open the Pixel Converter. Pick your source unit (px, mm, cm, inches, rem, em, pt, %, vw, vh).
  2. Enter your value. All target units update simultaneously.
  3. Set the base font size (default 16px) and DPI for accurate rem and physical-unit conversions.
  4. Use the cheat sheet for common conversions like 1rem = 16px or 1pt = 1.333px.
  5. Copy the result into your CSS or design tool. The converter is stateless — refresh resets the form.

Read the full Pixel Converter guide →

Aspect Ratio Calculator

Calculate aspect ratios from pixel dimensions or find a missing dimension when one side and the ratio are known. Built for video editors, social media designers, and developers picking image sizes for Instagram, TikTok, YouTube, and LinkedIn.

Quick start

  1. Open the Aspect Ratio Calculator. Enter pixel width and height to get the simplified ratio.
  2. Or pick the find-missing-dimension mode: enter width and a target ratio (16:9, 4:3, 1:1, 9:16) and the calculator returns the height.
  3. Use the platform cheat sheet to look up the right size for Instagram posts, TikTok video, YouTube thumbnails, or LinkedIn banners.
  4. Verify your image with the Pixel Converter if you need to convert pixel sizes to physical units for print.
  5. The simplified ratio is the GCD of width and height — 1920×1080 reduces to 16:9, 1080×1080 to 1:1.

Read the full Aspect Ratio Calculator guide →

PPI Calculator

A free PPI / DPI calculator that derives pixel density from screen diagonal + resolution, judges Retina at the viewer's actual distance, reverses pixels needed for print at 300 DPI, and compares devices side-by-side.

Quick start

  1. Open the PPI Calculator. Pick a mode: Auto-detect (current display), Screen (manual), Print (reverse from physical size), or Compare (multi-device).
  2. Enter the screen diagonal in inches plus resolution as width × height (e.g. 1920×1080).
  3. Set your typical viewing distance — the calculator scales the Retina threshold against it.
  4. Read the PPI result, Retina verdict (Below / Meets / Exceeds), and the physical screen size in mm/inches.
  5. Copy the result, share the calculated link (URL state-encoded), or jump to the Ruler tool with the same calibration.

Read the full PPI Calculator guide →

Understanding Pixel Density (PPI)

PPI stands for Pixels Per Inch — how many tiny dots of light fit in one physical inch of screen. A phone with 460 PPI packs pixels much more densely than a desktop monitor with 96 PPI, so the same number of pixels takes up less physical space on the phone. This is the shared idea behind the PPI Calculator, the Pixel Converter, the Aspect Ratio Calculator, and the Screen Size Calculator — once you know a screen's PPI you can map any pixel measurement to a real-world unit and vice versa. The PPI Calculator computes the value directly from screen diagonal and native resolution; the Device Specs Database looks it up for ~70 popular devices without any input.

Modern browsers also report a device pixel ratio (DPR). A MacBook with a Retina display reports DPR 2, meaning each "CSS pixel" in the browser actually spans 2 × 2 physical pixels. The Pixel Converter accounts for this when you choose a custom DPI for HiDPI screens.

Questions?

Full answers to common questions about every tool — supported devices, accuracy, privacy, and how each calculation works — live on the FAQ page.