---
id: identyfikacja-kolory
title: "Kolory"
section: identyfikacja
language: pl
version: "2026.1"
status: approved
updated_at: "2026-10-06"
url: https://refindi-guidelines.pages.dev/pl/guidelines/identyfikacja/kolory
markdown_url: https://refindi-guidelines.pages.dev/guidelines/content/pl/identyfikacja/kolory.md
---

# Kolory

> Paleta i role kolorów Refindi — brzoskwinia jako znak rozpoznawczy, błękit dla akcji, ciepłe neutralne powierzchnie i ciemne panele jako akcent — z wartościami z kodu witryny, zasadami gradientów i stanem specyfikacji druku.

Paleta Refindi jest prosta: dużo ciepłej, jasnej powierzchni, brzoskwinia jako podpis marki, błękit tam, gdzie użytkownik ma coś zrobić, i ciemny granat jako mocny akcent. Kolory nadają ton — ciepło i gościnność brzoskwini, spokój i technologiczną precyzję błękitu, porządek i profesjonalizm ciemnego neutralnego. Wartości poniżej pochodzą z kodu witryny; stare tabele z brandbooka 2025 są tylko historią.

## Paleta

Paleta ma cztery grupy: ciepłe neutralne powierzchnie (canvas, biel, jasna szarość) z ciemnym tekstem, brzoskwinię (z jasnym odcieniem do teł), błękit i ciemny granat. Obowiązujące wartości pochodzą z kodu witryny:

| Kolor i funkcja | Wartość w kodzie | Gdzie w repo |
|---|---|---|
| Canvas (tło stron i sekcji) | `#F5F4F2` | `src/index.css`: `html, body`, `--section-bg`, `--navbar-bg` |
| Powierzchnia podniesiona | `#FFFFFF` | `--section-bg-elevated`, karty |
| Nagłówki / tekst | `#151515` (nowe sekcje), `#292929` (style bazowe h1–h3) | `src/components/business/*`, `src/index.css` |
| Brzoskwinia — znak i akcent | `#FF9E6D` (logo, akcent h1), `#FF9F6B` = token `refindi-peach` `hsl(21 100% 71%)`, `#FFAE84` (akcent hero /dla-biznesu) | `RefindiLogo.tsx`, `tailwind.config.ts`, `NewB2C.tsx`, `Business.tsx` |
| Jasna brzoskwinia — tło akcentowe | `#FEF5F1` = `refindi-peach-10` `hsl(20 82% 97%)` | `tailwind.config.ts` |
| Błękit — CTA | `#53BDF6` | `NewB2C.tsx`, `Business.tsx`, `SiteHeader.tsx`, `CtaShowcase.tsx` |
| Przycisk drugorzędny | tło `#E9E8E6`, tekst `#3A3A3A` | `Business.tsx`, `HeroSegmentsCarousel.tsx` |
| Ciemny panel / granat | `#00111F` = `refindi-ink` `hsl(207 100% 6%)` | `PricingPlansSection.tsx`, `StartStepsShowcase.tsx`, litery logo |
| Obramowania pól | `#DEDEDE` | pole wyszukiwania i karty w `NewB2C.tsx` |

## Role kolorów

Każda grupa ma w systemie swoją funkcję:

- **Brzoskwinia** buduje rozpoznawalność: sygnet, druga linia nagłówka hero, nadtytuły sekcji, ikony i numeracja kroków, jasne tła kart (`refindi-peach-10`).
- **Błękit** oznacza działanie: zgłoś, zarejestruj, szukaj. Dzięki temu użytkownik od razu widzi, co kliknąć.
- **Ciepłe neutralne** powierzchnie (`#F5F4F2`, biel, `#E9E8E6`) dają spokojne tło i oddzielają sekcje bez ramek.
- **Ciemne panele** (`#00111F`) przełamują jasny rytm strony — pojedyncza karta lub sekcja z białym tekstem.

Powiązane zasady w innych tematach:

- **Kolor w tekście** (warianty podstawowy, dodatkowy i specjalny, PDF s. 142–144) — [Kompozycja](https://refindi-guidelines.pages.dev/guidelines/content/pl/zastosowania/kompozycja.md#kolor-w-tekscie). Nazwy „Refined Peach” i „Primary Blue” z PDF są historyczne.
- **Paleta eko** (eco green #31A836, soft eco green #D1EBD2, pastel peach #FFE3D6) to tematyczne rozszerzenie tylko do treści o środowisku, recyklingu, pakowaniu i wysyłkach; nie zastępuje kolorów głównych — [Odpowiedzialność i eko](https://refindi-guidelines.pages.dev/guidelines/content/pl/marka/odpowiedzialnosc-i-eko.md#paleta-eko).
- **Color grading zdjęć** — ciepły tint +5–10% w stronę miedziano-łososiowych tonów, powiązany z brzoskwiniowym akcentem — [Fotografia](https://refindi-guidelines.pages.dev/guidelines/content/pl/identyfikacja/fotografia.md#color-grading).
- **Kolory stanów ikon** (wyłączone, neutralne, w realizacji, zatwierdzone) — [Grafika i ikony](https://refindi-guidelines.pages.dev/guidelines/content/pl/identyfikacja/grafika-i-ikony.md#ikony).

Obowiązujące reguły:

- **[POWINNO]** Brzoskwinia jest kolorem rozpoznawalności: sygnet, wyróżniony fragment nagłówka, nadtytuły, ikony i numeracja. Używaj jej jako akcentu, nie jako koloru dużych bloków tekstu. _Zakres: wszystkie media._ `color-role-01` (źródło: witryna (repo); PDF s. 59)
- **[POWINNO]** Główne przyciski akcji (CTA) wypełniaj błękitem #53BDF6 z białą etykietą; w jednym widoku wyróżniaj tak jedną główną akcję. _Zakres: digital._ `color-role-02` (źródło: witryna (repo); PDF s. 61)
- **[POWINNO]** Przyciski drugorzędne mają tło #E9E8E6 i tekst #3A3A3A. _Zakres: digital._ `color-role-03` (źródło: witryna (repo))
- **[POWINNO]** Na sekcjach treści używaj tylko dwóch powierzchni: ciepłego neutralnego tła #F5F4F2 (canvas) i bieli #FFFFFF (powierzchnia podniesiona: karty, sekcje kontrastowe). _Zakres: digital._ `color-surface-01` (źródło: witryna (repo))
- **[POWINNO]** Ciemny granat #00111F stosuj punktowo — jako panel lub karta wyróżniająca (np. plan premium, sekcja z krokami) z białym tekstem — a nie jako tło całych stron. _Zakres: digital, materiały marketingowe._ `color-surface-02` (źródło: witryna (repo))
- **[POWINNO]** Nagłówki i tekst główny składaj w ciemnym neutralnym (#151515 na nowych stronach); tekst pomocniczy w stonowanym kolorze (token muted-foreground). _Zakres: digital._ `color-text-01` (źródło: witryna (repo))

**Poprawnie: Hero na ciepłym tle.** Tło #F5F4F2, nagłówek w ciemnym neutralnym z drugą linią w brzoskwini, białe pole wyszukiwania z cienką szarą ramką i błękitnym przyciskiem akcji (#53BDF6). Brzoskwinia i błękit zajmują małą część powierzchni.

**Poprawnie: Para przycisków.** Obok siebie dwa zaokrąglone przyciski: główny błękitny (#53BDF6) z białą etykietą i drugorzędny jasnoszary (#E9E8E6) z ciemnoszarą etykietą (#3A3A3A).

**Poprawnie: Ciemny panel jako akcent.** Wśród jasnych kart jedna karta (plan premium) w granacie #00111F z białym tekstem i białym przyciskiem z granatową etykietą.

## Proporcje

Dominuje jasna powierzchnia, kolory marki są akcentem. Brandbook 2025 opisywał to jako 60% koloru dominującego (tło, główne elementy), 30% drugorzędnego (brzoskwinia: akcenty, nagłówki, podkreślenia, przyciski) i 10% akcentowego (błękit: najważniejsze przyciski, detale). Obecna witryna używa brzoskwini oszczędniej — proporcja czeka na aktualizację.

## Gradienty

Przejście tonalne to wariant tła do mocnego wyróżnienia sekcji lub komunikatu kampanijnego. Logika z brandbooka pozostaje: poziomy przebieg od brzoskwini przez jej jasny odcień i jasny błękit do błękitu, bez udziału ciemnego granatu. Na takim tle logo jest w całości białe (zob. *Logo*).

W kodzie witryny nie ma gradientu brzoskwinia–błękit. Występują:

- `--gradient-brand: linear-gradient(90deg, hsl(19 75% 52%) 0%, hsl(27 74% 63%) 100%)` (≈ #E06329 → #E69A5B) — klasy `.text-gradient` i `.bg-gradient-brand`, np. wyróżnione słowo w nagłówku kategorii na stronie głównej;
- `--gradient-hero: linear-gradient(180deg, hsl(30 18% 95%) 0%, hsl(0 0% 100%) 100%)` — łagodne przejście tła;
- subtelne pionowe przejścia tła, np. `from-refindi-peach-10 to-white` w starszych sekcjach.

Gradienty logo opisuje temat *Logo* — tam źródłem wartości jest plik wektorowy. Mesh gradienty łączące brzoskwinię z jasnym błękitem (tła, banery) opisuje [Grafika i ikony](https://refindi-guidelines.pages.dev/guidelines/content/pl/identyfikacja/grafika-i-ikony.md#tla).

Obowiązujące reguły:

- **[NIE WOLNO]** Gradient marki łącz wyłącznie z barw palety (od brzoskwini do błękitu, 2–4 przystanki). Nie mieszaj ciemnego granatu z brzoskwinią w jednym gradiencie. _Zakres: wszystkie media._ `color-gradient-01` (źródło: PDF s. 63)
- **[NIE POWINNO]** Gradient marki rezerwuj dla sekcji hero, plakatów i komunikacji kampanijnej; nie stosuj go w małych komponentach UI. _Zakres: wszystkie media._ `color-gradient-02` (źródło: PDF s. 63)

**Błędnie: Gradient w drobnym elemencie UI.** Gradient brzoskwinia–błękit wypełniający małe przyciski, tagi lub ikony — gradient traci sens w małej skali i konkuruje z kolorem akcji.

## Dostępność

Najjaśniejsze kolory marki są jasne: biały tekst na błękicie CTA ma kontrast ok. 2,1:1, a brzoskwiniowy akcent na canvasie ok. 1,8:1. Nie wystarcza to do progów WCAG — dlatego brzoskwinia pracuje jako akcent w dużym, pogrubionym tekście i w grafice, a nie w drobnym tekście. Pełna lista zestawień czeka na decyzję w otwartych kwestiach.

## Tokeny w kodzie

`tailwind.config.ts` definiuje kolory marki (`refindi-blue`, `refindi-blue-vivid`, `refindi-peach`, `refindi-ink`, `refindi-peach-10`, `refindi-green`) oraz semantyczne (`background`, `foreground`, `primary`, `secondary`, `muted`, `accent`, `border`…) i powierzchnie sekcji (`section`, `section-elevated`). Część nowych komponentów wpisuje jednak HEX bezpośrednio (np. `bg-[#53BDF6]`, `text-[#151515]`), a niektóre tokeny semantyczne mają inne wartości niż kolory faktycznie widoczne na stronie. Do czasu porządków źródłem prawdy dla wyglądu jest tabela w sekcji *Paleta*.

Obowiązujące reguły:

- **[POWINNO]** W kodzie używaj tokenów (np. bg-section, bg-section-elevated, refindi-peach, refindi-ink) zamiast wpisywać surowe wartości HEX. _Zakres: kod witryny i aplikacji._ `color-tokens-01` (źródło: witryna (repo))

## Druk

Brandbook 2025 podawał Pantone i CMYK dla starej palety: PANTONE Black 6 C (granat), PANTONE 163 C i 162 C (brzoskwinie), PANTONE 277 C i 284 C (błękity). Wartości są niespójne między stronami i nie obejmują obecnego błękitu CTA. Do druku potrzebna jest nowa specyfikacja — do tego czasu każdy druk kolorowy wymaga akceptacji proofa.

## Historia

Brandbook 2025 (s. 56–65) opisywał paletę: bazę z bieli écru i czerni, „Refindi Peach” (nazywaną też miedzią) jako kolor ciepła i gościnności, błękit jako akcent spokoju i technologii, „Neutral Ink” jako kolor porządku. Zawierał tabelę kolorów głównych z HEX/Pantone/CMYK, schemat przejścia tonalnego z przystankami 0/30/70/100% oraz skale 1–10 dla Peach, Neutral ink, Blue_primary i Green z ocenami kontrastu. Te wartości zastąpiła paleta z kodu witryny; znaczenie kolorów i logika gradientu zostały zachowane.

Obowiązujące reguły:

- **[NIE WOLNO]** Nie traktuj tabel HEX, skal 1–10 ani ocen kontrastu z brandbooka 2025 (s. 61–65) jako obowiązujących wartości. _Zakres: wszystkie media._ `color-history-01` (źródło: PDF s. 61–65; witryna (repo))

## Pliki do pobrania

- **Tokeny UI — JSON** (JSON · obecny system digital; application/json; 9 KB) — pobierz: https://refindi-guidelines.pages.dev/guidelines/assets/tokeny-ui-json/tokens.json · zasady użycia: https://refindi-guidelines.pages.dev/guidelines/assets/tokeny-ui-json/usage.pl.md

## Powiązane tematy

- Logo: https://refindi-guidelines.pages.dev/guidelines/content/pl/identyfikacja/logo.md
- Typografia: https://refindi-guidelines.pages.dev/guidelines/content/pl/identyfikacja/typografia.md
- Interfejsy: https://refindi-guidelines.pages.dev/guidelines/content/pl/zastosowania/interfejsy.md
- Kompozycja: https://refindi-guidelines.pages.dev/guidelines/content/pl/zastosowania/kompozycja.md
- Odpowiedzialność i eko: https://refindi-guidelines.pages.dev/guidelines/content/pl/marka/odpowiedzialnosc-i-eko.md
- Fotografia: https://refindi-guidelines.pages.dev/guidelines/content/pl/identyfikacja/fotografia.md
- Grafika i ikony: https://refindi-guidelines.pages.dev/guidelines/content/pl/identyfikacja/grafika-i-ikony.md

## Źródła i historia zmian

- Brandbook PDF (06.06.2025), s. 56-59 — Znaczenie i symbolika kolorów
- Brandbook PDF (06.06.2025), s. 60-61 — Kolorystyka główna, proporcja 60/30/10 (wartości historyczne)
- Brandbook PDF (06.06.2025), s. 62-63 — Przejście tonalne
- Brandbook PDF (06.06.2025), s. 64-65 — Kolory rozszerzające — skale (historyczne)
- refindi-concierge-web@e7d7db44 — src/index.css, tailwind.config.ts, src/pages/NewB2C.tsx, src/pages/Business.tsx, src/components/nav/SiteHeader.tsx, src/components/business/*
- Wersja treści 2026.1, aktualizacja 2026-10-06.
- 3 reguł(y) w statusie roboczym lub do przeglądu nie są częścią tego eksportu.