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
| Odcień | Lime | Mint | Azure | Navy | Violet | Magenta | Brick | Amber | Olive | Turquoise | Slate | Brown |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 100 | #e8f3db | #d8f8ea | #d9e8fe | #ccd2dd | #ebdef0 | #ffd5eb | #f0d3d3 | #fff0cc | #e2e6d7 | #d6f7f4 | #e2e4e7 | #e8dad0 |
| 200 | #d1e7b7 | #b1f1d5 | #b2d2fe | #99a5bb | #d7bde2 | #ffabd8 | #e0a7a7 | #ffe199 | #c6cdaf | #aceee9 | #c4cad0 | #d1b5a1 |
| 300 | #b9db92 | #8beac1 | #8cbbfd | #667998 | #c39bd3 | #ff82c4 | #d17a7a | #ffd166 | #a9b488 | #83e6de | #a7afb8 | #b98f71 |
| 400 | #a2cf6e | #64e3ac | #65a5fd | #334c76 | #af7ac5 | #ff58b1 | #c14e4e | #ffc233 | #8d9b60 | #59ddd3 | #8995a1 | #a26a42 |
| 500 | #8bc34a | #3ddc97 | #3f8efc | #001f54 | #9b59b6 | #ff2e9d | #b22222 | #ffb300 | #708238 | #30d5c8 | #6c7a89 | #8b4513 |
| 600 | #6f9c3b | #31b079 | #3272ca | #001943 | #7c4792 | #cc257e | #8e1b1b | #cc8f00 | #5a682d | #26aaa0 | #56626e | #6f370f |
| 700 | #53752c | #25845b | #265597 | #001332 | #5d356d | #991c5e | #6b1414 | #996b00 | #434e22 | #1d8078 | #414952 | #53290b |
| 800 | #384e1e | #18583c | #193965 | #000c22 | #3e2449 | #66123f | #470e0e | #664800 | #2d3416 | #135550 | #2b3137 | #381c08 |
| 900 | #1c270f | #0c2c1e | #0d1c32 | #000611 | #1f1224 | #33091f | #240707 | #332400 | #161a0b | #0a2b28 | #16181b | #1c0e04 |
--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.
| Klasa tekstu | bg-white (#ffffff) |
bg-light (#f8f9fa) |
bg-dark (#212529) |
bg-black (#000000) |
|---|---|---|---|---|
lime #8bc34a |
2.1:1 ✗ AA ✗ AAA | 1.99:1 ✗ AA ✗ AAA | 7.35:1 ✓ AA ✓ AAA | 10:1 ✓ AA ✓ AAA |
mint #3ddc97 |
1.77:1 ✗ AA ✗ AAA | 1.68:1 ✗ AA ✗ AAA | 8.73:1 ✓ AA ✓ AAA | 11.88:1 ✓ AA ✓ AAA |
azure #3f8efc |
3.24:1 ✗ AA ✗ AAA | 3.07:1 ✗ AA ✗ AAA | 4.76:1 ✓ AA ✗ AAA | 6.49:1 ✓ AA ✗ AAA |
navy #001f54 |
15.86:1 ✓ AA ✓ AAA | 15.05:1 ✓ AA ✓ AAA | 1.03:1 ✗ AA ✗ AAA | 1.32:1 ✗ AA ✗ AAA |
violet #9b59b6 |
4.67:1 ✓ AA ✗ AAA | 4.43:1 ✗ AA ✗ AAA | 3.3:1 ✗ AA ✗ AAA | 4.5:1 ✓ AA ✗ AAA |
magenta #ff2e9d |
3.43:1 ✗ AA ✗ AAA | 3.25:1 ✗ AA ✗ AAA | 4.5:1 ✓ AA ✗ AAA | 6.13:1 ✓ AA ✗ AAA |
brick #b22222 |
6.68:1 ✓ AA ✗ AAA | 6.33:1 ✓ AA ✗ AAA | 2.31:1 ✗ AA ✗ AAA | 3.14:1 ✗ AA ✗ AAA |
amber #ffb300 |
1.79:1 ✗ AA ✗ AAA | 1.7:1 ✗ AA ✗ AAA | 8.59:1 ✓ AA ✓ AAA | 11.7:1 ✓ AA ✓ AAA |
olive #708238 |
4.25:1 ✗ AA ✗ AAA | 4.03:1 ✗ AA ✗ AAA | 3.63:1 ✗ AA ✗ AAA | 4.94:1 ✓ AA ✗ AAA |
turquoise #30d5c8 |
1.83:1 ✗ AA ✗ AAA | 1.74:1 ✗ AA ✗ AAA | 8.43:1 ✓ AA ✓ AAA | 11.48:1 ✓ AA ✓ AAA |
slate #6c7a89 |
4.39:1 ✗ AA ✗ AAA | 4.17:1 ✗ AA ✗ AAA | 3.51:1 ✗ AA ✗ AAA | 4.78:1 ✓ AA ✗ AAA |
brown #8b4513 |
7.1:1 ✓ AA ✓ AAA | 6.73:1 ✓ AA ✗ AAA | 2.17:1 ✗ AA ✗ AAA | 2.96:1 ✗ AA ✗ AAA |
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.
| Klasa tekstu | bg-white (#ffffff) |
bg-light (#f8f9fa) |
bg-dark (#212529) |
bg-black (#000000) |
|---|---|---|---|---|
lime #8bc34a |
2.1:1 ✗ AA ✗ AAA | 1.99:1 ✗ AA ✗ AAA | 7.35:1 ✓ AA ✓ AAA | 10:1 ✓ AA ✓ AAA |
mint #3ddc97 |
1.77:1 ✗ AA ✗ AAA | 1.68:1 ✗ AA ✗ AAA | 8.73:1 ✓ AA ✓ AAA | 11.88:1 ✓ AA ✓ AAA |
azure #3f8efc |
3.24:1 ✓ AA ✗ AAA | 3.07:1 ✓ AA ✗ AAA | 4.76:1 ✓ AA ✓ AAA | 6.49:1 ✓ AA ✓ AAA |
navy #001f54 |
15.86:1 ✓ AA ✓ AAA | 15.05:1 ✓ AA ✓ AAA | 1.03:1 ✗ AA ✗ AAA | 1.32:1 ✗ AA ✗ AAA |
violet #9b59b6 |
4.67:1 ✓ AA ✓ AAA | 4.43:1 ✓ AA ✗ AAA | 3.3:1 ✓ AA ✗ AAA | 4.5:1 ✓ AA ✓ AAA |
magenta #ff2e9d |
3.43:1 ✓ AA ✗ AAA | 3.25:1 ✓ AA ✗ AAA | 4.5:1 ✓ AA ✓ AAA | 6.13:1 ✓ AA ✓ AAA |
brick #b22222 |
6.68:1 ✓ AA ✓ AAA | 6.33:1 ✓ AA ✓ AAA | 2.31:1 ✗ AA ✗ AAA | 3.14:1 ✓ AA ✗ AAA |
amber #ffb300 |
1.79:1 ✗ AA ✗ AAA | 1.7:1 ✗ AA ✗ AAA | 8.59:1 ✓ AA ✓ AAA | 11.7:1 ✓ AA ✓ AAA |
olive #708238 |
4.25:1 ✓ AA ✗ AAA | 4.03:1 ✓ AA ✗ AAA | 3.63:1 ✓ AA ✗ AAA | 4.94:1 ✓ AA ✓ AAA |
turquoise #30d5c8 |
1.83:1 ✗ AA ✗ AAA | 1.74:1 ✗ AA ✗ AAA | 8.43:1 ✓ AA ✓ AAA | 11.48:1 ✓ AA ✓ AAA |
slate #6c7a89 |
4.39:1 ✓ AA ✗ AAA | 4.17:1 ✓ AA ✗ AAA | 3.51:1 ✓ AA ✗ AAA | 4.78:1 ✓ AA ✓ AAA |
brown #8b4513 |
7.1:1 ✓ AA ✓ AAA | 6.73:1 ✓ AA ✓ AAA | 2.17:1 ✗ AA ✗ AAA | 2.96:1 ✗ AA ✗ AAA |
Sprawdź kontrast WCAG
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.