Here’s a cheat sheet covering common color representations:
Hexadecimal (HEX) Values
Hexadecimal values represent colors using a combination of six alphanumeric characters (0-9, A-F), with the first two characters representing the red component, the next two representing green, and the last two representing blue.
- Example:
- Red:
#FF0000 - Green:
#00FF00 - Blue:
#0000FF
- Red:
RGB Values
RGB (Red, Green, Blue) values represent colors using three numerical values ranging from 0 to 255 for each color component.
- Example:
- Red:
rgb(255, 0, 0) - Green:
rgb(0, 255, 0) - Blue:
rgb(0, 0, 255)
- Red:
RGBA Values
RGBA is similar to RGB, but includes an additional alpha channel for transparency. The alpha value ranges from 0 (fully transparent) to 1 (fully opaque).
- Example:
- Red with 50% transparency:
rgba(255, 0, 0, 0.5)
- Red with 50% transparency:
HSL Values
HSL (Hue, Saturation, Lightness) values represent colors using three numerical values. Hue is measured in degrees (0 to 360), saturation and lightness are percentages (0% to 100%).
- Example:
- Red:
hsl(0, 100%, 50%) - Green:
hsl(120, 100%, 50%) - Blue:
hsl(240, 100%, 50%)
- Red:
Named Colors
Certain colors have common names that you can use in your CSS or HTML code.
- Example:
- Red:
red - Green:
green - Blue:
blue
- Red:
CSS Color Names
CSS also provides a set of color names that you can use.
- Example:
- Red:
tomato - Green:
lime - Blue:
royalblue
- Red:
Pantone Colors
Pantone is a standardized color matching system widely used in the printing industry.
- Example:
- Pantone Red:
PMS 186 C - Pantone Green:
PMS 354 C
- Pantone Red:
This cheat sheet provides a basic overview of common color representations. It’s essential to choose the appropriate color representation based on the requirements of your project or design.