Wavelength to RGB Converter - RGB, CMYK, HEX Color Codes

Back to blog

  • How to use the Wavelength to RGB Converter

    Simple browser tool that converts a wavelength (nm) into a display color and shows:

    • Color name
    • HEX
    • RGB
    • CMYK
    • Wavelength

    It also includes a wavelength region axis (UV / visible spectrum / NIR / IR) and copy buttons for color values.

    Quick Start

    1. Open index.html in a browser.
    2. Enter a wavelength value in the input box.
    3. Press Convert (or hit Enter).
    4. Use Copy next to HEX / RGB / CMYK to paste into tools like Photoshop.

    No build step or dependencies are required.

    Input and Range Notes

    • Accepted input range: 1-1000 nm (integer).
    • Visible color rendering range: 380-780 nm.
    • Outside visible range:<380 shows UV label.>780 to 1000 shows IR label.
    • The top axis is a visual guide and is marked as rough (not strictly to scale).

    Output Behavior

    • For visible wavelengths:Shows color preview box.Shows HEX, RGB, CMYK rows with copy buttons.
    • For non-visible wavelengths:Shows region label and wavelength.No color value copy rows are shown.

    Copy Buttons

    • Copy copies only the value format:HEX example: #3FA9F5RGB example: rgb(63, 169, 245)CMYK example: 74% 31% 0% 4%
    • On success, button briefly changes to Copied!.
    • If clipboard access fails, button briefly shows Failed.

  • Manual for Agent

    This section is for browser automation agents (agentic browsing/testing).

    Stable Elements / Selectors

    • Input form: #converterForm
    • Wavelength input: #wavelength
    • Convert button: #convertBtn
    • Preview panel: #colorDisplay
    • Info panel: #colorInfo
    • Copy buttons (dynamic): .copy-btn

    Recommended Agent Flow

    1. Navigate to local page (index.html).
    2. Fill #wavelength with an integer (example: 532).
    3. Submit form (#converterForm) or click #convertBtn.
    4. Read #colorInfo text to capture values.
    5. Optionally click .copy-btn for HEX/RGB/CMYK and verify copy feedback (Copied!).

    Example Test Cases

    • 450 -> visible, blue-ish output, HEX/RGB/CMYK rows present.
    • 532 -> visible, green output, copy buttons present.
    • 780 -> still visible edge case.
    • 300 -> UV label, no visible color value rows.
    • 900 -> IR label, no visible color value rows.
    • empty input -> initial guidance state.
    • out-of-range (0, 1001) -> validation message.