Introduction

Understanding color theory helps developers make better design decisions. This guide covers color formats, conversions, and basic color relationships.

Color Formats

HEX

#FF5733
#ff5733

RGB

rgb(255, 87, 51)
rgba(255, 87, 51, 0.5)

HSL

hsl(9, 100%, 60%)
hsla(9, 100%, 60%, 0.5)

Color Relationships

Complementary Colors

Opposite on color wheel:

  • Red ↔ Cyan
  • Blue ↔ Orange
  • Green ↔ Magenta

Analogous Colors

Next to each other:

  • Blue, Blue-Green, Green

Tools

Use our tools:

Conclusion

Color theory helps:

Key concepts:

  • Color formats
  • Color relationships
  • Accessibility
  • Contrast

Use tools to:

  • Convert between formats
  • Generate palettes
  • Check contrast

Next Steps