CSS Colors & Units

Master Color Systems and Measurement Units

🎨 Interactive Color System Explorer

Experiment with different color formats and see them in action:

59
130
246
217°
91%
60%

Color Values:

HEX: #3b82f6
RGB: rgb(59, 130, 246)
HSL: hsl(217, 91%, 60%)

Color Variations:

Lighter
Darker
More Saturated
Less Saturated

👻 Opacity and Alpha Channel

Learn how transparency affects color appearance:

100%

Using opacity property:

I use the opacity property

opacity: 1;

Using RGBA:

I use RGBA colors

background: rgba(59, 130, 246, 1);

Using HSLA:

I use HSLA colors

background: hsla(217, 91%, 60%, 1);

Key Differences:

opacity: Affects entire element and children
rgba/hsla: Affects only the specific property

📏 CSS Units Comparison

Compare absolute and relative units side by side:

Absolute Units

200px
Pixels (px)
150pt
Points (pt)
2in
Inches (in)
5cm
Centimeters (cm)

Relative Units

10em
Em units (em)
10rem
Root em (rem)
50%
Percentage (%)
20vw
Viewport width (vw)

🎛️ Font Size Controller

Adjust the base font size to see how relative units respond:

16px

📱 Responsive Behavior

50vw width element

🎭 Color Harmony Generator

Generate beautiful color palettes using color theory:

#3b82f6

Live Example:

Color Harmony in Action

This card uses the generated color palette to create a harmonious design.

🌈 Gradient Playground

Create and experiment with CSS gradients:

90°

Gradient Colors:

0%
100%

Generated CSS:

background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);

💪 Practice Exercises

Exercise 1: Color Matching

Match the target color by adjusting the HSL values:

180°
50%
50%
Adjust the controls to match the target color!

Exercise 2: Units Challenge

Create a responsive layout using appropriate units:

Make the blue box:

  • 50% of the container width
  • Height equal to 2 times the font size
  • Font size of 1.5rem
Responsive Box
50
2
1.5

📚 Quick Reference

Color Formats

  • #FF5733 - HEX notation
  • rgb(255, 87, 51) - RGB values
  • hsl(9, 100%, 60%) - HSL values
  • rgba(255, 87, 51, 0.8) - With alpha

Absolute Units

  • px - Pixels (most common)
  • pt - Points (1pt = 1/72 inch)
  • in - Inches
  • cm - Centimeters

Relative Units

  • em - Relative to parent font size
  • rem - Relative to root font size
  • % - Percentage of parent
  • vw/vh - Viewport width/height

Best Practices

  • Use rem for font sizes
  • Use % for flexible layouts
  • Use px for borders and shadows
  • Use vw/vh for responsive design