Resumen

Color for Developers Course en español

Guía en español para color: Learn color models for UI work: HEX, RGB, HSL, WCAG contrast, CSS formats, and a practical picking workflow.

Este contenido todavía no está disponible en español. Se muestra la versión en English mientras completamos la localización.

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.

Empezar la lección 1
HEX vs RGB vs HSL for CSS and Design Tokens en españolGuía en español para hex vs rgb vs hsl for css and design tokens: When to store hex, rgb(), or hsl() in design systems, how alpha and rounding interact, and how WCAG contrast fits the pipeline.