{"id":1331,"date":"2026-01-26T11:40:19","date_gmt":"2026-01-26T10:40:19","guid":{"rendered":"https:\/\/imaginacja.eu\/?p=1331"},"modified":"2026-02-20T08:52:27","modified_gmt":"2026-02-20T07:52:27","slug":"fundamenty-teorii-kolorow-w-designie","status":"publish","type":"post","link":"https:\/\/imaginacja.eu\/?p=1331","title":{"rendered":"Fundamenty teorii kolor\u00f3w w designie"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Kolory to nie tylko estetyka \u2014 to narz\u0119dzie, kt\u00f3re wp\u0142ywa na emocje i odbi\u00f3r projekt\u00f3w. Artyku\u0142 wprowadza w podstawy teorii barw, wyja\u015bnia ko\u0142o kolor\u00f3w, relacje mi\u0119dzy odcieniami oraz kluczowe poj\u0119cia jak nasycenie czy temperatura barw. To idealny punkt wyj\u015bcia dla projektant\u00f3w UI, grafik\u00f3w i fotograf\u00f3w, kt\u00f3rzy chc\u0105 \u015bwiadomie dobiera\u0107 palety kolorystyczne w swoich projektach.<\/p>\n\n\n\n<!--more-->\n<!--noteaser-->\n\n\n\n<p class=\"is-style-default wp-block-paragraph\">Czy zdarzy\u0142o Ci si\u0119 wej\u015b\u0107 na stron\u0119 www i od razu poczu\u0107, \u017ce wygl\u0105da dobrze? Albo odwrotnie &#8211; zamkn\u0105\u0107 kart\u0119 po kilku sekundach, bo kiepsko si\u0119 j\u0105 przegl\u0105da? Do ko\u0144ca nie wiesz czy to kwestia ca\u0142ego interfejsu czy samych kolor\u00f3w, ale co\u015b z ni\u0105 jest nie tak. To w\u0142a\u015bnie praktyka teorii barw w dzia\u0142aniu.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">W tej serii kilku wpis\u00f3w dotycz\u0105cych koloru przejdziemy od podstaw (ko\u0142o barw, odcie\u0144, nasycenie itd.), przez rodzaje palet kolorystycznych, a\u017c po praktyczne wskaz\u00f3wki: jak dobra\u0107 palet\u0119 do interfejsu, marki i u\u017cytkownika, nie robi\u0105c sobie przy tym krzywdy.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Czym jest kolor i teoria barw?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Kolor to \u2013 obok kszta\u0142tu, linii, formy, tekstury i przestrzeni \u2013 jeden ze sk\u0142adnik\u00f3w kompozycji obrazu. Mo\u017cna za jego pomoc\u0105 wp\u0142ywa\u0107 na emocje, b\u0105d\u017a prowadzi\u0107 narracj\u0119. Kolor to nic innego jak \u015bwiat\u0142o o odpowiedniej d\u0142ugo\u015bci fali i tradycyjnie dzieli si\u0119 na siedem barw- czerwony, pomara\u0144czowy, \u017c\u00f3\u0142ty, zielony, niebieski, indygo i fioletowy. Przy ko\u0144cach spektrum, przechodzi ono w niewidzialne dla nas podczerwie\u0144 i ultrafiolet. Po zsumowaniu tych barw, powstaje bia\u0142e \u015bwiat\u0142o. Gdy si\u0119 je rozszczepi, wszystkie kolory sk\u0142adowe mo\u017ce zobaczy\u0107 np. na niebie w postaci t\u0119czy.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Teoria barw to zestaw zasad i obserwacji, kt\u00f3re pomagaj\u0105 u\u017cywa\u0107 koloru \u015bwiadomie \u2013 tak, \u017ceby nie tylko \u201e\u0142adnie wygl\u0105da\u0142\u201d, ale te\u017c wspiera\u0142 komunikat, emocje i u\u017cyteczno\u015b\u0107 projektu.<a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https:\/\/careerfoundry.com\/en\/blog\/ui-design\/introduction-to-color-theory-and-color-palettes\/\"><\/a>\u200b\u200b<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">W praktyce teoria barw pomaga:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>zrozumie\u0107 relacje mi\u0119dzy kolorami (np. dlaczego czerwony + ziele\u0144 mo\u017ce wygl\u0105da\u0107 super\u2026 albo jak \u015bwi\u0105teczna choinka),<\/li>\n\n\n\n<li>przewidywa\u0107 emocjonalny efekt (niebieski \u2013 spok\u00f3j i zaufanie, \u017c\u00f3\u0142ty \u2013 energia, rado\u015b\u0107 itd.),\u200b<a href=\"https:\/\/careerfoundry.com\/en\/blog\/ui-design\/introduction-to-color-theory-and-color-palettes\/\" target=\"_blank\" rel=\"noreferrer noopener\"><\/a>\u200b<\/li>\n\n\n\n<li>budowa\u0107 sp\u00f3jne systemy: brand, UI, ilustracje, marketing, prezentacje.<a href=\"https:\/\/ppl-ai-file-upload.s3.amazonaws.com\/web\/direct-files\/attachments\/128620100\/1d0ac854-633c-4724-a7d0-01c5d0fe1313\/Elementy-projektowania.docx\" target=\"_blank\" rel=\"noreferrer noopener\"><\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Dobra wiadomo\u015b\u0107: nie musisz by\u0107 fizykiem ani malarzem, \u017ceby z niej korzysta\u0107. W kontek\u015bcie projektowania \u2013 zw\u0142aszcza UI\/UX \u2013 wystarczy dobrze zrozumie\u0107 kilka fundamentalnych zasad.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wsp\u00f3\u0142czesna teoria kolor\u00f3w opiera si\u0119 w du\u017cej mierze na kole kolor\u00f3w Isaaca Newtona z 1666 r.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/imaginacja.eu\/wp-content\/uploads\/2026\/01\/kolo_barw_isaac_newton-1024x512.jpg\" alt=\"\" class=\"wp-image-1332\" srcset=\"https:\/\/imaginacja.eu\/wp-content\/uploads\/2026\/01\/kolo_barw_isaac_newton-1024x512.jpg 1024w, https:\/\/imaginacja.eu\/wp-content\/uploads\/2026\/01\/kolo_barw_isaac_newton-300x150.jpg 300w, https:\/\/imaginacja.eu\/wp-content\/uploads\/2026\/01\/kolo_barw_isaac_newton-768x384.jpg 768w, https:\/\/imaginacja.eu\/wp-content\/uploads\/2026\/01\/kolo_barw_isaac_newton.jpg 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Ko\u0142o barw Isaaca Newtona.<\/figcaption><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"2-koo-barw-twoja-mapa-kolorystycznego-wiata\">Ko\u0142o barw &#8211; twoja mapa kolorystycznego \u015bwiata<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Klasyczne ko\u0142o barw (w wersji \u201emalarskiej\u201d RYB \u2013 red, yellow, blue) dzieli kolory na trzy grupy:<a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https:\/\/careerfoundry.com\/en\/blog\/ui-design\/introduction-to-color-theory-and-color-palettes\/\"><\/a>\u200b\u200b<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Kolory podstawowe<\/strong>&nbsp;\u2013 czerwony, \u017c\u00f3\u0142ty, niebieski (nie da si\u0119 ich uzyska\u0107 przez zmieszanie innych).<\/li>\n\n\n\n<li><strong>Kolory drugorz\u0119dne<\/strong>&nbsp;\u2013 ziele\u0144, pomara\u0144cz, fiolet (powstaj\u0105 po zmieszaniu dw\u00f3ch barw podstawowych).<\/li>\n\n\n\n<li><strong>Kolory trzeciorz\u0119dowe<\/strong>&nbsp;\u2013 np. \u017c\u00f3\u0142to\u2011zielony, niebiesko\u2011zielony, czerwono\u2011fioletowy itd. (powstaj\u0105 przez zmieszanie koloru podstawowego z drugorz\u0119dnym).\u200b<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"352\" src=\"https:\/\/imaginacja.eu\/wp-content\/uploads\/2026\/01\/kolo-barw-1-1024x352.png\" alt=\"\" class=\"wp-image-1335\" srcset=\"https:\/\/imaginacja.eu\/wp-content\/uploads\/2026\/01\/kolo-barw-1-1024x352.png 1024w, https:\/\/imaginacja.eu\/wp-content\/uploads\/2026\/01\/kolo-barw-1-300x103.png 300w, https:\/\/imaginacja.eu\/wp-content\/uploads\/2026\/01\/kolo-barw-1-768x264.png 768w, https:\/\/imaginacja.eu\/wp-content\/uploads\/2026\/01\/kolo-barw-1.png 1155w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Na bazie tego ko\u0142a pracuj\u0105 wszystkie najwa\u017cniejsze \u201euk\u0142ady\u201d (schematy) kolorystyczne.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Odcie\u0144, cie\u0144, tint, ton, warto\u015b\u0107, nasycenie<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">W wielu materia\u0142ach te poj\u0119cia s\u0105 mylone, a to one decyduj\u0105 o tym jak paleta jest odbierana &#8211; \u017cywa i wsp\u00f3\u0142czesna, czy mo\u017ce stonowana i elegancka.<a href=\"https:\/\/ppl-ai-file-upload.s3.amazonaws.com\/web\/direct-files\/attachments\/128620100\/1d0ac854-633c-4724-a7d0-01c5d0fe1313\/Elementy-projektowania.docx\" target=\"_blank\" rel=\"noreferrer noopener\"><\/a><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Odcie\u0144 (hue)<\/strong>&nbsp;\u2013 \u201eczysty\u201d kolor na kole: czerwony, niebieski, zielony itd. To rodzina koloru.\u200b<\/li>\n\n\n\n<li><strong>Cie\u0144 (shade)<\/strong>&nbsp;\u2013 odcie\u0144 + czer\u0144 \u2192 kolor robi si\u0119 ciemniejszy, bardziej \u201eci\u0119\u017cki\u201d.<a href=\"https:\/\/careerfoundry.com\/en\/blog\/ui-design\/introduction-to-color-theory-and-color-palettes\/\" target=\"_blank\" rel=\"noreferrer noopener\"><\/a>\u200b\u200b<\/li>\n\n\n\n<li><strong>Tint (cz\u0119sto po polsku: rozja\u015bnienie)<\/strong>&nbsp;\u2013 odcie\u0144 + biel \u2192 kolor ja\u015bniejszy, \u201epastelowy\u201d.<a href=\"https:\/\/careerfoundry.com\/en\/blog\/ui-design\/introduction-to-color-theory-and-color-palettes\/\" target=\"_blank\" rel=\"noreferrer noopener\"><\/a>\u200b<\/li>\n\n\n\n<li><strong>Ton<\/strong>&nbsp;\u2013 odcie\u0144 + szaro\u015b\u0107 (czyli jednocze\u015bnie biel i czer\u0144) \u2192 kolor bardziej \u201eprzykurzony\u201d, stonowany.\u200b<a href=\"https:\/\/careerfoundry.com\/en\/blog\/ui-design\/introduction-to-color-theory-and-color-palettes\/\" target=\"_blank\" rel=\"noreferrer noopener\"><\/a>\u200b<\/li>\n\n\n\n<li><strong>Warto\u015b\u0107 (value)<\/strong>&nbsp;\u2013 jak jasny \/ ciemny jest kolor (niezale\u017cnie od nasycenia). Bia\u0142y ma najwy\u017csz\u0105 warto\u015b\u0107, czarny \u2013 najni\u017csz\u0105.\u200b<\/li>\n\n\n\n<li><strong>Luminancja (jasno\u015b\u0107)<\/strong> &#8211; obiektywna, mierzalna fizycznie jasno\u015b\u0107 \u015bwiat\u0142a emitowanego lub odbitego przez powierzchni\u0119. Na to jak postrzegamy poszczeg\u00f3lne barwy ma wp\u0142yw \u015bwiat\u0142o, kt\u00f3re jest nieod\u0142\u0105cznym sk\u0142adnikiem kolor\u00f3w. Im jest go wi\u0119cej, widziane przez nas kolory b\u0119d\u0105 ja\u015bniejsze, a\u017c stan\u0105 si\u0119 zupe\u0142nie bia\u0142e. Im jest go mniej, b\u0119dziemy je postrzega\u0107 jako ciemniejsze, a\u017c znikn\u0105 w ca\u0142kowitym cieniu i stan\u0105 si\u0119 czarne. W \u015bwiecie cyfrowym cz\u0119sto towarzyszy jej suwak z warto\u015bciami 0-100% dla danego koloru.<\/li>\n\n\n\n<li><strong>Nasycenie (saturation)<\/strong>&nbsp;\u2013 odnosi si\u0119 do intensywno\u015bci barw. Im bardziej nasycony kolor, tym jest on mocniejszy, bardziej jaskrawy, widoczny, neonowy. Mniej nasycone barwy s\u0105 po prostu bledsze, sprane, a\u017c stan\u0105 si\u0119 szare i w zasadzie pozbawione koloru, zgaszone.<a href=\"https:\/\/ppl-ai-file-upload.s3.amazonaws.com\/web\/direct-files\/attachments\/128620100\/716d4bb2-c3bc-45c8-935f-c84afc6c1c22\/Google-UI.docx\" target=\"_blank\" rel=\"noreferrer noopener\"><\/a><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"800\" height=\"600\" src=\"https:\/\/imaginacja.eu\/wp-content\/uploads\/2025\/10\/luminacja.jpg\" alt=\"\" class=\"wp-image-1198\" srcset=\"https:\/\/imaginacja.eu\/wp-content\/uploads\/2025\/10\/luminacja.jpg 800w, https:\/\/imaginacja.eu\/wp-content\/uploads\/2025\/10\/luminacja-300x225.jpg 300w, https:\/\/imaginacja.eu\/wp-content\/uploads\/2025\/10\/luminacja-768x576.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"600\" src=\"https:\/\/imaginacja.eu\/wp-content\/uploads\/2025\/10\/nasycenia.jpg\" alt=\"\" class=\"wp-image-1206\" srcset=\"https:\/\/imaginacja.eu\/wp-content\/uploads\/2025\/10\/nasycenia.jpg 800w, https:\/\/imaginacja.eu\/wp-content\/uploads\/2025\/10\/nasycenia-300x225.jpg 300w, https:\/\/imaginacja.eu\/wp-content\/uploads\/2025\/10\/nasycenia-768x576.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">To w\u0142a\u015bnie manipuluj\u0105c&nbsp;warto\u015bci\u0105&nbsp;i&nbsp;nasyceniem, jeste\u015b w stanie z jednego odcienia zbudowa\u0107 ca\u0142\u0105 palet\u0119: t\u0142o, przyciski, karty, alerty itd., ale r\u00f3wnie\u017c wp\u0142ywa\u0107 na emocje. Obraz z\u0142o\u017cony z bardziej nasyconych, jasnych i wyra\u017anych kolor\u00f3w mo\u017ce opowiada\u0107 nam o jakiej\u015b radosnej, szcz\u0119\u015bliwej i przyjemnej sytuacji, chwili. Przyt\u0142umione barwy wprowadzaj\u0105 w stan zadumy, przygn\u0119bienia.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"444\" src=\"https:\/\/imaginacja.eu\/wp-content\/uploads\/2025\/10\/nasycenie_przyklad.jpg\" alt=\"\" class=\"wp-image-1207\" srcset=\"https:\/\/imaginacja.eu\/wp-content\/uploads\/2025\/10\/nasycenie_przyklad.jpg 800w, https:\/\/imaginacja.eu\/wp-content\/uploads\/2025\/10\/nasycenie_przyklad-300x167.jpg 300w, https:\/\/imaginacja.eu\/wp-content\/uploads\/2025\/10\/nasycenie_przyklad-768x426.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Nale\u017cy jednak uwa\u017ca\u0107, aby nie przesadzi\u0107 z saturacj\u0105. O ile nie jest to uzasadniony element kompozycji, zbyt nasycone barwy wygl\u0105daj\u0105 sztucznie i wcale nie poprawiaj\u0105 wygl\u0105du zdj\u0119cia \/ grafiki.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Temperatura kolor\u00f3w: ciep\u0142e, ch\u0142odne, neutralne<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ciep\u0142e<\/strong>&nbsp;\u2013 czerwienie, pomara\u0144cze, \u017c\u00f3\u0142cie i ich pochodne \u2013 kojarz\u0105 si\u0119 z energi\u0105, s\u0142o\u0144cem, dzia\u0142aniem.<a href=\"https:\/\/careerfoundry.com\/en\/blog\/ui-design\/introduction-to-color-theory-and-color-palettes\/\" target=\"_blank\" rel=\"noreferrer noopener\"><\/a>\u200b\u200b<\/li>\n\n\n\n<li><strong>Ch\u0142odne<\/strong>&nbsp;\u2013 b\u0142\u0119kity, zielenie, fiolety i ich pochodne \u2013 spok\u00f3j, profesjonalizm, natura.\u200b<a href=\"https:\/\/careerfoundry.com\/en\/blog\/ui-design\/introduction-to-color-theory-and-color-palettes\/\" target=\"_blank\" rel=\"noreferrer noopener\"><\/a>\u200b<\/li>\n\n\n\n<li><strong>Neutralne<\/strong>&nbsp;\u2013 biele, czernie, szaro\u015bci, be\u017ce, br\u0105zy \u2013 t\u0142o, balans, baza.\u200b<a href=\"https:\/\/careerfoundry.com\/en\/blog\/ui-design\/introduction-to-color-theory-and-color-palettes\/\" target=\"_blank\" rel=\"noreferrer noopener\"><\/a>\u200b<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Przy projektowaniu UI temperatura koloru bardzo szybko wp\u0142ywa na pierwsze wra\u017cenie- finansowy landing page w pastelowych r\u00f3\u017cach i turkusach mo\u017ce budzi\u0107 zupe\u0142nie inne emocje ni\u017c ten sam uk\u0142ad w granacie i butelkowej zieleni.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"3-systemy-kolorw-rgb-cmyk-hex-i-spka\">Systemy kolor\u00f3w: RGB, HEX, CMYK,  Pantone<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Urz\u0105dzenia cyfrowe takie jak: wsp\u00f3\u0142czesne aparaty, a tak\u017ce monitory itp. do reprezentacji poszczeg\u00f3lnych barw stosuj\u0105 model RGB, co oznacza: Red \u2013 czerwony, Green \u2013 zielony, Blue \u2013 niebieski. Mieszaj\u0105c ze sob\u0105 te trzy barwy w r\u00f3\u017cnych proporcjach, mo\u017cemy odtworzy\u0107 bardzo du\u017cy zakres kolor\u00f3w, kt\u00f3re jest w stanie dostrzec ludzkie oko. Jest to tzw. model addytywny, poniewa\u017c dodajemy do siebie kolory, kt\u00f3re po ca\u0142kowitym zmieszaniu tworz\u0105 barw\u0119 bia\u0142\u0105. Wi\u0119kszo\u015b\u0107 urz\u0105dze\u0144, z kt\u00f3rych korzystamy na co dzie\u0144 dzia\u0142a w oparciu o model sRGB (standarised Red, Green, Blue) i niestety nie pokrywa w 100% tego zakresu. Profesjonalne monitory do obr\u00f3bki graficznej pokrywaj\u0105 obszar Adobe RGB, a w przypadku ta\u0144szych modeli, przynajmniej pe\u0142ne sRGB. Telefony, \u201ezwyk\u0142e\u201d monitory czy ekrany ta\u0144szych b\u0105d\u017a biznesowych laptop\u00f3w mog\u0105 tego nie osi\u0105ga\u0107. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">W przypadku wydruk\u00f3w sprawa wygl\u0105da nieco inaczej, bo tam przewa\u017cnie stosuje si\u0119 model CMYK, kt\u00f3ry reprezentuje takie barwy jak: Cyan \u2013 odcie\u0144 niebieskiego zbli\u017cony do turkusu, Magenta \u2013 podobny do fuksji, co dla facet\u00f3w jest po prostu r\u00f3\u017cowym :), Yellow \u2013 \u017c\u00f3\u0142ty, Key colour \u2013 czarny. Zsumowanie tych barw daje nam g\u0142\u0119bsz\u0105 czer\u0144. Bia\u0142y jest brakiem kolor\u00f3w i jego odcie\u0144 jest r\u00f3\u017cny w zale\u017cno\u015bci od np. papieru, na kt\u00f3rym powstaje wydruk. Jest to tzw. model subtraktywny, poniewa\u017c aby osi\u0105gn\u0105\u0107 biel musimy odj\u0105\u0107 kolory.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"480\" src=\"https:\/\/imaginacja.eu\/wp-content\/uploads\/2025\/10\/gamut.gif\" alt=\"\" class=\"wp-image-1176\"\/><figcaption class=\"wp-element-caption\">Widzialna przestrze\u0144 barw. \u0179r\u00f3d\u0142o obrazka: printninja.com<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">W designie cyfrowym interesuj\u0105 nas g\u0142\u00f3wnie cztery rzeczy:<a href=\"https:\/\/ppl-ai-file-upload.s3.amazonaws.com\/web\/direct-files\/attachments\/128620100\/1d0ac854-633c-4724-a7d0-01c5d0fe1313\/Elementy-projektowania.docx\" target=\"_blank\" rel=\"noreferrer noopener\"><\/a><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>RGB<\/strong>&nbsp;\u2013 Red, Green, Blue; model addytywny (\u015bwiat\u0142o). U\u017cywany we wszystkich ekranach. Im wi\u0119cej \u201edodajesz\u201d, tym bli\u017cej bieli.<\/li>\n\n\n\n<li><strong>HEX<\/strong>&nbsp;\u2013 jest to zapis koloru RGB w postaci kodu szesnastkowego, np.&nbsp;<code>#FF0000<\/code>&nbsp;(czysta czerwie\u0144),&nbsp;<code>#FFFFFF<\/code>&nbsp;(bia\u0142y),&nbsp;<code>#000000<\/code>&nbsp;(czarny).\u200b<\/li>\n\n\n\n<li><strong>CMYK<\/strong>&nbsp;\u2013 Cyan, Magenta, Yellow, Key (Black); model subtraktywny (tusz, pigment). Standard w druku.<a href=\"https:\/\/careerfoundry.com\/en\/blog\/ui-design\/introduction-to-color-theory-and-color-palettes\/\" target=\"_blank\" rel=\"noreferrer noopener\"><\/a>\u200b\u200b<\/li>\n\n\n\n<li>\u200b<strong>Pantone <\/strong>&#8211; ustandaryzowana paleta setek je\u015bli nie tysi\u0119cy kolor\u00f3w. Ka\u017cdy kolor ma sw\u00f3j unikalny numer, po kt\u00f3rym mo\u017cna go zidentyfikowa\u0107 i mie\u0107 pewno\u015b\u0107, \u017ce  np. Pomara\u0144czowy 021 zawsze b\u0119dzie w\u0142a\u015bnie tym kolorem, a nie jakim\u015b bardziej czerwonym lub \u017c\u00f3\u0142tym odcieniem. Ch\u0119tnie wykorzystywane w logotypach i innych elementach, kt\u00f3re powinny zawsze wygl\u0105da\u0107 tak samo. Kolory Pantone s\u0105 stosowane w druku offsetowym. W druku cyfrowym mo\u017cemy je co najwy\u017cej symulowa\u0107 z kolor\u00f3w CMYK, ale rzadko kiedy wychodzi to dobrze.<\/li>\n<\/ul>\n\n\n\n<p class=\"is-style-default wp-block-paragraph\">Szykuj\u0105c projekt w RGB pami\u0119taj, \u017ce w druku kolory mog\u0105 wyj\u015b\u0107&nbsp;ciemniejsze i mniej nasycone, wi\u0119c przy projektach \u201ena papier\u201d dopasuj je w CMYK. Do&nbsp;UI i &#8222;webu&#8221;&nbsp;pracujesz w RGB.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">W tym wpisie to tyle, bo za chwil\u0119 rozr\u00f3s\u0142by si\u0119 tak, \u017ce ma\u0142o komu chcia\u0142oby si\u0119 go czyta\u0107. W kolejnej cz\u0119\u015bci psychologia barw, czyli jaki kolor w jaki spos\u00f3b na nas oddzia\u0142uje i z czym si\u0119 kojarzy.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Kolory to nie tylko estetyka \u2014 to narz\u0119dzie, kt\u00f3re wp\u0142ywa na emocje i odbi\u00f3r projekt\u00f3w. Artyku\u0142 wprowadza w podstawy teorii barw, wyja\u015bnia ko\u0142o kolor\u00f3w, relacje mi\u0119dzy odcieniami oraz kluczowe poj\u0119cia jak nasycenie czy temperatura barw. To idealny punkt wyj\u015bcia dla projektant\u00f3w UI, kt\u00f3rzy chc\u0105 \u015bwiadomie dobiera\u0107 palety kolorystyczne w swoich projektach.<\/p>\n","protected":false},"author":1,"featured_media":1367,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_kadence_starter_templates_imported_post":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[22,23,19],"tags":[50,49,48,37],"class_list":["post-1331","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","category-dtp","category-ui","tag-design","tag-grafika","tag-kolor","tag-teoria"],"jetpack_featured_media_url":"https:\/\/imaginacja.eu\/wp-content\/uploads\/2026\/01\/AdobeStock_232902802.jpg","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":1344,"url":"https:\/\/imaginacja.eu\/?p=1344","url_meta":{"origin":1331,"position":0},"title":"Harmonia barw: jak dobra\u0107 kolory, kt\u00f3re \u201egraj\u0105\u201d","author":"BB","date":"16.02.2026","format":false,"excerpt":"Dowiedz si\u0119, jak zestawia\u0107 kolory, by tworzy\u0142y harmonijn\u0105 i estetyczn\u0105 ca\u0142o\u015b\u0107. Artyku\u0142 wyja\u015bnia zasady teorii barw oraz klasyczne schematy z ko\u0142a barw (monochromatyczny, analogiczny, dope\u0142niaj\u0105cy czy triadyczny) i podpowiada, jak je wykorzysta\u0107 w projektach UI, layoutach i brandingach, by uzyska\u0107 sp\u00f3jne, atrakcyjne zestawienia kolorystyczne.","rel":"","context":"W \u201eDesign&quot;","block_context":{"text":"Design","link":"https:\/\/imaginacja.eu\/?cat=22"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/imaginacja.eu\/wp-content\/uploads\/2026\/01\/image-2.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/imaginacja.eu\/wp-content\/uploads\/2026\/01\/image-2.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/imaginacja.eu\/wp-content\/uploads\/2026\/01\/image-2.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/imaginacja.eu\/wp-content\/uploads\/2026\/01\/image-2.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":1361,"url":"https:\/\/imaginacja.eu\/?p=1361","url_meta":{"origin":1331,"position":1},"title":"Kolory w UI &#8211; od teorii do przycisk\u00f3w i t\u0142a","author":"BB","date":"17.02.2026","format":false,"excerpt":"Poznaj praktyczne zasady pracy z kolorami w projektowaniu interfejs\u00f3w u\u017cytkownika. Artyku\u0142 t\u0142umaczy, jak zbudowa\u0107 sp\u00f3jn\u0105 palet\u0119 barw, dlaczego kontrast i dost\u0119pno\u015b\u0107 s\u0105 kluczowe oraz jak \u0142\u0105czy\u0107 teori\u0119 kolor\u00f3w z realnymi potrzebami u\u017cytkownik\u00f3w. Dowiesz si\u0119, jak dobiera\u0107 kolory do przycisk\u00f3w, t\u0142a i komunikat\u00f3w, aby UI by\u0142o estetyczne i funkcjonalne.","rel":"","context":"W \u201eDesign&quot;","block_context":{"text":"Design","link":"https:\/\/imaginacja.eu\/?cat=22"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/imaginacja.eu\/wp-content\/uploads\/2026\/01\/AdobeStock_680369515.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/imaginacja.eu\/wp-content\/uploads\/2026\/01\/AdobeStock_680369515.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/imaginacja.eu\/wp-content\/uploads\/2026\/01\/AdobeStock_680369515.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/imaginacja.eu\/wp-content\/uploads\/2026\/01\/AdobeStock_680369515.jpg?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/imaginacja.eu\/wp-content\/uploads\/2026\/01\/AdobeStock_680369515.jpg?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/imaginacja.eu\/wp-content\/uploads\/2026\/01\/AdobeStock_680369515.jpg?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":1340,"url":"https:\/\/imaginacja.eu\/?p=1340","url_meta":{"origin":1331,"position":2},"title":"Psychologia barw: z czym kojarzy si\u0119 dany kolor","author":"BB","date":"04.02.2026","format":false,"excerpt":"Kolory wp\u0142ywaj\u0105 na emocje i decyzje \u2014 dlatego ich psychologia jest kluczowa w designie i UI. Artyku\u0142 opisuje skojarzenia najpopularniejszych barw, od energii czerwieni po spok\u00f3j niebieskiego, oraz pokazuje, jak dob\u00f3r kolor\u00f3w mo\u017ce wzmacnia\u0107 komunikaty wizualne. To praktyczny przewodnik dla projektant\u00f3w i tw\u00f3rc\u00f3w estetycznych interfejs\u00f3w.","rel":"","context":"W \u201eDesign&quot;","block_context":{"text":"Design","link":"https:\/\/imaginacja.eu\/?cat=22"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/imaginacja.eu\/wp-content\/uploads\/2026\/01\/AdobeStock_701895229.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/imaginacja.eu\/wp-content\/uploads\/2026\/01\/AdobeStock_701895229.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/imaginacja.eu\/wp-content\/uploads\/2026\/01\/AdobeStock_701895229.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/imaginacja.eu\/wp-content\/uploads\/2026\/01\/AdobeStock_701895229.jpg?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/imaginacja.eu\/wp-content\/uploads\/2026\/01\/AdobeStock_701895229.jpg?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/imaginacja.eu\/wp-content\/uploads\/2026\/01\/AdobeStock_701895229.jpg?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":1141,"url":"https:\/\/imaginacja.eu\/?p=1141","url_meta":{"origin":1331,"position":3},"title":"Balans bieli","author":"BB","date":"10.10.2025","format":false,"excerpt":"Balans bieli to klucz do naturalnych i wiernie odwzorowanych kolor\u00f3w na zdj\u0119ciach. Artyku\u0142 wyja\u015bnia, jak \u015bwiat\u0142o o r\u00f3\u017cnej temperaturze wp\u0142ywa na barwy rejestrowane przez aparat i jak poprawnie ustawi\u0107 balans bieli, by bia\u0142e elementy wygl\u0105da\u0142y jak w rzeczywisto\u015bci. Znajdziesz te\u017c praktyczne wskaz\u00f3wki dotycz\u0105ce preset\u00f3w WB i r\u0119cznych ustawie\u0144.","rel":"","context":"W \u201eFotografia&quot;","block_context":{"text":"Fotografia","link":"https:\/\/imaginacja.eu\/?cat=21"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/imaginacja.eu\/wp-content\/uploads\/2025\/10\/balans_bieli-1000x667-1.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/imaginacja.eu\/wp-content\/uploads\/2025\/10\/balans_bieli-1000x667-1.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/imaginacja.eu\/wp-content\/uploads\/2025\/10\/balans_bieli-1000x667-1.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/imaginacja.eu\/wp-content\/uploads\/2025\/10\/balans_bieli-1000x667-1.jpg?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":1373,"url":"https:\/\/imaginacja.eu\/?p=1373","url_meta":{"origin":1331,"position":4},"title":"Typografia w projektowaniu &#8211; przewodnik dla tw\u00f3rc\u00f3w cyfrowych","author":"BB","date":"24.02.2026","format":false,"excerpt":"Typografia to fundament skutecznej komunikacji w projektowaniu cyfrowym. Ten przewodnik pokazuje, jak budowa\u0107 hierarchi\u0119, dba\u0107 o czytelno\u015b\u0107 i dost\u0119pno\u015b\u0107 oraz \u015bwiadomie dobiera\u0107 kroje, skal\u0119 i kolory tekstu. Dowiesz si\u0119, m.in. czym jest linia bazowa, wysoko\u015b\u0107 x czy kerning.","rel":"","context":"W \u201eTypografia&quot;","block_context":{"text":"Typografia","link":"https:\/\/imaginacja.eu\/?cat=20"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/imaginacja.eu\/wp-content\/uploads\/2026\/02\/AdobeStock_371624012.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/imaginacja.eu\/wp-content\/uploads\/2026\/02\/AdobeStock_371624012.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/imaginacja.eu\/wp-content\/uploads\/2026\/02\/AdobeStock_371624012.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/imaginacja.eu\/wp-content\/uploads\/2026\/02\/AdobeStock_371624012.jpg?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/imaginacja.eu\/wp-content\/uploads\/2026\/02\/AdobeStock_371624012.jpg?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/imaginacja.eu\/wp-content\/uploads\/2026\/02\/AdobeStock_371624012.jpg?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":1493,"url":"https:\/\/imaginacja.eu\/?p=1493","url_meta":{"origin":1331,"position":5},"title":"Gdy kreatywno\u015b\u0107 stoi w miejscu: jak my\u015blenie projektowe pomaga ruszy\u0107 dalej\u200b","author":"BB","date":"17.03.2026","format":false,"excerpt":"Ten tekst jest dla wszelkich os\u00f3b kreatywnych, kt\u00f3re utkn\u0119\u0142y przy projekcie i zaczynaj\u0105 w\u0105tpi\u0107 w swoje umiej\u0119tno\u015bci. Pokazuje, jak wykorzysta\u0107 design thinking jako praktyczne narz\u0119dzie do wyj\u015bcia z tw\u00f3rczego zastoju \u2013 w realiach freelancera lub ma\u0142ego studia. Dowiesz si\u0119, jak wr\u00f3ci\u0107 do sensu projektu, odzyska\u0107 kierunek i zamieni\u0107 frustracj\u0119 w\u2026","rel":"","context":"W \u201eDesign&quot;","block_context":{"text":"Design","link":"https:\/\/imaginacja.eu\/?cat=22"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/imaginacja.eu\/wp-content\/uploads\/2026\/03\/AdobeStock_370756602-scaled.jpeg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/imaginacja.eu\/wp-content\/uploads\/2026\/03\/AdobeStock_370756602-scaled.jpeg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/imaginacja.eu\/wp-content\/uploads\/2026\/03\/AdobeStock_370756602-scaled.jpeg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/imaginacja.eu\/wp-content\/uploads\/2026\/03\/AdobeStock_370756602-scaled.jpeg?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/imaginacja.eu\/wp-content\/uploads\/2026\/03\/AdobeStock_370756602-scaled.jpeg?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/imaginacja.eu\/wp-content\/uploads\/2026\/03\/AdobeStock_370756602-scaled.jpeg?resize=1400%2C800&ssl=1 4x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/imaginacja.eu\/index.php?rest_route=\/wp\/v2\/posts\/1331","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/imaginacja.eu\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/imaginacja.eu\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/imaginacja.eu\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/imaginacja.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1331"}],"version-history":[{"count":7,"href":"https:\/\/imaginacja.eu\/index.php?rest_route=\/wp\/v2\/posts\/1331\/revisions"}],"predecessor-version":[{"id":1476,"href":"https:\/\/imaginacja.eu\/index.php?rest_route=\/wp\/v2\/posts\/1331\/revisions\/1476"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/imaginacja.eu\/index.php?rest_route=\/wp\/v2\/media\/1367"}],"wp:attachment":[{"href":"https:\/\/imaginacja.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1331"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/imaginacja.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1331"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/imaginacja.eu\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1331"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}