Color Converter

Let's break down these color models and terms in a way that's simple and relatable. Imagine we're creating artwork, both for screens and print. Here's how these terms play into that.

Hexadecimal (Hex)

Hex is like a “password” for colors on websites.

• It's a 6-digit code starting with #.
• Each pair in the code represents Red, Green, and Blue (RGB).
  • Example: #FF0000 is red,
  • #00FF00 is green, and
  • #0000FF is blue.
• Great for web design because browsers understand it.

Example:
Want a yellow button? Use #FFFF00.
Want to change text to black? Use #000000.

RGB (Red, Green, Blue)

RGB is how screens mix light to create colors.

• It uses numbers from 0 to 255 to control red, green, and blue intensity.
  • rgb(255, 0, 0) = fully bright red.
  • rgb(0, 255, 0) = fully bright green.
  • rgb(255, 255, 255) = white (all light combined).

Think of it like adjusting a flashlight:

• Bright red light = more red.
• Turn up all the lights = white.

CMYK (Cyan, Magenta, Yellow, Key/Black)

CMYK is used for printing—think ink on paper.

• It's a subtractive model, starting with white paper and “subtracting” light using ink.
  • Cyan + Magenta + Yellow make colors, but it's hard to make true black, so black (Key) is added.
• CMYK values are percentages (0-100%).

Example:
For a purple flyer, you might use:

• C: 40%, M: 100%, Y: 0%, K: 0%.

HSV (Hue, Saturation, Value)

HSV is a color model that focuses on how we see colors.

• Hue: The “type” of color (red, green, blue) measured in degrees on a circle (0°-360°).
  • 0° = red, 120° = green, 240° = blue.
• Saturation: How intense or pure the color is (0% = gray, 100% = vivid).
• Value: Brightness, from dark (0%) to full bright (100%).

Example:
A soft pink might be:

• Hue = 0° (red), Saturation = 30%, Value = 90%.

Shades and Tints

• Shade:
  • Example: Navy is a shade of blue.
• Tint:
  • Example: Baby blue is a tint of blue.

Think of it like adjusting the brightness and mood of a painting.

Invert Color

• Flips a color to its opposite on the color wheel.
  • Example: Black (#000000) becomes White (#FFFFFF).
  • Red (#FF0000) becomes Cyan (#00FFFF).

Useful for creating contrast or “negative” effects.

Desaturate

• Reduces the intensity of a color, moving it closer to gray.
• Think of it as turning down the color's “volume.”
  • Example: Bright red becomes dull red, then gray.

Why Use It?
To create muted, pastel, or vintage tones.

RGB vs. CMYK (An Analogy)

• RGB is like painting with light. It starts with black (a blank screen) and adds light to create colors.
• CMYK is like painting with ink. It starts with white (paper) and adds ink to subtract light.

Let's Convert!

1. Hex to RGB:
   Hex #FF5733 → RGB (255, 87, 51).

2. RGB to CMYK:
   RGB (255, 87, 51) → CMYK (0%, 66%, 80%, 0%).

3. Degrees to HSV Hue:
   A reddish-orange hue is about 20° in HSV.