---
layout: default
title: PDF Color Converter - Convert PDF Color Spaces
description: Convert PDF color spaces between RGB, CMYK, and Grayscale for print-ready documents.
permalink: /playground/tools/pdf-color-converter/
---

<link rel="stylesheet" href="../shared/tool-layout.css">

<div class="tool-wrapper">
    <div class="tool-breadcrumb">
        <a href="/playground/tools/">← Back to Tools</a>
    </div>

    <div class="tool-header">
        <h1>PDF Color Converter</h1>
        <p class="tool-description">Convert PDF color spaces for print or screen</p>
    </div>

    <div id="alert" class="alert"></div>

    <div class="tool-content">
        <div class="drop-zone" id="dropZone">
            <div class="drop-zone-icon">🎨</div>
            <div class="drop-zone-text">Click to select a PDF or drag it here</div>
            <div class="drop-zone-hint">Single PDF file only</div>
        </div>
        <input type="file" id="fileInput" class="file-input" accept=".pdf,application/pdf">

        <div id="settingsContainer" style="display: none; margin-top: 2rem;">
            <h3>Color Space Settings</h3>

            <div style="background: var(--tool-bg-light); border: 1px solid var(--tool-border); border-radius: 8px; padding: 1.5rem; margin-top: 1rem;">
                <div class="input-group">
                    <label for="colorSpace" style="font-weight: 600; display: block; margin-bottom: 0.5rem;">Target Color Space:</label>
                    <select id="colorSpace" style="width: 100%; padding: 0.75rem; border: 1px solid var(--tool-border); border-radius: 4px; font-size: 1rem;">
                        <option value="grayscale">Grayscale (Black & White)</option>
                        <option value="rgb" selected>RGB (Screen Display)</option>
                        <option value="cmyk">CMYK (Print Ready)</option>
                    </select>
                    <div id="colorSpaceDesc" style="margin-top: 0.75rem; font-size: 0.9rem; color: var(--tool-text-secondary);">
                        RGB is best for screen display and digital distribution.
                    </div>
                </div>

                <div class="input-group" style="margin-top: 1.5rem;">
                    <label style="font-weight: 600; display: block; margin-bottom: 0.5rem;">Additional Options:</label>

                    <label style="display: flex; align-items: center; margin-bottom: 0.5rem; cursor: pointer;">
                        <input type="checkbox" id="optimizeImages" checked style="margin-right: 0.5rem; width: 18px; height: 18px;">
                        <span>Optimize embedded images for target color space</span>
                    </label>

                    <label style="display: flex; align-items: center; cursor: pointer;">
                        <input type="checkbox" id="preserveTransparency" checked style="margin-right: 0.5rem; width: 18px; height: 18px;">
                        <span>Preserve transparency</span>
                    </label>
                </div>
            </div>

            <div style="margin-top: 1.5rem; padding: 1rem; border: 1px solid #0056b3; border-radius: 8px; background: #e7f3ff;">
                <strong>💡 Quick Guide:</strong>
                <ul style="margin: 0.5rem 0 0 1.5rem; font-size: 0.9rem;">
                    <li><strong>Grayscale:</strong> Best for black & white printing, smallest file size</li>
                    <li><strong>RGB:</strong> Best for web, email, and screen display</li>
                    <li><strong>CMYK:</strong> Required by professional printers, offset printing</li>
                </ul>
            </div>
        </div>

        <div id="previewContainer" style="display: none; margin-top: 2rem;">
            <h3>PDF Preview</h3>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem;">
                <div>
                    <h4 style="margin-bottom: 0.5rem; font-size: 0.9rem; color: var(--tool-text-secondary);">Original</h4>
                    <canvas id="originalCanvas" style="width: 100%; border: 2px solid var(--tool-border); border-radius: 4px;"></canvas>
                </div>
                <div>
                    <h4 style="margin-bottom: 0.5rem; font-size: 0.9rem; color: var(--tool-text-secondary);">Preview (Page 1)</h4>
                    <canvas id="previewCanvas" style="width: 100%; border: 2px solid var(--tool-border); border-radius: 4px;"></canvas>
                </div>
            </div>
        </div>

        <div class="btn-group" style="margin-top: 2rem;">
            <button id="clearBtn" class="btn btn-secondary" style="display: none;">
                Clear
            </button>
            <button id="previewBtn" class="btn btn-secondary" style="display: none;">
                Preview Changes
            </button>
            <button id="convertBtn" class="btn btn-primary" style="display: none;">
                Convert & Download
            </button>
        </div>

        <div id="progressContainer" style="display: none; margin-top: 1.5rem;">
            <div style="font-weight: 600; margin-bottom: 0.5rem;" id="progressTitle">Converting color space...</div>
            <div class="progress-bar">
                <div id="progressFill" class="progress-fill"></div>
            </div>
            <div id="progressText" style="margin-top: 0.5rem; font-size: 0.9rem; color: var(--tool-text-secondary);"></div>
        </div>
    </div>

    <div class="feature-list">
        <h3>Features</h3>
        <ul>
            <li>Convert between RGB, CMYK, and Grayscale</li>
            <li>Print-ready CMYK conversion</li>
            <li>Optimize embedded images</li>
            <li>Preserve transparency</li>
            <li>Preview before converting</li>
            <li>100% client-side processing</li>
            <li>No file uploads - complete privacy</li>
            <li>Works offline</li>
        </ul>

        <div style="margin-top: 1.5rem; padding: 1rem; border: 1px solid var(--tool-border); border-radius: 8px; background: var(--tool-bg-light);">
            <strong>Note:</strong> Color space conversion is applied to all pages. Some complex PDFs with special color profiles may not convert perfectly. Always verify output for professional printing.
        </div>
    </div>
</div>

<script src="../shared/tool-utils.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.min.js"
        integrity="sha384-6RsW+O0eLDetuZS+cLGe0xW5GuwTWcIcCcJg/LCT6S3qLKBXXXxLYzIvEd3KNQxw"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"
        integrity="sha384-TzqKflHZaLYKpKjLG7g3w8zkFSGdTqZB1wXU2/mKXPBqC8AE4V5GV76KxGqKGKGj"
        crossorigin="anonymous"></script>
<script src="tool.js"></script>