Digital color systems

Digital color systems#

Interactive Content Ahead!

This page features interactive content that do not work optimally within the course’s static website. To fully engage with these materials, consider accessing them through environments like CSC/JupyterLab. If you’re viewing this page on the course’s website and wish to load the interactive elements, please use Binder. Look for the Binder icon—a small rocket logo—at the top of the page to get started.

  • Digital, interactive maps commonly use a hexadecimal (HEX) system for defining colors but can have other options as well.

  • Paper maps use any of several other color definition systems.

  • Most GIS software will give you multiple options for defining any custom colors you use. Some of the options that your GIS (or graphic design software) may give you are red, green, blue (RGB); hexadecimal; hue, saturation, value (HSV); cyan, magenta, yellow, black (CMYK); and International Commission on Illumination Lightness a* b* (CIELAB).

  • There is an interactive color picker tool at the end of this page (you can also try Google color picker

RGB COLOR MODEL#

  • RGB stands for Red, Green, Blue

  • Used in electronic devices like monitors and TVs

  • Creates colors by mixing light

  • Colors defined by RGB values from 0 to 255

  • Example: Full red is 255, 0, 0

HEXADECIMAL IN RGB#

  • Hexadecimal codes represent RGB values

  • Consists of numbers 0-9 and letters A-F

  • Starts with a “#” in HTML/CSS

  • Example: #FF0000 is full red

CMYK COLOR MODEL#

  • CMYK stands for Cyan, Magenta, Yellow, Black

  • Used in printing

  • Works by subtracting light from white paper

  • Colors are percentages of each ink used

HSL AND HSV COLOR MODELS#

  • HSL: Hue, Saturation, Lightness

  • HSV: Hue, Saturation, Value

  • Used to select colors with more perceptual uniformity

  • Example in HSL: Hue at 100 with full saturation and lightness gives pure green

CIELAB COLOR MODEL#

  • CIELAB is designed to encompass all colors visible to the human eye

  • Uses L* for lightness and a* b* for the color spectrums

  • More uniform than RGB and CMYK

Color picker tool#

You can use this interactive tool to pick colors from a palette and get the corresponding hexadecimal, RGB, CMYK, HSL, and HSV color format codes.

[1]:

import matplotlib.pyplot as plt
import matplotlib.colors as mcolors
from ipywidgets import interact, ColorPicker

def display_color_info(hex_color):
    # Convert hex to RGB
    rgb_color = mcolors.hex2color(hex_color)
    # Normalize RGB values to 0-255 scale
    rgb_color_255 = tuple([int(255*x) for x in rgb_color])
    # Convert RGB to CMYK
    cmyk_color = [0, 0, 0, 255]
    if sum(rgb_color_255) < 765:
        cmyk_color = [round(255 - x) for x in rgb_color_255]
        k = min(cmyk_color)
        cmyk_color = [round((255 - x - k) / (255 - k) * 100) for x in rgb_color_255] + [round(k / 255 * 100)]
    # Convert RGB to HSV and HSL
    hsv_color = mcolors.rgb_to_hsv(rgb_color)
    hsl_color = mcolors.rgb_to_hsv([(x + min(rgb_color_255)) / 2 for x in rgb_color])

    # Display the color values
    print(f"HEX: {hex_color}")
    print(f"RGB: {rgb_color_255}")
    print(f"CMYK: {cmyk_color}")
    print(f"HSV: {tuple(round(x, 2) for x in hsv_color)}")
    print(f"HSL: {tuple(round(x, 2) for x in hsl_color)}")

    # Plot the color
    plt.figure(figsize=(2,2))
    plt.axis('off')
    plt.imshow([[rgb_color]])
    plt.show()

# Create color picker widget
color_picker = ColorPicker(
    concise=False,
    description='Pick a color',
    value='#ff0000',
    style={'description_width': 'initial'}
)

# Bind the color picker to display_color_info function
interact(display_color_info, hex_color=color_picker)

[1]:

<function __main__.display_color_info(hex_color)>

[ ]:
Contents