Generátor farebných kódov &; Picker

Generujte kódy farieb, variácie, harmónie a kontrolujte kontrastné pomery.

Konverzia farieb

HEX

#ca4e4e

Chestnut Rose

HEX
#ca4e4e
HSL
0, 54, 55
RGB
202, 78, 78
XYZ
28, 19, 9
CMYK
0, 61, 61, 21
LUV
50,105,21,
LAB
50, 49, 26
HWB
0, 31, 21

Variácie

Účelom tejto časti je presné vytvorenie odtieňov (pridanie čistej bielej) a odtieňov (pridanie čistej čiernej) vybranej farby v krokoch po 10 %.

Tip pre profesionálov: Pre stavy naklonenia a tiene použite odtiene, pre svetlá a pozadia tóny.

Odtiene

Tmavšie varianty vytvorené pridaním čiernej farby do základnej farby.

Odtiene

Svetlejšie varianty vytvorené pridaním bielej farby do základnej farby.

Bežné prípady použitia

  • Stavy komponentov používateľského rozhrania (hover, aktívne, vypnuté)
  • Vytváranie hĺbky pomocou tieňov a svetiel
  • Budovanie konzistentných farebných systémov

Tip na návrh systému

Tieto variácie tvoria základ ucelenej palety farieb. Exportujte ich, aby ste zachovali konzistenciu v celom projekte.

Kombinácie farieb

Každá harmónia má svoju vlastnú náladu. Pomocou harmónií vymýšľajte farebné kombinácie, ktoré spolu dobre fungujú.

Ako používať

Kliknutím na ľubovoľnú farbu skopírujete jej hexadecimálnu hodnotu. Tieto kombinácie sú matematicky overené a vytvárajú vizuálnu harmóniu.

Prečo je to dôležité

Farebné harmónie vytvárajú rovnováhu a vyvolávajú vo vašich návrhoch špecifické emócie.

Doplnok

Farba a jej protiklad na farebnom kruhu, +180 stupňov odtieňa. Vysoký kontrast.

#ca4e4e
Najlepšie pre: Dizajny, CTA, logá s vysokým účinkom

Split-complementary

Farba a dve farby susediace s jej doplnkom, +/-30 stupňov od hodnoty oproti hlavnej farbe. Odvážne ako priamy doplnok, ale univerzálnejšie.

Najlepšie pre: Živé, ale vyvážené rozloženia

Triadické

Tri farby rovnomerne rozmiestnené pozdĺž farebného kruhu, každá s odstupom 120 stupňov. Najlepšie je nechať jednu farbu dominovať a ostatné použiť ako akcenty.

Najlepšie pre: Hravé, energické vzory

Analogické

Tri farby rovnakej svietivosti a sýtosti s odtieňmi, ktoré sú na farebnom kruhu vedľa seba vzdialené 30 stupňov. Plynulé prechody.

Najlepšie pre: Prírodou inšpirované, upokojujúce rozhrania

Monochromatické

Tri farby rovnakého odtieňa s hodnotami jasu +/-50 %. Jemné a rafinované.

Najlepšie pre: Minimalistický, sofistikovaný dizajn

Tetradic

Dve sady doplnkových farieb, ktoré sú od seba vzdialené 60 stupňov.

Najlepšie pre: Bohaté, rozmanité farebné schémy

Princípy teórie farieb

Bilancia

Použite jednu dominantnú farbu, podporte ju sekundárnou a akcentujte striedmo.

Kontrast

Zabezpečte dostatočný kontrast pre čitateľnosť a prístupnosť.

Harmony

Farby by mali spolupracovať a vytvárať jednotný vizuálny dojem.

Kontrola farebného kontrastu

Otestujte kombinácie farieb, aby ste sa uistili, že spĺňajú normy prístupnosti WCAG pre čitateľnosť textu.

Farba textu
Farba pozadia
Kontrast
Fail
Malý text
✖︎
Veľký text
✖︎
Štandardy WCAG
AA:Minimálny kontrastný pomer 4,5:1 pre normálny text a 3:1 pre veľký text. Vyžaduje sa pre väčšinu webových stránok.
AAA:Vylepšený kontrastný pomer 7:1 pre bežný text a 4,5:1 pre veľký text. Odporúča sa pre optimálnu prístupnosť.

Každý je génius. Ak však posudzujete rybu podľa toho, či dokáže vyliezť na strom, celý život bude veriť, že je hlúpa.

- Albert Einstein

Technické formáty

Praktické formáty

Analýza farieb

Simulátor slepoty

Kreatívne aspekty