| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
|
| <title> |
| Adjust Colors Online Free - PDF Color Adjustment Tool | BentoPDF |
| </title> |
| <meta |
| name="title" |
| content="Adjust Colors Online Free - PDF Color Adjustment Tool | BentoPDF" |
| /> |
| <meta |
| name="description" |
| content="★ Adjust PDF colors online free - Brightness, contrast, saturation, hue, temperature & more ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure" |
| /> |
| <meta |
| name="keywords" |
| content="adjust pdf colors, pdf brightness, pdf contrast, pdf saturation, pdf hue shift, pdf color correction" |
| /> |
| <meta name="author" content="BentoPDF" /> |
| <meta |
| name="robots" |
| content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" |
| /> |
|
|
| <link rel="canonical" href="https://www.bentopdf.com/adjust-colors.html" /> |
|
|
| <meta property="og:type" content="website" /> |
| <meta property="og:url" content="https://www.bentopdf.com/adjust-colors" /> |
| <meta |
| property="og:title" |
| content="Adjust Colors Online Free - PDF Color Adjustment Tool | BentoPDF" |
| /> |
| <meta |
| property="og:description" |
| content="★ Adjust PDF colors online free - Brightness, contrast, saturation, hue, temperature & more ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser ★ Fast & secure" |
| /> |
| <meta |
| property="og:image" |
| content="https://www.bentopdf.com/images/og-adjust-colors.png" |
| /> |
| <meta property="og:image:width" content="1200" /> |
| <meta property="og:image:height" content="630" /> |
| <meta property="og:site_name" content="BentoPDF" /> |
|
|
| <meta name="twitter:card" content="summary_large_image" /> |
| <meta name="twitter:url" content="https://www.bentopdf.com/adjust-colors" /> |
| <meta name="twitter:title" content="Adjust Colors Free" /> |
| <meta |
| name="twitter:description" |
| content="★ Adjust PDF colors online free - Brightness, contrast, saturation, hue & more ★ No signup ★ Unlimited files ★ Privacy-first ★ Works in browser" |
| /> |
| <meta |
| name="twitter:image" |
| content="https://www.bentopdf.com/images/twitter-adjust-colors.png" |
| /> |
| <meta name="twitter:site" content="@BentoPDF" /> |
|
|
| <meta name="mobile-web-app-capable" content="yes" /> |
| <meta name="apple-mobile-web-app-capable" content="yes" /> |
| <meta name="apple-mobile-web-app-title" content="Adjust Colors" /> |
|
|
| <title>Adjust Colors - BentoPDF</title> |
| <meta |
| name="description" |
| content="Adjust brightness, contrast, saturation, hue, temperature, gamma and more in your PDF. Free, secure, and runs entirely in your browser." |
| /> |
|
|
| <link href="/src/css/styles.css" rel="stylesheet" /> |
|
|
| <link rel="manifest" href="/site.webmanifest" /> |
|
|
| <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" /> |
| <link |
| rel="icon" |
| type="image/png" |
| sizes="192x192" |
| href="/images/favicon-192x192.png" |
| /> |
| <link |
| rel="icon" |
| type="image/png" |
| sizes="512x512" |
| href="/images/favicon-512x512.png" |
| /> |
| <link |
| rel="apple-touch-icon" |
| sizes="180x180" |
| href="/images/apple-touch-icon.png" |
| /> |
| <link rel="icon" href="/favicon.ico" sizes="32x32" /> |
| </head> |
|
|
| <body class="antialiased bg-gray-900"> |
| {{> navbar }} |
|
|
| <div |
| id="uploader" |
| class="min-h-screen flex flex-col items-center justify-start py-12 p-4 bg-gray-900" |
| > |
| <div |
| id="tool-uploader" |
| class="bg-gray-800 rounded-xl shadow-xl px-4 py-8 md:p-8 max-w-4xl w-full text-gray-200 border border-gray-700" |
| > |
| <button |
| id="back-to-tools" |
| class="flex items-center gap-2 text-indigo-400 hover:text-indigo-300 mb-6 font-semibold" |
| > |
| <i data-lucide="arrow-left" class="cursor-pointer"></i> |
| <span class="cursor-pointer" data-i18n="tools.backToTools"> |
| Back to Tools |
| </span> |
| </button> |
|
|
| <h1 |
| class="text-2xl font-bold text-white mb-2" |
| data-i18n="tools:adjustColors.name" |
| > |
| Adjust Colors Free Online - PDF Color Correction Tool |
| </h1> |
| <p class="text-gray-400 mb-6" data-i18n="tools:adjustColors.subtitle"> |
| Fine-tune brightness, contrast, saturation, hue and more in your PDF. |
| </p> |
|
|
| <div |
| id="drop-zone" |
| class="relative flex flex-col items-center justify-center w-full h-48 md:h-64 border-2 border-dashed border-gray-600 rounded-xl cursor-pointer bg-gray-900 hover:bg-gray-700 transition-colors duration-300" |
| > |
| <div class="flex flex-col items-center justify-center pt-5 pb-6"> |
| <i |
| data-lucide="upload-cloud" |
| class="w-10 h-10 mb-3 text-gray-400" |
| ></i> |
| <p class="mb-2 text-sm text-gray-400"> |
| <span class="font-semibold" data-i18n="upload.clickToSelect" |
| >Click to select a file</span |
| > |
| <span data-i18n="upload.orDragAndDrop">or drag and drop</span> |
| </p> |
| <p class="text-xs text-gray-500" data-i18n="upload.hints.singlePdf"> |
| A single PDF file |
| </p> |
| <p class="text-xs text-gray-500" data-i18n="upload.filesNeverLeave"> |
| Your files never leave your device. |
| </p> |
| </div> |
| <input |
| id="file-input" |
| type="file" |
| class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer" |
| accept="application/pdf" |
| /> |
| </div> |
|
|
| <div id="file-display-area" class="mt-4 space-y-2"></div> |
|
|
| <div id="options-panel" class="hidden mt-6"> |
| <div class="flex flex-col lg:flex-row gap-6"> |
| <div class="flex-1 min-w-0"> |
| <div |
| class="border border-gray-600 rounded-lg overflow-hidden bg-gray-900" |
| > |
| <canvas id="preview-canvas" class="w-full"></canvas> |
| </div> |
| </div> |
|
|
| <div class="lg:w-80 flex-shrink-0 space-y-4"> |
| <div class="flex items-center justify-between"> |
| <h3 |
| class="text-lg font-semibold text-white flex items-center gap-2" |
| > |
| <i data-lucide="palette" class="w-5 h-5"></i> |
| <span data-i18n="tools:adjustColors.colorSettings" |
| >Color Settings</span |
| > |
| </h3> |
| <button |
| id="reset-settings-btn" |
| class="text-xs text-gray-300 hover:text-white border border-gray-600 hover:border-gray-500 px-3 py-1 rounded-lg transition-colors" |
| > |
| Reset |
| </button> |
| </div> |
|
|
| <div> |
| <div class="flex justify-between text-sm mb-1"> |
| <span |
| class="text-gray-300" |
| data-i18n="tools:adjustColors.brightness" |
| >Brightness</span |
| > |
| <span id="brightness-value" class="text-gray-400">0</span> |
| </div> |
| <input |
| type="range" |
| id="setting-brightness" |
| min="-100" |
| max="100" |
| value="0" |
| class="w-full accent-indigo-500" |
| /> |
| </div> |
|
|
| <div> |
| <div class="flex justify-between text-sm mb-1"> |
| <span |
| class="text-gray-300" |
| data-i18n="tools:adjustColors.contrast" |
| >Contrast</span |
| > |
| <span id="contrast-value" class="text-gray-400">0</span> |
| </div> |
| <input |
| type="range" |
| id="setting-contrast" |
| min="-100" |
| max="100" |
| value="0" |
| class="w-full accent-indigo-500" |
| /> |
| </div> |
|
|
| <div> |
| <div class="flex justify-between text-sm mb-1"> |
| <span |
| class="text-gray-300" |
| data-i18n="tools:adjustColors.saturation" |
| >Saturation</span |
| > |
| <span id="saturation-value" class="text-gray-400">0</span> |
| </div> |
| <input |
| type="range" |
| id="setting-saturation" |
| min="-100" |
| max="100" |
| value="0" |
| class="w-full accent-indigo-500" |
| /> |
| </div> |
|
|
| <div> |
| <div class="flex justify-between text-sm mb-1"> |
| <span |
| class="text-gray-300" |
| data-i18n="tools:adjustColors.hueShift" |
| >Hue Shift</span |
| > |
| <span id="hue-shift-value" class="text-gray-400">0°</span> |
| </div> |
| <input |
| type="range" |
| id="setting-hue-shift" |
| min="0" |
| max="360" |
| value="0" |
| class="w-full accent-indigo-500" |
| /> |
| </div> |
|
|
| <div> |
| <div class="flex justify-between text-sm mb-1"> |
| <span |
| class="text-gray-300" |
| data-i18n="tools:adjustColors.temperature" |
| >Temperature</span |
| > |
| <span id="temperature-value" class="text-gray-400">0</span> |
| </div> |
| <input |
| type="range" |
| id="setting-temperature" |
| min="-50" |
| max="50" |
| value="0" |
| class="w-full accent-indigo-500" |
| /> |
| </div> |
|
|
| <div> |
| <div class="flex justify-between text-sm mb-1"> |
| <span |
| class="text-gray-300" |
| data-i18n="tools:adjustColors.tint" |
| >Tint</span |
| > |
| <span id="tint-value" class="text-gray-400">0</span> |
| </div> |
| <input |
| type="range" |
| id="setting-tint" |
| min="-50" |
| max="50" |
| value="0" |
| class="w-full accent-indigo-500" |
| /> |
| </div> |
|
|
| <div> |
| <div class="flex justify-between text-sm mb-1"> |
| <span |
| class="text-gray-300" |
| data-i18n="tools:adjustColors.gamma" |
| >Gamma</span |
| > |
| <span id="gamma-value" class="text-gray-400">1.0</span> |
| </div> |
| <input |
| type="range" |
| id="setting-gamma" |
| min="0.2" |
| max="5.0" |
| value="1.0" |
| step="0.1" |
| class="w-full accent-indigo-500" |
| /> |
| </div> |
|
|
| <div> |
| <div class="flex justify-between text-sm mb-1"> |
| <span |
| class="text-gray-300" |
| data-i18n="tools:adjustColors.sepia" |
| >Sepia</span |
| > |
| <span id="sepia-value" class="text-gray-400">0</span> |
| </div> |
| <input |
| type="range" |
| id="setting-sepia" |
| min="0" |
| max="100" |
| value="0" |
| class="w-full accent-indigo-500" |
| /> |
| </div> |
| </div> |
| </div> |
|
|
| <button |
| id="process-btn" |
| class="btn-gradient w-full mt-6" |
| data-i18n="tools:adjustColors.processButton" |
| > |
| Apply Color Adjustments |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <div |
| id="loader-modal" |
| class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50" |
| > |
| <div |
| class="bg-gray-800 p-8 rounded-lg flex flex-col items-center gap-4 border border-gray-700 shadow-xl" |
| > |
| <div class="solid-spinner"></div> |
| <p id="loader-text" class="text-white text-lg font-medium"> |
| Processing... |
| </p> |
| </div> |
| </div> |
|
|
| <div |
| id="alert-modal" |
| class="fixed inset-0 bg-gray-900 bg-opacity-90 flex items-center justify-center z-50 hidden" |
| > |
| <div |
| class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full border border-gray-700" |
| > |
| <h3 |
| id="alert-title" |
| class="text-xl font-bold text-white mb-2" |
| data-i18n="alert.title" |
| > |
| Alert |
| </h3> |
| <p id="alert-message" class="text-gray-300 mb-6"></p> |
| <button |
| id="alert-ok" |
| class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200" |
| > |
| OK |
| </button> |
| </div> |
| </div> |
|
|
| <section class="max-w-4xl mx-auto px-4 py-12"> |
| <h2 |
| class="text-2xl md:text-3xl font-bold text-white mb-8 text-center" |
| data-i18n="howItWorks.title" |
| > |
| How It Works |
| </h2> |
| <div class="space-y-6"> |
| <div class="flex items-start gap-4"> |
| <div |
| class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold" |
| > |
| 1 |
| </div> |
| <div class="flex-1"> |
| <h3 class="text-lg font-semibold text-white mb-1">Upload File</h3> |
| <p class="text-gray-400"> |
| Click or drag and drop your PDF file to begin |
| </p> |
| </div> |
| </div> |
| <div class="flex items-start gap-4"> |
| <div |
| class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold" |
| > |
| 2 |
| </div> |
| <div class="flex-1"> |
| <h3 class="text-lg font-semibold text-white mb-1">Adjust Colors</h3> |
| <p class="text-gray-400"> |
| Fine-tune color settings with real-time preview |
| </p> |
| </div> |
| </div> |
| <div class="flex items-start gap-4"> |
| <div |
| class="flex-shrink-0 w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold" |
| > |
| 3 |
| </div> |
| <div class="flex-1"> |
| <h3 class="text-lg font-semibold text-white mb-1">Download</h3> |
| <p class="text-gray-400">Save your color-adjusted PDF instantly</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="max-w-6xl mx-auto px-4 py-12"> |
| <h2 |
| class="text-2xl md:text-3xl font-bold text-white mb-6 text-center" |
| data-i18n="relatedTools.title" |
| > |
| Related PDF Tools |
| </h2> |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4"> |
| <a |
| href="pdf-to-greyscale.html" |
| class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700" |
| > |
| <h3 class="text-white font-semibold mb-1">PDF to Greyscale</h3> |
| <p class="text-gray-400 text-sm">Free online greyscale tool</p> |
| </a> |
| <a |
| href="invert-colors.html" |
| class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700" |
| > |
| <h3 class="text-white font-semibold mb-1">Invert Colors</h3> |
| <p class="text-gray-400 text-sm">Free online invert colors tool</p> |
| </a> |
| <a |
| href="scanner-effect.html" |
| class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700" |
| > |
| <h3 class="text-white font-semibold mb-1">Scanner Effect</h3> |
| <p class="text-gray-400 text-sm">Make PDFs look scanned</p> |
| </a> |
| <a |
| href="background-color.html" |
| class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700" |
| > |
| <h3 class="text-white font-semibold mb-1">Background Color</h3> |
| <p class="text-gray-400 text-sm">Change PDF background</p> |
| </a> |
| <a |
| href="change-text-color.html" |
| class="block bg-gray-800 p-4 rounded-lg hover:bg-gray-700 transition-colors border border-gray-700" |
| > |
| <h3 class="text-white font-semibold mb-1">Text Color</h3> |
| <p class="text-gray-400 text-sm">Change PDF text color</p> |
| </a> |
| </div> |
| </section> |
|
|
| <section class="max-w-4xl mx-auto px-4 py-12"> |
| <h2 |
| class="text-2xl md:text-3xl font-bold text-white mb-6 text-center" |
| data-i18n="faq.sectionTitle" |
| > |
| Frequently Asked Questions |
| </h2> |
| <div class="space-y-4"> |
| <details class="bg-gray-800 p-5 rounded-lg border border-gray-700"> |
| <summary |
| class="cursor-pointer font-semibold text-white flex items-center justify-between" |
| > |
| Is adjust colors really free? |
| <i data-lucide="chevron-down" class="w-5 h-5"></i> |
| </summary> |
| <p class="mt-3 text-gray-400"> |
| Yes! BentoPDF is 100% free with no hidden fees, no signup required, |
| and unlimited file processing. |
| </p> |
| </details> |
| <details class="bg-gray-800 p-5 rounded-lg border border-gray-700"> |
| <summary |
| class="cursor-pointer font-semibold text-white flex items-center justify-between" |
| > |
| Are my files private and secure? |
| <i data-lucide="chevron-down" class="w-5 h-5"></i> |
| </summary> |
| <p class="mt-3 text-gray-400"> |
| Absolutely! All processing happens in your browser. Your files never |
| leave your device, ensuring complete privacy. |
| </p> |
| </details> |
| <details class="bg-gray-800 p-5 rounded-lg border border-gray-700"> |
| <summary |
| class="cursor-pointer font-semibold text-white flex items-center justify-between" |
| > |
| Is there a file size limit? |
| <i data-lucide="chevron-down" class="w-5 h-5"></i> |
| </summary> |
| <p class="mt-3 text-gray-400"> |
| No! Process files of any size, as many times as you want, completely |
| free. |
| </p> |
| </details> |
| </div> |
| </section> |
| {{> footer }} |
| <script type="module" src="/src/js/utils/lucide-init.ts"></script> |
| <script type="module" src="/src/js/utils/full-width.ts"></script> |
| <script type="module" src="/src/js/utils/simple-mode-footer.ts"></script> |
| <script type="module" src="/src/version.ts"></script> |
| <script type="module" src="/src/js/logic/adjust-colors-page.ts"></script> |
| <script type="module" src="/src/js/mobileMenu.ts"></script> |
| <script type="module" src="/src/js/main.ts"></script> |
|
|
| <script type="application/ld+json"> |
| { |
| "@context": "https://schema.org", |
| "@type": "SoftwareApplication", |
| "name": "Adjust Colors - BentoPDF", |
| "applicationCategory": "PDF Tool", |
| "operatingSystem": "Any - Web Browser", |
| "offers": { |
| "@type": "Offer", |
| "price": "0", |
| "priceCurrency": "USD" |
| }, |
| "aggregateRating": { |
| "@type": "AggregateRating", |
| "ratingValue": "4.7", |
| "ratingCount": "1856" |
| } |
| } |
| </script> |
|
|
| <script type="application/ld+json"> |
| { |
| "@context": "https://schema.org", |
| "@type": "HowTo", |
| "name": "How to adjust PDF colors online", |
| "description": "Learn how to adjust PDF colors using BentoPDF", |
| "step": [ |
| { |
| "@type": "HowToStep", |
| "position": 1, |
| "name": "Upload File", |
| "text": "Click or drag and drop your PDF file" |
| }, |
| { |
| "@type": "HowToStep", |
| "position": 2, |
| "name": "Adjust Colors", |
| "text": "Fine-tune brightness, contrast, saturation, hue and more with live preview" |
| }, |
| { |
| "@type": "HowToStep", |
| "position": 3, |
| "name": "Download", |
| "text": "Download your color-adjusted PDF" |
| } |
| ] |
| } |
| </script> |
|
|
| <script type="application/ld+json"> |
| { |
| "@context": "https://schema.org", |
| "@type": "BreadcrumbList", |
| "itemListElement": [ |
| { |
| "@type": "ListItem", |
| "position": 1, |
| "name": "Home", |
| "item": "https://www.bentopdf.com" |
| }, |
| { |
| "@type": "ListItem", |
| "position": 2, |
| "name": "Adjust Colors", |
| "item": "https://www.bentopdf.com/adjust-colors" |
| } |
| ] |
| } |
| </script> |
| </body> |
| </html> |
|
|
