Overview

Color for Developers Course

Learn color models for UI work: HEX, RGB, HSL, WCAG contrast, CSS formats, and a practical picking workflow.

This course teaches color as a developer-facing design primitive—not as a pixel-picking tutorial. You will learn why one swatch has many notations (HEX, RGB, HSL), how contrast affects accessibility, which CSS formats browsers accept, and how to move colors from mockups into maintainable stylesheets.

Who this course is for

  • Frontend developers translating Figma or brand guides into CSS
  • Full-stack engineers auditing text readability on dashboards
  • Anyone who has wondered why #RGB and rgb() look the same but behave differently in tooling

What you will learn

  1. Color models and why multiple formats exist
  2. Converting between HEX, RGB, and HSL with intentional rounding
  3. WCAG contrast ratios and AA/AAA targets for UI text
  4. CSS color syntax including alpha and modern functions
  5. A workflow for sampling, verifying contrast, and publishing design tokens

Use the related Color Converter to experiment. Matching hex values on one monitor does not guarantee perceptual match on every display or print output.

Start lesson 1
HEX vs RGB vs HSL for CSS and Design TokensWhen to store hex, rgb(), or hsl() in design systems, how alpha and rounding interact, and how WCAG contrast fits the pipeline.