The detailed guide below is currently available in English.
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: Portugal
Dados locais de Portugal, úteis para cálculos do dia a dia:
- IVA: 23 % no continente (13 % intermédia, 6 % reduzida), já incluído nos preços.
- Moeda e pagamentos: Euro (€); MB WAY e multibanco são os pagamentos mais comuns.
- Unidades e números: Sistema métrico; vírgula decimal e ponto ou espaço nos milhares: 1.234,56 €.
- Subsídios: Subsídio de férias e de Natal: 14 pagamentos por ano são a norma nos salários.
- Gorjeta: Voluntária; 5–10 % em restaurantes, serviço já incluído no preço.
Atualizado: outubro 2026 · valores de 2025, fontes oficiais acima.
Perguntas frequentes
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.