Build An HTML5 Color Picker with CMYK

Live stream set for 2025-11-18 at 14:00:00 Eastern

Ask questions in the live chat about any programming or lifestyle topic.

This livestream will be on YouTube or you can watch below.

Creating an HTML5 Color Picker with CMYK Using the Input Element

Creating an HTML5 Color Picker with CMYK Using the Input Element

In this post, we’ll explore how to create a simple HTML5 color picker that allows users to select colors in the CMYK color model (Cyan, Magenta, Yellow, and Key/Black) using the <input> element. While most color pickers use RGB (Red, Green, Blue) or HEX values, CMYK is commonly used in print design and offers an alternative for specific design needs.

What You’ll Need:

• A basic understanding of HTML5.
• Some familiarity with JavaScript (if you want to implement interactivity).
• A text editor (like Visual Studio Code) to write your code.

Step 1: HTML5 Input Element for Color Selection

HTML5 introduced the <input type="color"> element, which lets users pick colors through a native browser interface. But it only supports RGB and HEX formats. We’ll need to create a custom solution to work with CMYK.

Here’s the basic HTML structure for the color picker:

    <h1>HTML5 Color Picker with CMYK</h1>
    <p>Select a color and see the CMYK values:</p>
    
    <!-- Input for selecting color in HEX -->
    <input type="color" id="colorPicker">
    
    <div id="cmykValues">
        <p>C: <span id="cyan">0</span>%</p>
        <p>M: <span id="magenta">0</span>%</p>
        <p>Y: <span id="yellow">0</span>%</p>
        <p>K: <span id="key">0</span>%</p>
    </div>

    <script src="script.js"></script>

This simple structure creates a color picker input field and a place to display the CMYK values.

Step 2: JavaScript to Convert RGB to CMYK

To convert the color chosen in RGB to CMYK, we’ll write a JavaScript function. This will take the RGB values from the color picker and convert them to their respective CMYK values.

Here’s the JavaScript code:

document.getElementById('colorPicker').addEventListener('input', function(event) {
    let hex = event.target.value;
    let rgb = hexToRgb(hex);
    let cmyk = rgbToCmyk(rgb.r, rgb.g, rgb.b);

    document.getElementById('cyan').textContent = Math.round(cmyk.c * 100) + '%';
    document.getElementById('magenta').textContent = Math.round(cmyk.m * 100) + '%';
    document.getElementById('yellow').textContent = Math.round(cmyk.y * 100) + '%';
    document.getElementById('key').textContent = Math.round(cmyk.k * 100) + '%';
});

// Convert HEX to RGB
function hexToRgb(hex) {
    let r = parseInt(hex.slice(1, 3), 16);
    let g = parseInt(hex.slice(3, 5), 16);
    let b = parseInt(hex.slice(5, 7), 16);
    return { r, g, b };
}

// Convert RGB to CMYK
function rgbToCmyk(r, g, b) {
    r /= 255;
    g /= 255;
    b /= 255;

    let k = 1 - Math.max(r, g, b);
    let c = (1 - r - k) / (1 - k);
    let m = (1 - g - k) / (1 - k);
    let y = (1 - b - k) / (1 - k);

    return { c, m, y, k };
}

Here’s how the code works:

1. We listen for the input event on the color picker and retrieve the selected color in HEX format.
2. We then convert this HEX value into RGB values.
3. After that, we convert the RGB values into CMYK using a simple formula.
4. Finally, we display the resulting CMYK values on the page.

Step 3: Adding Some Style

You can add some CSS to make the page look better and more organized. Here’s a simple style:

    body {
        font-family: Arial, sans-serif;
        margin: 20px;
        background-color: #f4f4f4;
    }
    h1 {
        color: #333;
    }
    #cmykValues p {
        font-size: 16px;
        margin: 5px 0;
    }
    #colorPicker {
        margin: 20px 0;
        padding: 10px;
        width: 100px;
        height: 40px;
    }

This will add some space between elements, adjust the size of the color picker, and generally make the page look cleaner.

Consolidated Demo

Screenshot

Live Screencast

Step 4: Further Learning

If you’re interested in expanding your JavaScript knowledge, check out my book, Learning JavaScript, or my course Learning JavaScript for in-depth lessons and hands-on coding exercises.

If you’re looking for personalized guidance, I offer one-on-one programming tutorials. Feel free to reach out to me via my contact page.

Conclusion

Creating a color picker in HTML5 with CMYK support is a fun and practical project that can help you learn more about color models and the power of HTML5’s input element. I hope this tutorial was helpful, and don’t forget to check out my book and course if you want to dive deeper into JavaScript!

Feel free to let me know if you have any questions or suggestions. Happy coding!