Jak porozumet teorii barev

RGB, HEX, HSL jednoduse vysvetleno. Naucte se harmonii barev, doplnkove barvy a prakticke designove aplikace.

Barevne modely vysvetleny

  • RGB (Red, Green, Blue): Additive model for screens. Values 0-255 per channel. rgb(37, 99, 235) is blue.
  • HEX: Hexadecimal RGB. #2563eb = rgb(37, 99, 235). Six hex digits (0-9, A-F).
  • HSL (Hue, Saturation, Lightness): Intuitive model. Hue is 0-360 degrees. Saturation and Lightness are 0-100%.

Převod mezi formáty

HEX to RGB:

#2563eb
R = 0x25 = 37
G = 0x63 = 99
B = 0xeb = 235
Result: rgb(37, 99, 235)

Use our Color Picker to convert instantly.

Barevna harmonie

  • Complementary: Opposite colors (180 apart). High contrast: blue + orange.
  • Analogous: Adjacent colors (30 apart). Harmonious: blue + teal + green.
  • Triadic: Three colors evenly spaced (120 apart). Vibrant: red + yellow + blue.
  • Monochromatic: Same hue, different lightness. Clean and professional.

Prakticke designove aplikace

  • Backgrounds: HSL lightness 95-98% for light mode, 8-15% for dark mode
  • Text contrast: Minimum 4.5:1 ratio for body text (WCAG AA)
  • Brand colors: 1 primary + 1 accent. SimpyTool uses #2563eb + #10b981
  • Gradients: Analogous colors create smooth gradients

Use our Color Palette and Gradient Generator tools.

Psychologie barev a pristupnost

  • Red: Urgency, passion, errors. Use sparingly.
  • Blue: Trust, stability. Most popular brand color.
  • Green: Growth, success. Good for success states.
  • Yellow: Warning. Hard to read on white.
  • Accessibility: Always test contrast. 8% of men have color blindness.

Prakticke tipy pro praci s barvami

Pri vytvareni barevneho systemu pro jakýkoli projekt zacnete primární barvou znacky a stavte ven. Bezny pristup je pravidlo 60-30-10: pouzijte jednu dominantni barvu pro 60 % designu, sekundarni barvu pro 30 % a akcentní barvu pro zbyvajicich 10 %. To vytvari vizualni rovnovah a braní zahlceni barvami. Vzdy testujte sve barevné volby ve svetlém i tmavém rezimu, protoze barvy, ktere vypadaji zive na bilem pozadi, se mohou stat kalne nebo neviditelne na tmavém pozadi.

Prístupnost by mela byt uváhou od zacatku, ne dodatecne. Pouzijte kontroler kontrastu k overeni, ze text zustava citelny proti barvam pozadi. Pamatujte, ze priblizne 8 % muzu ma nejakou formu nedostatku barevneho videni, nejcasteji cerveno-zelenou barvoslepost. Vyhněte se spoléhani pouze na barvu pro sdeleni informaci — pouzijte textove popisky, ikony nebo vzory jako redundantni signaly. Nastroje, ktere simulují barvoslepost, vam mohou pomoci zhodnotit, zda je vas design pristupny vsem uzivatelum.

Často kladené dotazy

Jaký je rozdíl mezi RGB a HEX?
Popisují stejný barevný model. HEX je RGB zapsané v šestnáctkové soustavě. #ff0000 = rgb(255, 0, 0) = čistá červená.
Jaká hodnota hue v HSL odpovídá modré?
Modré odpovídá hue 210–240, čistá modrá má 240. Celý kruh: 0=červená, 60=žlutá, 120=zelená, 180=cyan, 240=modrá, 300=magenta.
Kolik barev dokáže RGB zobrazit?
RGB s 8 bity na kanál představuje 16 777 216 barev, což pokrývá celé viditelné spektrum pro většinu displejů.
Co je kontrast podle WCAG?
WCAG vyžaduje minimální kontrastní poměr 4,5:1 pro normální text a 3:1 pro velký text z důvodu přístupnosti.
Jak vytvořit firemní barevnou paletu?
Začněte jednou primární barvou. Přidejte světlejší variantu na pozadí, tmavší variantu na přejetí myší, jednu akcentní barvu a neutrální šedé.
Jak si vybrat barvy, ktere k sobe pasuji?
Pouzijte pravidla barevné harmonie: komplementarni (protilehle na barevném kruhu) pro vysoky kontrast, analogicke (sousedni) pro harmonii nebo triadické (rovnomerne rozmistené) pro zivost. Zacnete se zakladni barvou a vygenerujte paletu pomoci techto vztahu, misto abyste vyberali barvy nahodne.
Mam pouzit HEX, RGB nebo HSL?
Kazdy format ma sve pouziti. HEX je kompaktni a standardni pro webove CSS. RGB je uzitecny pro programovani a specifikaci presnych hodnot. HSL je nejintuitivnejsi pro lidi pri upravach barev, protoze muze nezavisle ridit odstin, sycenost a svetlost. Pouzijte ten, ktery je nejpraktictsjsi pro vas pracovní postup.
Kolik barev ma moje znacka pouzivat?
Vetsina profesionalnich znacek pouziva 3 az 5 zakladnich barev: jednu primární, jednu nebo dve sekundarni, akcent a neutralni sede pro pozadi a text. Prilis mnoho barev vytvari vizualni sum a redi rozpoznatelnost znacky. Mene je teměř vzdy vice pri navrhu barev znacky.