Tworzenie niestandardowej palety kolorów zgodnej z Bootstrap i WCAG

Tworzenie własnej palety kolorystycznej to jedna z najbardziej satysfakcjonujących części projektowania interfejsów. Pozwala nadać projektowi unikalny charakter, zachowując jednocześnie pełną kompatybilność z systemami takimi jak Bootstrap oraz standardami dostępności WCAG. W tym artykule omówimy cały proces — od definicji kolorów bazowych, przez generowanie odcieni, aż po tworzenie dostępnych komponentów.

Dlaczego warto tworzyć własną paletę kolorów?

Standardowa paleta Bootstrapa jest przemyślana, ale ograniczona. Jeśli chcesz nadać swojej aplikacji indywidualny styl lub przygotować kompletny system designu, własne kolory stają się koniecznością. Właśnie dlatego powstała poniższa niestandardowa paleta.

Oto zestaw nowych kolorów bazowych, które uzupełniają, ale nie powielają standardowej palety Bootstrapa:

• Lime — #8bc34a
• Mint — #3ddc97
• Azure — #3f8efc
• Navy — #001f54
• Violet — #9b59b6
• Magenta — #ff2e9d
• Brick — #b22222
• Amber — #ffb300
• Olive — #708238
• Turquoise — #30d5c8
• Slate — #6c7a89
• Brown — #8b4513

A oto CSS:

--bs-lime:      #8bc34a;
--bs-mint:      #3ddc97;
--bs-azure:     #3f8efc;
--bs-navy:      #001f54;
--bs-violet:    #9b59b6;
--bs-magenta:   #ff2e9d;
--bs-brick:     #b22222;
--bs-amber:     #ffb300;
--bs-olive:     #708238;
--bs-turquoise: #30d5c8;
--bs-slate:     #6c7a89;
--bs-brown:     #8b4513;

Generowanie odcieni: tints i shades

Aby w pełni zintegrować kolory z systemem projektowym, każdy z nich został rozszerzony o odcienie 100–900, zgodnie z metodologią Bootstrapa. Zakres obejmuje delikatne rozjaśnienia (tints) oraz przyciemnienia (shades). Dzięki temu każdy kolor może pełnić różne role: tła, borderów, stanów aktywnych, hoverów i akcentów.

Poniżej znajduje się przykład (dla koloru lime), a pełny zestaw obejmuje wszystkie nowe kolory:

--bs-lime-100: #e8f3db;
--bs-lime-200: #d1e7b7;
--bs-lime-300: #b9db92;
--bs-lime-400: #a2cf6e;
--bs-lime-500: #8bc34a;
--bs-lime-600: #6f9c3b;
--bs-lime-700: #53752c;
--bs-lime-800: #384e1e;
--bs-lime-900: #1c270f;

Analogiczny zestaw odcieni został utworzony dla wszystkich pozostałych kolorów: mint, azure, navy, violet, magenta, brick, amber, olive, turquoise, slate oraz brown.

Tabela odcieni i CSS

--bs-lime-100: #e8f3db; --bs-mint-100: #d8f8ea; --bs-azure-100: #d9e8fe; --bs-navy-100: #ccd2dd;
--bs-lime-200: #d1e7b7; --bs-mint-200: #b1f1d5; --bs-azure-200: #b2d2fe; --bs-navy-200: #99a5bb;
--bs-lime-300: #b9db92; --bs-mint-300: #8beac1; --bs-azure-300: #8cbbfd; --bs-navy-300: #667998;
--bs-lime-400: #a2cf6e; --bs-mint-400: #64e3ac; --bs-azure-400: #65a5fd; --bs-navy-400: #334c76;
--bs-lime-500: #8bc34a; --bs-mint-500: #3ddc97; --bs-azure-500: #3f8efc; --bs-navy-500: #001f54;
--bs-lime-600: #6f9c3b; --bs-mint-600: #31b079; --bs-azure-600: #3272ca; --bs-navy-600: #001943;
--bs-lime-700: #53752c; --bs-mint-700: #25845b; --bs-azure-700: #265597; --bs-navy-700: #001332;
--bs-lime-800: #384e1e; --bs-mint-800: #18583c; --bs-azure-800: #193965; --bs-navy-800: #000c22;
--bs-lime-900: #1c270f; --bs-mint-900: #0c2c1e; --bs-azure-900: #0d1c32; --bs-navy-900: #000611;

--bs-violet-100: #ebdef0; --bs-magenta-100: #ffd5eb; --bs-brick-100: #f0d3d3; --bs-amber-100: #fff0cc;
--bs-violet-200: #d7bde2; --bs-magenta-200: #ffabd8; --bs-brick-200: #e0a7a7; --bs-amber-200: #ffe199;
--bs-violet-300: #c39bd3; --bs-magenta-300: #ff82c4; --bs-brick-300: #d17a7a; --bs-amber-300: #ffd166;
--bs-violet-400: #af7ac5; --bs-magenta-400: #ff58b1; --bs-brick-400: #c14e4e; --bs-amber-400: #ffc233;
--bs-violet-500: #9b59b6; --bs-magenta-500: #ff2e9d; --bs-brick-500: #b22222; --bs-amber-500: #ffb300;
--bs-violet-600: #7c4792; --bs-magenta-600: #cc257e; --bs-brick-600: #8e1b1b; --bs-amber-600: #cc8f00;
--bs-violet-700: #5d356d; --bs-magenta-700: #991c5e; --bs-brick-700: #6b1414; --bs-amber-700: #996b00;
--bs-violet-800: #3e2449; --bs-magenta-800: #66123f; --bs-brick-800: #470e0e; --bs-amber-800: #664800;
--bs-violet-900: #1f1224; --bs-magenta-900: #33091f; --bs-brick-900: #240707; --bs-amber-900: #332400;

--bs-olive-100: #e2e6d7; --bs-turquoise-100: #d6f7f4; --bs-slate-100: #e2e4e7; --bs-brown-100: #e8dad0;
--bs-olive-200: #c6cdaf; --bs-turquoise-200: #aceee9; --bs-slate-200: #c4cad0; --bs-brown-200: #d1b5a1;
--bs-olive-300: #a9b488; --bs-turquoise-300: #83e6de; --bs-slate-300: #a7afb8; --bs-brown-300: #b98f71;
--bs-olive-400: #8d9b60; --bs-turquoise-400: #59ddd3; --bs-slate-400: #8995a1; --bs-brown-400: #a26a42;
--bs-olive-500: #708238; --bs-turquoise-500: #30d5c8; --bs-slate-500: #6c7a89; --bs-brown-500: #8b4513;
--bs-olive-600: #5a682d; --bs-turquoise-600: #26aaa0; --bs-slate-600: #56626e; --bs-brown-600: #6f370f;
--bs-olive-700: #434e22; --bs-turquoise-700: #1d8078; --bs-slate-700: #414952; --bs-brown-700: #53290b;
--bs-olive-800: #2d3416; --bs-turquoise-800: #135550; --bs-slate-800: #2b3137; --bs-brown-800: #381c08;
--bs-olive-900: #161a0b; --bs-turquoise-900: #0a2b28; --bs-slate-900: #16181b; --bs-brown-900: #1c0e04;

WCAG: klucz do dostępnych interfejsów

Kolory to nie tylko estetyka — muszą być czytelne. Dlatego każdy kolor i jego odcienie można przetestować pod kątem kontrastu. W projektach interfejsów zasada jest jasna: tekst musi mieć co najmniej poziom kontrastu 4.5:1, aby spełniać normy WCAG AA.

W praktyce oznacza to, że dla każdego koloru dobieramy odpowiedni kolor tekstu (najczęściej #000 lub #fff), testując kontrast. Takie podejście zastosowaliśmy w prezentacji HTML tej palety, w której każdy przycisk automatycznie wskazuje poziom zgodności.

Zastosowanie w Bootstrapie

Aby wprowadzić nowe kolory do własnego motywu Bootstrap, wystarczy dodać zmienne CSS do sekcji :root, a następnie zmapować je do klas utility lub komponentów.

Tekst

Przykładowa integracja, pozostałe kolory podobnie:

.text-lime {
  color: #8bc34a;
}  

To jest tekst lime
To jest tekst mint
To jest tekst azure
To jest tekst navy
To jest tekst violet
To jest tekst magenta
To jest tekst brick
To jest tekst amber
To jest tekst olive
To jest tekst turquoise
To jest tekst slate
To jest tekst brown

Linki

Przykładowa integracja:

.link-lime {
  color: #8bc34a;
  -webkit-text-decoration-color: #8bc34a;
  text-decoration-color: #8bc34a;
}
.link-lime:hover, .link-lime:focus {
  color: #a2cf6e;
  -webkit-text-decoration-color: #a2cf6e;
  text-decoration-color: #a2cf6e;
}

To jest link lime
To jest link mint
To jest link azure
To jest link navy
To jest link violet
To jest link magenta
To jest link brick
To jest link amber
To jest link olive
To jest link turquoise
To jest link slate
To jest link brown

Badge

Przykładowa integracja:

.text-bg-lime {
  background-color: var(--bs-lime);
  color: #000000;
}

Lime Mint Azure Navy Violet Magenta Brick Amber Olive Turquoise Slate Brown

Przyciski

Przykładowa integracja:

.btn-lime {
  --bs-btn-color: #000;
  --bs-btn-bg: #8bc34a;
  --bs-btn-border-color: #8bc34a;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #9ccc65; /* tint 15% */
  --bs-btn-hover-border-color: #97c95c; /* tint 10% */
  --bs-btn-focus-shadow-rgb: 118, 166, 63; /* shade 15% */
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #a2cf6e; /* tint 20% */
  --bs-btn-active-border-color: #97c95c; /* tint 10% */
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #8bc34a;
  --bs-btn-disabled-border-color: #8bc34a;
}

Lime Mint Azure Navy Violet Magenta Brick Amber Olive Turquoise Slate Brown

Przyciski outline

Przykładowa integracja:

.btn-outline-lime {
  --bs-btn-color: #8bc34a;
  --bs-btn-border-color: #8bc34a;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #8bc34a;
  --bs-btn-hover-border-color: #8bc34a;
  --bs-btn-focus-shadow-rgb: 139, 195, 74;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #8bc34a;
  --bs-btn-active-border-color: #8bc34a;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #8bc34a;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #8bc34a;
  --bs-gradient: none;
}

Lime Mint Azure Navy Violet Magenta Brick Amber Olive Turquoise Slate Brown

Alerty

Przykładowa integracja:

:root, [data-bs-theme=light] {
--bs-lime-text-emphasis: #384e1e;
--bs-lime-bg-subtle: #e8f3db;
--bs-lime-border-subtle: #d1e7b7;
}

.alert-lime {
--bs-alert-color: var(--bs-lime-text-emphasis);
--bs-alert-bg: var(--bs-lime-bg-subtle);
--bs-alert-border-color: var(--bs-lime-border-subtle);
--bs-alert-link-color: var(--bs-lime-text-emphasis);
}

Zestawienie kolorów i kontrastów w tabeli

Zestawienie kontrastów i zgodności z WCAG AA (min. 4.5:1) oraz AAA (min. 7.0:1) dla normalnego tekstu.

Zestawienie kontrastów i zgodności z WCAG AA (min. 3.0:1) oraz AAA (min. 4.5:1) dla dużego lub pogrubionego tekstu.

Legenda: spełnione | nie spełnione

Sprawdź kontrast

Znaczenie kolorów i zastosowanie w webdesignie

Lime — #8bc34a

Zastosowanie w UI

• Idealny do akcentów i elementów podkreślających energię: etykiety, badge, CTA typu „Rozpocznij”.
• Pasuje do stron ekologicznych, zdrowotnych, technologicznych (szczególnie start-upowych).

Psychologia

• Kojarzy się z świeżością, naturą, optymizmem.
• Ożywia interfejs, ale jest mniej agresywny niż czysta zieleń.

Mint — #3ddc97

Zastosowanie w UI

• Doskonały do sekcji informacyjnych, tła kart, przycisków pomocniczych.
• Dobrze współgra z minimalistycznymi projektami i stronami o tematyce wellness, finansów lub edukacji.

Psychologia

• Zapewnia poczucie lekkości, spokoju i nowoczesności.
• Kolor budzący zaufanie, świeży i przyjazny.

Azure — #3f8efc

Zastosowanie w UI

• Standardowy kolor akcji: CTA, linki, ikonografia.
• Bardzo czytelny na jasnym tle – dobry kontrast.

Psychologia

• Symbolizuje zaufanie, stabilność i profesjonalizm.
• Idealny dla stron firmowych, SaaS, fintech.

Navy — #001f54

Zastosowanie w UI

• Tła headerów, stopki, przyciski premium, elementy o wysokiej hierarchii.
• Elegancki i formalny, świetny do stron korporacyjnych.

Psychologia

• Kojarzy się z autorytetem, powagą i głębią.
• Nadaje ton profesjonalizmu i stabilności.

Violet — #9b59b6

Zastosowanie w UI

• Akcenty kreatywne: tytuły, bannery, elementy dekoracyjne.
• Popularny w branżach beauty, lifestyle, sztuka, edukacja.

Psychologia

• Symbol kreatywności, luksusu i duchowości.
• Przyciąga uwagę, ale jest bardziej subtelny niż magenta.

Magenta — #ff2e9d

Zastosowanie w UI

• Akcentowe CTA, podkreślanie feature’ów, branding młodych marek.
• Dobrze działa w UI skierowanym do młodszego odbiorcy.

Psychologia

• Kolor pasji, energii, zabawy i ekspresji.
• Silnie pobudza, może dominować – stosować jako akcent.

Brick — #b22222

Zastosowanie w UI

• Przyciski ostrzegawcze (alternatywa dla bootstrapowego “danger”), akcenty retro.
• Sprawdza się w projektach z charakterem vintage lub rzemieślniczym.

Psychologia

• Budzi poczucie solidności, ciepła i siły.
• Mniej agresywny niż czysta czerwień, bardziej naturalny.

Amber — #ffb300

Zastosowanie w UI

• Podkreślenia ostrzeżeń, CTA, bannery promocyjne.
• Świetny w e-commerce jako kolor wyróżniający.

Psychologia

• Kojarzy się z energią, optymizmem, pewnością siebie.
• Pobudza do działania, ale nie jest tak alarmujący jak żółć lub czerwień.

Olive — #708238

Zastosowanie w UI

• Tła kart, infoboxy, elementy „eko” lub „natural”.
• Popularny w branżach wellness, ekologicznych, outdoorowych.

Psychologia

• Symbol stabilności, natury, harmonii.
• Neutralny, spokojny i ciepły – dobry do projektów spokojnych, niekrzykliwych.

Turquoise — #30d5c8

Zastosowanie w UI

• Bannery, CTA, grafiki informacyjne, sekcje powitalne.
• Bardzo nowoczesny kolor – dobry do startupów i produktów cyfrowych.

Psychologia

• Kojarzy się z czystością, kreatywnością, jasnością myślenia.
• Relaksujący, ale jednocześnie dynamiczny.

Slate — #6c7a89

Zastosowanie w UI

• Tekst pomocniczy, bordery, elementy UI o niskiej hierarchii.
• Uniwersalne tło dla typografii – bardzo elegancki.

Psychologia

• Kolor neutralny, profesjonalny, wyważony.
• Sugeruje stabilność i nowoczesność.

Brown — #8b4513

Zastosowanie w UI

• Akcenty dla projektów rustykalnych, rzemieślniczych, naturalnych.
• Dobre tło dla produktów spożywczych, kawy, drewna.

Psychologia

• Kolor ziemi, stabilności, ciepła i tradycji.
• Buduje zaufanie i autentyczność.

Podsumowanie

Stworzenie własnej palety kolorów daje ogromną swobodę projektową. Dzięki zdefiniowaniu bazowych kolorów, wygenerowaniu ich odcieni oraz zapewnieniu zgodności z WCAG otrzymujemy kompletny i profesjonalny zestaw, który można łatwo zintegrować z Bootstrapem.