Convert colors between HEX, RGB, CMYK, and HSV. Explore shades, tints, and color tools.
Color Input
Enter a color in HEX format (e.g., #1e88e5)
Color Values
Click any value to copy to clipboard
Understanding Color Models: Hex, RGB, CMYK, and More
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.