La guía detallada está disponible temporalmente en inglés.
HEX, RGB, and HSL in one breath
All three notations describe the same color. HEX packs the red, green, and blue channels into two-digit base-16 numbers, which makes it compact for stylesheets. RGB spells the same channels out in base 10, which is easier to read in code. HSL re-expresses the mix as hue (position on the color wheel, 0–360°), saturation (how colorful it is), and lightness — far more intuitive when you need a sibling shade: keep the hue, nudge the lightness, and you have a hover state.
Putting the complementary color to work
The complement is generated by rotating the hue exactly 180° while leaving saturation and lightness untouched. Placed next to each other, a color and its complement produce maximum visual tension, which is why sports teams and warning labels pair them; used sparingly as an accent — one element in ten — a complement makes a design pop without shouting. For text on a background, prefer checking actual contrast ratios before committing.
Contexto local: España
Datos locales de España, útiles para cálculos cotidianos:
- IVA: 21 % general (10 % hostelería, 4 % alimentos básicos), siempre incluido en el precio.
- Moneda y pagos: Euro (€); tarjeta sin contacto y Bizum muy extendidos.
- Unidades y números: Sistema métrico; coma decimal y punto de millar: 1.234,56 €.
- Nóminas: Costumbre de 14 pagas (extra en julio y diciembre) en salarios y algunas rentas.
- Propina: Voluntaria, 5–10 % o redondeo; el servicio va incluido en el precio.
Actualizado: octubre 2026 · valores de 2025, fuentes oficiales arriba.
Preguntas frecuentes
Why does the 3-digit shorthand work?
Each digit is doubled: #F46 expands to #FF4466, because browsers interpret every digit as both digits of its pair. The shorthand can only express colors whose pairs repeat, so #4F46E5 has no 3-digit form.
Does converting between notations lose precision?
No. HEX and RGB are the same three 0–255 channels, so the conversion is exact. HSL rounds hue to whole degrees and saturation or lightness to whole percent, which can shift a color by a hair when you convert back — imperceptible in practice.
What is the difference between complementary and contrasting colors?
Complementary means opposite on the color wheel, a fixed 180° relationship. Contrast measures the difference in brightness between two colors as a ratio; two complements can still fail accessibility contrast tests if their lightness is similar.