Blog

  • Image Color Picker Tool: Sample HEX, RGB & HSL [2026]

    Image Color Picker Tool: Sample HEX, RGB & HSL [2026]

    TL;DR: An image color picker tool samples the exact colour of any pixel from an uploaded photo and converts it to HEX, RGB, HSL, and CMYK. Designers use it to extract brand palettes, match a website’s accent to a hero photo, or steal the perfect blue from a sunset shot. Our browser-based image color picker processes the photo locally — no upload, no signup, click anywhere on the image to sample.

    The fastest way to find a colour you can describe but can’t name: photograph it (or screenshot it) and run an image color picker over it. Brand designers do this with mood-board photos. Frontend developers do it when matching a CSS background to a hero image their team’s photographer captured. Print designers do it before specifying CMYK values for a poster run. The photo holds the colour information at full precision; an image color picker translates that into the format your CSS, design tool, or print spec actually uses.

    Our image color picker tool reads the photo via your browser’s canvas API and extracts the exact RGB values of any pixel you click. It outputs in HEX, RGB, HSL, HSV, and CMYK simultaneously, with one-click copy on each format. The photo never uploads — useful for proprietary brand work, NDA-protected mockups, or anything you’d rather keep off third-party servers.

    The five colour formats and when each is right

    Format Example Use for
    HEX #635BFF CSS, brand guidelines, design tools — the universal web colour notation
    RGB rgb(99, 91, 255) Programming (every image library uses RGB), some legacy CSS
    HSL hsl(244, 100%, 68%) Building palettes — easier to derive lighter/darker shades by adjusting one number
    HSV hsv(244, 64%, 100%) Photoshop and Affinity Photo’s default colour picker — useful for matching design files
    CMYK cmyk(61%, 64%, 0%, 0%) Print — magazine, brochure, business card. Different gamut from RGB; expect approximation

    Why HSL is the designer’s secret weapon. Once you have a colour in HSL, you can build an entire palette by changing only the lightness. hsl(244, 100%, 68%) with the lightness pushed to 90% becomes a soft tint suitable for a card background; pushed to 30% becomes a deep shade for hover states. RGB and HEX don’t expose this control as cleanly — adjusting them to a perceived lighter/darker version requires multiple channel changes that often shift the hue.

    The CMYK caveat. Computer screens use additive RGB; printers use subtractive CMYK. The two colour spaces don’t perfectly align — vivid screen blues, oranges, and greens often can’t be reproduced in print. The CMYK output from a screen-photo color picker is an approximation; for production print work, ask your printer for their colour-managed conversion (they’ll use ICC profiles to map RGB → CMYK accurately).

    Five common workflows for an image color picker

    • Brand palette extraction. Drop your company’s hero photo into the tool, click on the four or five distinctive colours. Save those as the starter palette for your design system.
    • Matching website accents to imagery. When a marketing photo dominates a landing page, the CTA buttons and section backgrounds look better when they pull from the photo’s palette. Sample from the photo first, then build the CSS.
    • Reproducing a competitor’s colour. Found a colour you like on someone else’s site or in a magazine? Screenshot, drop into the picker, copy the HEX. Faster than guessing and far more accurate than a paper colour wheel.
    • Print colour matching. Photograph a paint chip or fabric swatch under daylight, sample it, and use the result as the starting CMYK for a printed brochure. Calibrate against the actual print sample for accuracy.
    • Accessibility audits on photos. Sample the dominant colour of a photo behind text. Run the WCAG contrast check against your text colour. If it fails, you know exactly which photo region needs an overlay.

    How to use the browser image color picker

    1. Open the image color picker
    2. Drop your photo onto the dropzone, or click to pick from disk
    3. The image renders in a zoomable canvas. Use scroll-wheel or pinch to zoom in for pixel-precision sampling
    4. Click anywhere on the image to sample — the HEX, RGB, HSL, HSV, and CMYK values appear instantly with a swatch preview
    5. Click the copy icon next to any format to grab that exact value to your clipboard
    6. Sample additional pixels by clicking new locations — each sample stays in your history sidebar for easy comparison

    Everything happens client-side via the canvas getImageData API. The photo never uploads, the sampled colour never transmits.

    Sampling colours in code

    Browser JavaScript (canvas getImageData):

    const canvas = document.createElement("canvas");
    const img = new Image();
    img.crossOrigin = "anonymous";
    img.onload = () => {
      canvas.width = img.naturalWidth;
      canvas.height = img.naturalHeight;
      const ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0);
    
      // Sample pixel at coordinates (x, y)
      const [r, g, b, a] = ctx.getImageData(x, y, 1, 1).data;
      const hex = "#" + [r, g, b].map(n => n.toString(16).padStart(2, "0")).join("");
      console.log(hex);
    };
    img.src = "/path/to/photo.jpg";

    Node.js (Sharp + raw pixel access):

    import sharp from "sharp";
    
    const { data, info } = await sharp("photo.jpg")
      .raw()
      .toBuffer({ resolveWithObject: true });
    
    const idx = (y * info.width + x) * info.channels;
    const [r, g, b] = [data[idx], data[idx + 1], data[idx + 2]];
    console.log(`rgb(${r}, ${g}, ${b})`);

    Python (Pillow):

    from PIL import Image
    
    img = Image.open("photo.jpg")
    r, g, b = img.getpixel((x, y))[:3]
    print(f"#{r:02x}{g:02x}{b:02x}")

    The four mistakes that produce the wrong colour

    • Sampling JPEG artefact pixels. JPEG compression creates colour noise around hard edges. A pixel sampled at the boundary between a logo and its background often has a “halo” colour that doesn’t match either neighbour. Sample 10-20 pixels into the solid region.
    • Trusting screenshots over the source. If you screenshot a website to sample its CSS colour, your screen’s colour profile, your monitor’s calibration, and macOS/Windows’s gamma all shift the values. Use browser DevTools’ eyedropper directly on the live element instead.
    • Mixing up sRGB and Display P3. Modern Macs and iPhones photograph in Display P3 colour space, which encodes vivid colours that sRGB can’t reach. A picker that assumes sRGB on a P3 photo returns desaturated values. Most browser tools handle this automatically, but be aware when results look slightly off.
    • Sampling backlit or shadowed regions. A subject’s shirt looks bright pink in direct sun, dim pink in shade. The “real” colour exists somewhere in between — for brand work, photograph in even diffused light or sample multiple regions and average them.

    When NOT to use a single-pixel color picker

    • For palette extraction from complex photos. A single pixel doesn’t represent a photo’s overall colour story. Use a dominant-colour or palette-extractor tool that analyses the whole image. (We have one: the Image Color Extractor.)
    • For accessibility-grade colour matching. WCAG contrast calculations need precise colour values. A single sample can hit a JPEG artefact pixel; sample 20 and average for accuracy.
    • For print colour proofing. The CMYK approximation from a screen photo is rough. Order a printed proof or ask your printer for an ICC-managed conversion.
    • From low-resolution or heavily-compressed sources. A 200×200 thumbnail saved at JPEG quality 50 has bands of false colour everywhere. Source a higher-res copy if you need accurate colours.

    Frequently asked questions

    What’s the difference between an image color picker and a screen color picker?

    An image color picker samples colours from a static image you upload. A screen color picker (like Chrome DevTools’ eyedropper or macOS Digital Color Meter) samples colours directly from any pixel on your screen, including live web pages. For sampling a colour from a photo, image color picker. For sampling a CSS colour from a competitor’s live site, screen picker.

    Can I get the dominant colour of an entire image?

    Not from a single-pixel picker. Use our dedicated Image Color Extractor which analyses the whole image and returns the top 5-8 dominant colours plus a perceptual palette suitable for design systems.

    Why does my sampled HEX not match the colour I expected?

    Three common causes: (1) JPEG artefacts producing false colours near edges — sample further into solid regions; (2) your monitor’s calibration shifting how colours display; (3) the source photo using Display P3 colour space which encodes wider gamut than sRGB. For brand work, sample multiple pixels in the same region and use the median value.

    Is my photo uploaded when I use the picker?

    No. The browser reads the photo via the File API, draws it on a canvas, and reads pixel data from the canvas — all without making any network requests. Verify in DevTools’ Network tab. The photo and any sampled colours stay on your device.

    Can I sample colours from a website screenshot?

    Yes — drop the screenshot into the picker like any other image. For higher accuracy though, use Chrome DevTools or browser extensions that sample directly from the live page (avoiding screenshot compression). Both Chrome and Firefox have built-in eyedroppers in their colour pickers.

    Does the tool work on transparent PNGs?

    Yes. Transparent regions return alpha = 0 in the sample readout, with the underlying pixel colour shown for reference. If you click on a transparent pixel and want the colour you’d see (white if displayed on white), composite the image first or sample a non-transparent neighbour.

    Related tools and guides

     

  • Free Image Cropper Online: Aspect Ratio Presets [2026]

    Free Image Cropper Online: Aspect Ratio Presets [2026]

    TL;DR: A free image cropper online removes parts of a photo to fit an exact aspect ratio — Instagram squares (1:1), Stories (9:16), YouTube thumbnails (16:9), Twitter headers (3:1). Our browser-based image cropper ships ten ratio presets, freeform crop, rotation, and format conversion (PNG/JPEG/WebP). No upload, no signup, processed entirely on your device.

    Every social platform crops your image differently. Instagram wants a 1:1 square in the feed, 4:5 portrait for higher reach, 9:16 vertical for Stories and Reels. YouTube needs 16:9 thumbnails. Twitter clamps post images to a 16:9 viewport unless you click to expand. Upload a 4000×3000 photo to any of them and the platform crops it for you — usually wrong, often cutting your subject’s head off. A free image cropper online lets you do the cropping yourself, with the result you actually want.

    Our image cropper runs entirely in your browser. Drop the photo, pick a ratio preset (or freeform), drag the crop box to the right region, click Download. The cropped output saves in PNG, JPEG, or WebP at your chosen quality. Your photo never uploads — meaningful for ID scans, kids’ photos, and anything you’d rather not hand to a server. This guide explains the platform-by-platform aspect ratios, the rotation + format-conversion features, and the workflow tricks that make repeat cropping fast.

    Aspect ratios for every social platform in 2026

    Platform / Use Aspect ratio Notes
    Instagram square post 1:1 Default feed format; classic and reliable
    Instagram portrait post 4:5 Tallest format the feed accepts; gets more pixels visible per scroll → higher engagement
    Instagram Story / Reel / TikTok 9:16 Vertical full-screen; reserve top + bottom 200px for UI overlays
    YouTube thumbnail / cover 16:9 Pre-crop to exactly 1280×720 to avoid YouTube’s auto-recompression
    Twitter / X header 3:1 Profile photo overlaps bottom-left; keep critical content centered
    Facebook cover ~21:8 Mobile crops differently than desktop; safe zone is the centre 60%
    LinkedIn banner 4:1 LinkedIn enforces this aspect strictly
    Pinterest pin 2:3 Vertical performs ~2.3× better than square per Pinterest’s data
    Photo print 4×6 3:2 Standard photographic print and DSLR sensor ratio

    The most common mistake: uploading a 4:3 phone photo into a 1:1 Instagram square and letting the platform pick the centre crop. The result usually clips a subject’s forehead or chin. Crop to the platform’s native ratio yourself with our tool — you decide what gets included, not Meta’s algorithm.

    How to use the browser image cropper

    1. Open the image cropper
    2. Drop a photo (JPG, PNG, WebP, GIF, BMP, HEIC) into the dropzone, or click to pick from disk
    3. Pick a preset — Free, 1:1 Square, 4:3, 3:2, 16:9, 9:16, IG Post, IG Story, Twitter Header, YouTube Cover
    4. Drag the crop box to position it. Pinch on touch devices to zoom; scroll-wheel zoom on desktop
    5. Use the rotation buttons (90° increments) if the photo is sideways, or fine-tune with the slider
    6. Pick the output format — PNG (lossless), JPEG (smaller, photo-friendly), or WebP (smallest, modern)
    7. Set JPEG/WebP quality (85 is the web sweet spot) and click Download

    The crop happens entirely in your browser via the HTML canvas API. No file is transmitted, no cropped result lives on a server. Refresh the page and the photo is gone from memory.

    Format choice — PNG vs JPEG vs WebP after crop

    • JPEG quality 85: right answer for photographs in 95% of cases. Compresses to ~15% the size of an equivalent PNG with no perceptible quality loss. Use for photos uploaded to social media, websites, and email.
    • WebP quality 85: ~30% smaller than JPEG at equivalent quality. Supported everywhere modern (Chrome, Safari 14+, Firefox, Edge). Use for web delivery; some legacy systems and older email clients still don’t accept WebP.
    • PNG: for graphics with text, sharp edges, or transparency. Photos saved as PNG are ~5× larger than JPEG with no quality benefit. Don’t use for photos.
    • Original format: when you want the cropped output to match the source format exactly (preserving any specific format quirks the source had).

    The quality slider matters most for JPEG. At 85, photos look identical to the source. At 75, side-by-side comparisons reveal slight artefacts on detail-heavy regions but the average viewer doesn’t notice. At 60, compression artefacts become visible on skin tones and gradients. For social media uploads, the platform recompresses your image anyway — start at 85 to give the platform clean source material to work from.

    Rotation — the under-used feature that fixes most “bad” photos

    Phone photos taken in landscape orientation but stored with the EXIF rotation flag are a constant source of confusion. Some viewers honor the EXIF flag (showing the photo upright); some don’t (showing it sideways). Our cropper reads the EXIF orientation tag and applies it correctly before showing the photo, so what you see is what you’ll get on every platform.

    Beyond EXIF correction, manual rotation handles three common cases:

    • Slightly tilted horizons. A photo of the ocean with a 2° tilt looks “off” subconsciously. Our cropper has a fine-rotation slider for ±15° corrections.
    • Sideways scans. A document scanned upside-down can be rotated 180° before cropping the relevant region.
    • Aspect ratio fit. A wide landscape photo can be rotated 90° and cropped to portrait if you specifically need vertical orientation.

    Cropping in code — Sharp, Pillow, ImageMagick

    Node.js (Sharp — fastest production library):

    import sharp from "sharp";
    
    // Crop to 1080×1080 from the top-left corner
    await sharp("photo.jpg")
      .extract({ left: 0, top: 0, width: 1080, height: 1080 })
      .jpeg({ quality: 85 })
      .toFile("photo-square.jpg");
    
    // Or use the smart resize-crop combo (centers automatically)
    await sharp("photo.jpg")
      .resize(1080, 1080, { fit: "cover", position: "centre" })
      .toFile("photo-1080.jpg");

    Python (Pillow):

    from PIL import Image
    
    img = Image.open("photo.jpg")
    # Crop coords: (left, top, right, bottom)
    cropped = img.crop((100, 50, 1180, 1130))
    cropped.save("photo-square.jpg", quality=85, optimize=True)

    ImageMagick CLI:

    # Smart center crop to 1080×1080
    magick photo.jpg -resize 1080x1080^ -gravity center -extent 1080x1080 photo-square.jpg
    
    # Crop a specific region (1080×1080 starting at x=100, y=50)
    magick photo.jpg -crop 1080x1080+100+50 photo-square.jpg

    For batch processing — say, cropping 500 product photos from a CSV of crop coords — Sharp on Node is the fastest approach. Sharp uses libvips under the hood and processes thousands of images per minute on commodity hardware.

    The four mistakes that ruin cropped photos

    • Cropping too tight on faces. Cutting the top of someone’s head looks bad on every platform. Leave 10-15% headroom in any portrait crop. The standard wedding/event photographer rule.
    • Wrong aspect ratio for the platform. Cropping to 1:1 then uploading to Pinterest (which prefers 2:3) wastes the platform’s algorithmic preference for your format. Match the ratio to the destination first.
    • Letting the platform crop instead. Auto-cropping algorithms pick the centre by default. If your subject is off-centre — common in Rule-of-Thirds composed photos — the platform will crop them right out of the frame.
    • Saving as PNG when JPEG would do. A 1080×1080 photograph saved as PNG is ~3 MB; the same as JPEG quality 85 is ~200 KB. Social platforms then recompress the PNG anyway. Skip the round-trip and save as JPEG to start.

    When NOT to crop

    • Legal evidence photos. Cropping changes the file’s metadata and visual extent — both attributes courts use to verify authenticity. Submit originals.
    • Anything documenting medical or scientific evidence. The framing is part of the data. If you must crop for size, archive the original separately with the crop coordinates documented.
    • RAW camera files (.cr2, .nef, .arw, .dng). Cropping a raw file loses the RAW container. Develop the RAW first in Lightroom, Capture One, or darktable, then crop the resulting JPEG/TIFF.
    • Photos with EXIF metadata you need to preserve. Standard browser cropping strips EXIF (location, camera model, aperture, shutter speed). Use a metadata-preserving tool like exiftool if the EXIF matters.

    Frequently asked questions

    Does cropping reduce image quality?

    Cropping itself doesn’t reduce quality — the cropped pixels are byte-identical to the source. Quality loss happens only if you re-encode the result as JPEG or WebP at a lower quality setting. Save at 85+ and the cropped image is visually indistinguishable from the source within the cropped region.

    Is my photo uploaded when I use the cropper?

    No. The browser reads the photo locally via the File API, the cropper renders it on a canvas in your browser tab, and the cropped output is offered as a download — all without making any network requests. Open browser DevTools Network tab and watch for upload requests when you click Download: there are none.

    What’s the maximum image size the cropper handles?

    Limited by your device’s RAM, not by us. A 50-megapixel raw smartphone photo (~15 MB) crops in about a second on a modern laptop. A 100-megapixel medium-format JPEG (~50 MB) might take 2-3 seconds. Server-based croppers cap at 10-25 MB; we have no upper limit because there’s no upload.

    Can I crop multiple photos at once?

    The current tool is one-at-a-time. For batch jobs, use Sharp or Pillow scripts (examples above). The browser tool is optimised for the case of “I have one photo and need it in a specific shape” — the most common social-media workflow.

    Will the cropper preserve transparency in PNGs?

    Yes if you save as PNG or WebP. JPEG output flattens transparency to white because JPEG doesn’t support transparency. If your source has transparency you want to keep, choose PNG or WebP for the output format.

    Can I crop a circle or non-rectangular shape?

    The cropper outputs rectangular images only — that’s what every social platform actually accepts. For circular profile photos, social platforms apply the circle mask themselves at display time, so a square crop is what you upload. If you need actual circular images for design work (with transparent corners), use a vector editor like Figma or Illustrator after cropping to square.

    Related tools and guides

     

  • PDF Merger Tool: Combine PDFs in Your Browser [2026 Guide]

    PDF Merger Tool: Combine PDFs in Your Browser [2026 Guide]

    TL;DR: A PDF merger tool combines multiple PDF files into one, in the order you choose. Our browser-based PDF merger drops, reorders, and merges entirely on your device — no upload, no signup, no file size cap. Text stays searchable, fonts stay embedded, and the merged file is structurally identical to running pdftk cat from the command line. For most office workflows (contract packages, signed-document stacks, multi-source reports), this is the fastest workflow you can build.

    Every office worker hits the same wall once or twice a month: the contract is in two PDFs, the signature page is in a third, the appendix arrived as a separate email attachment, and the recipient wants one file. PDF merging is the mundane plumbing of business workflows — boring, frequent, and easier with the right tool than people realise. The catch is that the most popular cloud-based mergers upload your file to their servers, which is the wrong default for contracts, signed documents, medical records, or anything containing PII.

    Our PDF merger tool runs entirely in your browser using pdf-lib — the same JavaScript PDF library that powers many enterprise document pipelines. Drop your PDFs, reorder them with arrow buttons, click merge. The output downloads to your device. Nothing transmits. This guide explains how PDF merging actually works under the hood, what gets preserved vs lost during the merge, and the workflow tricks that make merging fast for repeat tasks.

    What does PDF merging actually do to the file?

    A PDF is a tree of objects — pages, fonts, images, metadata, structural elements — referenced by a cross-reference table. Merging two PDFs concatenates the page lists from each source while copying every referenced object (fonts, images, etc.) into the output’s object table. The result is a single PDF whose pages appear in the order you specified, with no quality loss because no pixel data is recompressed.

    Element What happens during merge
    Pages Concatenated in your specified order. No re-rendering.
    Text content Fully preserved. Searchable, selectable, and copy-pasteable in the merged file.
    Fonts Embedded fonts from each source are copied. If the same font appears in multiple sources, it’s deduplicated.
    Images Preserved at original quality. No recompression.
    Hyperlinks Preserved per-page. Internal links that pointed within the original PDF still work.
    Bookmarks / TOC Most browser-based mergers strip these. Heavyweight tools (Acrobat, PDFsam) preserve and renumber.
    Form fields Preserved. If two PDFs have fields with the same name, behavior is undefined — rename in source first.
    Digital signatures Invalidated. Signatures cryptographically sign the entire file’s bytes; merging changes those bytes.
    Metadata (title, author, etc.) Inherited from the first PDF in the list, or blank if our tool’s metadata-strip default is on.

    The signature gotcha matters for legal workflows. If you’re merging a digitally-signed contract with an appendix, the merged file no longer carries the signature’s cryptographic validation — opening it in Acrobat shows the signature as “invalid” because the document hash has changed. Workflow: merge first, then sign the combined file, or keep signed documents separate and bundle them in a ZIP.

    The five workflows people actually use a PDF merger for

    • Contract package assembly. NDA + master agreement + statement of work + signature page = one deliverable. Reorder so the cover page is first, signature page last. The most common business use case.
    • Receipts and expense reports. Combine 12 individual receipt PDFs into a single end-of-quarter expenses document. Saves the 12-attachment email and gives accounting one file to file.
    • Multi-source research bundle. Three articles, two slide decks exported as PDF, one transcript — one master read-pack for the team. Order matters here: put the executive summary first.
    • Email + attachments archive. Many email clients let you “print to PDF” both the message and its attachments. Merging produces a single permanent record. Useful for legal discovery and personal archiving.
    • Scanned document stacking. A scanner that produces one PDF per page (still common in older office machines) leaves you with 30 single-page PDFs after a long scan job. Merge produces the document you actually wanted.

    For each use case, the order of the source PDFs matters. Spend a moment with the up/down arrows before clicking merge — fixing order after the fact requires splitting + remerging, which is more work than getting it right the first time.

    How to use the browser PDF merger

    1. Open the PDF merger tool
    2. Drop your PDFs onto the dropzone, or click to pick files. Multiple selection works on every modern OS
    3. Each file appears in a list with its filename and page count
    4. Use the up / down arrow buttons to reorder. The order in the list is the order in the merged output
    5. Trash icon removes any file you don’t want included
    6. The total page count for the merged file shows above the list — sanity-check before merging
    7. Click Merge. The merged PDF downloads as merged-{timestamp}.pdf

    Everything happens locally — when you select a file, the browser reads it, parses the page count, and discards it from memory after merge. No copy is sent to our servers. The 100MB+ practical ceiling is your browser’s RAM, not a server-side cap. Most laptops handle hundreds of source PDFs at a time without issue.

    Cloud merger vs browser merger — the privacy trade-off

    The PDF merger market is split between cloud-based services (iLovePDF, Smallpdf, Adobe Acrobat online) that upload your file to their servers and process it there, and browser-based tools (ours, Drawboard, PDFsam in its desktop form) that process locally. The trade-off:

      Cloud merger Browser merger
    Speed Fast for huge files (server CPU) Limited by your device
    File size limit 10-50MB typical free tier Limited by browser RAM (~200-500MB)
    Bookmark preservation Usually yes Usually no (pdf-lib doesn’t preserve)
    Privacy File uploaded, retained briefly per privacy policy Never leaves your device
    Internet required? Yes, for entire operation Only for first page load
    Right for Public PDFs, marketing assets Contracts, medical, legal, anything sensitive

    For an offsite training PDF you’re combining with the public schedule, cloud is fine. For a draft NDA being merged with a tax return for a property purchase, never upload — privacy isn’t a policy promise on a help page; it’s the architecture of where the bytes go. Browser-based merging gives you architectural privacy.

    Merging PDFs in code

    For automated pipelines — say, monthly receipt-bundle generation or batch document assembly — a script beats clicking. Each environment has a mature library.

    Python (pikepdf — fastest, lossless):

    import pikepdf
    from pathlib import Path
    
    merged = pikepdf.Pdf.new()
    for path in sorted(Path("inputs").glob("*.pdf")):
        src = pikepdf.Pdf.open(path)
        merged.pages.extend(src.pages)
    merged.save("merged.pdf")

    Node.js (pdf-lib — the same library our browser tool uses):

    import { PDFDocument } from "pdf-lib";
    import { readFile, writeFile } from "node:fs/promises";
    
    const merged = await PDFDocument.create();
    for (const file of ["a.pdf", "b.pdf", "c.pdf"]) {
      const bytes = await readFile(file);
      const src = await PDFDocument.load(bytes);
      const pages = await merged.copyPages(src, src.getPageIndices());
      pages.forEach((p) => merged.addPage(p));
    }
    await writeFile("merged.pdf", await merged.save());

    qpdf (CLI — fastest for very large jobs):

    # Merge in alphabetical order
    qpdf --empty --pages *.pdf -- merged.pdf
    
    # Merge specific files in specific order
    qpdf --empty --pages a.pdf b.pdf c.pdf -- merged.pdf
    
    # Preserve bookmarks (qpdf does this by default; some libraries don't)
    qpdf --empty --pages a.pdf 1-5 b.pdf 1-z -- merged.pdf

    Ghostscript (CLI — slowest but recompresses + may shrink output):

    gs -dBATCH -dNOPAUSE -q -sDEVICE=pdfwrite \
       -sOutputFile=merged.pdf a.pdf b.pdf c.pdf

    Choose by goal. pikepdf and pdf-lib are lossless and fast — same approach as our browser tool. qpdf is the most powerful for complex page-range merges and preserves bookmarks. Ghostscript re-encodes everything (slower but can produce smaller files because it consolidates duplicated objects across sources). For most workflows, pikepdf or pdf-lib is the right answer.

    Merging password-protected PDFs

    Browser-based mergers can’t read encrypted PDFs without the password — pdf-lib loads encrypted documents only if you pass the password explicitly, and our tool doesn’t expose that field by design. Three options when one of your sources is password-protected:

    • Decrypt first, merge second. Open the encrypted PDF in Adobe Acrobat (or qpdf with --decrypt), save an unencrypted copy with a different filename, then merge. Delete the unencrypted copy after the merge if the password protected sensitive content. Don’t share the unencrypted intermediate file.
    • Use qpdf at the command line. qpdf --password=secret --decrypt encrypted.pdf decrypted.pdf, then merge with the steps above. Direct enough that the password never leaves your terminal session.
    • Skip the encrypted source. If the encryption is meaningful (PII, financial data), think hard before merging — a single combined unencrypted file is now your weakest-link risk. Consider keeping the documents separate and bundling them in a password-protected ZIP instead.

    Common mistakes that produce bad merges

    • Wrong page order. The list order in the tool is the merge order. Always sanity-check the order before clicking merge — fixing it post-merge requires splitting and remerging.
    • Mixing landscape and portrait pages without thinking. The merged PDF will display them in their original orientations, which can read as inconsistent. Either rotate problem pages first (some PDF tools have a rotate option, or use qpdf --rotate) or accept the mixed orientation if it’s fine for your reader.
    • Merging across versions of the same document. If you have v1 and v3 of a contract and accidentally merge both, the result is two confusingly-similar copies. Always rename or archive old versions before assembling a deliverable.
    • Forgetting that signed PDFs lose signatures on merge. Sign the merged file, not the components, when you need a single legally-binding document.
    • Merging huge files all at once on a low-memory device. 50 source PDFs at 20 MB each requires 1 GB of free browser RAM minimum. If your device is tight, merge in batches (10 PDFs first, then 10 more, etc.) rather than all at once.

    When NOT to merge PDFs

    • Legal exhibits. Court filings often require each exhibit to remain a separate file with its original filename. Merging changes the file’s identity for evidence purposes. Check the local rules before combining.
    • Already-digitally-signed contracts. Merging invalidates the signature. If the signature is the whole point of the document, keep it separate.
    • Different access-control documents. A confidential financial statement merged with a public marketing PDF inherits the most-permissive distribution permissions automatically. Keep different sensitivity levels separate.
    • Documents whose order changes by audience. If you sometimes need the appendix first and sometimes last, keep the parts separate and merge fresh per audience.
    • Files that exceed 100MB total. Browser memory becomes the bottleneck. Use qpdf or pikepdf locally instead.

    Frequently asked questions

    Does merging PDFs reduce their quality?

    No. PDF merging copies pages and embedded resources without re-encoding any content. The merged file is byte-for-byte equivalent to the source pages — text stays searchable and selectable, images retain their original quality, fonts render the same. The only thing that changes is the file’s metadata and structural elements (cross-reference table, object IDs).

    Is there a limit on how many PDFs I can merge?

    The browser tool’s limit is your device’s RAM, not a fixed file count. Merging 50 small office PDFs is trivial; merging 50 image-heavy 20MB PDFs needs about 1 GB of free browser memory. For very large jobs (hundreds of PDFs, gigabytes of total size), use a command-line tool like qpdf or pikepdf locally, which streams the merge rather than loading everything into memory.

    Will the merged PDF be searchable?

    Yes — text content, hyperlinks, and form fields all survive merging. If a source PDF was searchable before, those pages are searchable in the merged output. If a source was a scanned image-only PDF without OCR, those pages remain image-only in the merge. To make scanned pages searchable, run OCR (Adobe Acrobat, tesseract, ABBYY FineReader) before or after merging.

    Are bookmarks preserved when I merge?

    In our browser tool, no — pdf-lib (the underlying library) doesn’t preserve bookmarks across merges. If your workflow needs combined bookmarks (think long technical reports with TOCs), use Adobe Acrobat, PDFsam Basic, or qpdf at the command line — all three preserve and renumber bookmarks during merge.

    Can I merge a PDF with a Word document or image?

    Not directly. PDF mergers only accept PDF input. Convert other formats first: print Word documents to PDF (built into Word and Google Docs), or use an image-to-PDF tool to wrap photos and scans into PDF format. Then merge as usual.

    Is my PDF uploaded when I use the merger?

    No. The browser reads your PDF locally via the File API, parses it with pdf-lib, performs the merge in JavaScript, and offers the result as a download — all without making any network requests. Verify by opening Chrome DevTools → Network tab and watching for upload requests when you click merge: there are none.

    Related tools and guides

     

  • Strong Random Password Generator: NIST-Aligned & Secure

    Strong Random Password Generator: NIST-Aligned & Secure

    TL;DR: A strong random password generator uses your browser’s Web Crypto API (crypto.getRandomValues) to produce passwords from genuine OS-level entropy, not predictable Math.random(). Aim for at least 80 bits of entropy — that’s roughly 16 mixed-case alphanumeric characters or a 6-word passphrase. Our free generator does both and shows you the entropy live, so you can see exactly how strong each output is.

    The fundamental rule of password security has changed quietly: NIST’s 2024 update (SP 800-63-4) prohibits forcing users to mix uppercase, lowercase, digits, and symbols. The reason is empirical. Forced complexity rules produced more predictable passwords, not stronger ones — users picked the same dozen tricks (capitalise the first letter, replace o with 0, add ! at the end) and attackers learned them years ago. The new guidance: length is what matters. A 16-character lowercase-only password has more entropy than an 8-character password using the full ASCII set.

    Our strong random password generator implements this guidance. It defaults to 20 characters with the full mixed-case alphanumeric+symbol pool, computes the entropy live, and runs entirely in your browser using the Web Crypto API — your password never travels to any server. This guide explains the math behind password strength, why Math.random() is dangerous, the three modes (random, pronounceable, passphrase) and when to use each, and the storage workflow that keeps strong passwords actually usable.

    Why password entropy matters more than complexity

    Password strength is measured in bits of entropy. A password with N bits of entropy means an attacker needs to try up to 2^N combinations to crack it by brute force. The math is simple: each character drawn at random from a pool of P characters contributes log₂(P) bits.

    Character pool Pool size Bits per character
    Lowercase only (a-z) 26 4.7
    Lower + upper (a-z, A-Z) 52 5.7
    Lower + upper + digits 62 5.95
    Lower + upper + digits + symbols ~94 6.55

    Multiply bits-per-character by length to get total entropy. The threshold to remember:

    • Under 40 bits: weak. Crackable in minutes-to-hours by a modern GPU farm against any common password hash.
    • 40-60 bits: moderate. Survives casual attacks but falls to determined attackers within days against fast hashes (MD5, SHA-256).
    • 60-80 bits: strong. Beyond practical brute force for any single attacker; survives most state-of-the-art GPU farms for years.
    • 80+ bits: excellent. Requires nation-state computational resources and decades of work. NIST’s recommended floor for high-security passwords.