Pomoc:Kolory

Dobranie odpowiedniego koloru jest doskonałym sposobem na wyróżnienie Twojej społeczności, jak również dopasowanie jej wyglądu do przyjętej tematyki wiki. Możesz użyć ich w kreatorze motywu, znajdujących się na wiki szablonach czy zmienić wygląd elementów strony za pomocą CSSu.

Zapis kolorów

W grafice komputerowej, prawie każdy możliwy do wyobrażenia kolor może być zapisany za pomocą kodu szesnastkowego - sześcio- lub ośmiocyfrowego kodu stanowiącego numeryczną reprezentację ilości czerwonego, zielonego i niebieskiego obecnego w danym kolorze, jak również jego przezroczystości. Kody szesnastkowe nie rozróżniają wielkości liter, więc #ffffff i #FFFFFF oznaczają to samo.

Kody szesnastkowe nie są jednak jedynym dostępnym sposobem zapisu kolorów. Do najbardziej popularnych metod zapisu należą:

• funkcja rgb()/rgba() pozwalająca na zapisanie kodów szesnastkowych w sposób bardziej czytelny dla człowieka; np. kolor czerwony #FF0000FF może został zapisany jako rgba(255, 0, 0, 1) lub rgba(255 0 0 / 100%);
• funkcja hsl()/hsla() pozwalająca na zapisanie kolorów w notacji HSL definiującej kolory za pomocą trzech składników: barwy, nasycenia i jasności;
• funkcja hwb() określająca kolor poprzez trzy wartości: barwę, poziom bieli oraz poziom czerni;
• funkcje lab(), lch(), oklab() oraz oklch() odpowiadające przestrzeniom barw CIELab, LCh oraz ich odpowiednikom biorącym pod uwagę postrzeganie kolorów przez ludzkie oko;

UWAGA: Większość przeglądarek pozwala wyświetlać wybrane kolory poprzez podanie nazwy kolorów. Jednakże, uzyskane kolory mogą się różnić w zależności od używanej przeglądarki. Problem ten nie występuje przy korzystaniu z metod zapisu przedstawionych wyżej.

Aby użyć wybranego koloru w kreatorze motywu skopiuj jego kod szesnastkowy i podaj go w odpowiednim polu znajdującym się po lewej stronie.

Kolory a dostępność

Chociaż kreatywne wykorzystanie kolorów może znacznie poprawić wygląd wiki, ważne jest, aby pamiętać, że nie wszyscy postrzegają kolory w ten sam sposób. Ważne jest również, aby wiki była dostępna dla osób cierpiących na różne zaburzenia widzenia. Dowiedz się więcej na ten temat tutaj.

Wybrane nazwy kolorów w HTML

Poniżej znajduje się tabela zawierająca nazwy kolorów i odpowiadające im wartości RGB zapisane za pomocą kodu szesnastkowego (oraz dziesiętnego, używanego przez funkcję CSS rgb() wspomnianą wyżej). Wszystkie współczesne przeglądarki rozpoznają każdy z przedstawionych kolorów. Aby użyć wybranego koloru, skopiuj jego nazwę lub kod szesnastkowy z listy poniżej i podaj go w odpowiednim miejscu.

UWAGA: Kolory uzyskane poprzez wpisane jego nazwy mogą się różnić w zależności od używanej przeglądarki. Problem ten nie występuje przy korzystaniu z kodu dziesiętnego lub szesnastkowego).

Kolory motywu

Skórka FandomDesktop pozwala na korzystanie ze zmiennych zawierających kolory poszczególnych elementów skórki. Zmienne te mogą być wykorzystywane w stylach społeczności, osobistych stylach użytkownika lub bezpośrednio w szablonie, by lepiej dostosować go do motywu wiki.

Nazwa zmiennej	Opis
--theme-accent-color	Kolor akcentu pobrany z Kreatora motywu, zapisany jako wartość szesnastkowa (hex)
--theme-accent-color--hover	Kolor akcentu po najechaniu kursorem (jaśniejszy lub ciemniejszy o 20%, zależnie od motywu), w formacie hex
--theme-accent-color--rgb	Kolor akcentu z Kreatora motywu jako składowe RGB (czerwony, zielony, niebieski)
--theme-accent-dynamic-color-1	Dynamiczny kolor 1 dla akcentu. Zobacz sekcję „Kolory dynamiczne”.
--theme-accent-dynamic-color-1--rgb	Składowe RGB dynamicznego koloru 1 dla akcentu
--theme-accent-dynamic-color-2	Dynamiczny kolor 2 dla akcentu. Zobacz sekcję „Kolory dynamiczne”.
--theme-accent-dynamic-color-2--rgb	Składowe RGB dynamicznego koloru 2 dla akcentu
--theme-accent-label-color	Kolor tekstu zapewniający dobrą czytelność na tle --theme-accent-color, w formacie hex
--theme-alert-color	Kolor alertów (czerwony), dostosowany kontrastem do tła strony, w formacie hex
--theme-alert-color--hover	Kolor alertów po najechaniu (jaśniejszy lub ciemniejszy o 20%), w formacie hex
--theme-alert-color--rgb	Kolor alertów jako składowe RGB
--theme-alert-label	Czytelny kolor tekstu do użycia na tle --theme-alert-color
--theme-body-background-color	Kolor tła całej strony (body) z Kreatora motywu, w formacie hex
--theme-body-background-image	Adres URL obrazu tła strony (body), ustawiony w Kreatorze motywów
--theme-body-dynamic-color-1	Dynamiczny kolor 1 dla tła strony. Zobacz sekcję „Kolory dynamiczne”.
--theme-body-dynamic-color-1--rgb	Składowe RGB dynamicznego koloru 1 dla tła strony
--theme-body-dynamic-color-2	Dynamiczny kolor 2 dla tła strony. Zobacz sekcję „Kolory dynamiczne”.
--theme-body-dynamic-color-2--rgb	Składowe RGB dynamicznego koloru 2 dla tła strony
--theme-body-text-color	Czytelny kolor tekstu na tle --theme-body-background-color
--theme-body-text-color--hover	Kolor tekstu po najechaniu, dostosowany do motywu
--theme-border-color	Kolor obramowań obliczony na podstawie --theme-page-background-color
--theme-border-color--rgb	Kolor obramowań jako składowe RGB
--theme-link-color	Kolor linków z Kreatora motywu
--theme-link-color--hover	Kolor linków po najechaniu (jaśniejszy lub ciemniejszy o 20%), w formacie hex
--theme-link-color--rgb	Kolor linków jako składowe RGB
--theme-link-dynamic-color-1	Dynamiczny kolor 1 dla linków. Zobacz sekcję „Kolory dynamiczne”.
--theme-link-dynamic-color-1--rgb	Składowe RGB dynamicznego koloru 1 dla linków
--theme-link-dynamic-color-2	Dynamiczny kolor 2 dla linków. Zobacz sekcję „Kolory dynamiczne”.
--theme-link-dynamic-color-2--rgb	Składowe RGB dynamicznego koloru 2 dla linków
--theme-link-label-color	Czytelny kolor tekstu na tle --theme-link-color
--theme-message-color	Kolor komunikatów informacyjnych (niebieski), z zachowaniem kontrastu
--theme-message-label	Kolor tekstu zapewniający czytelność na tle --theme-message-color
--theme-page-accent-mix-color	Mieszanka koloru tła strony i koloru akcentu (50% / 50%)
--theme-page-background-color	Kolor tła artykułu (strony) z Kreatora motywu
--theme-page-background-color--rgb	Kolor tła artykułu jako składowe RGB
--theme-page-background-color--secondary	Kolor pomocniczy, lekko zmieszany z bielą lub czernią, zależnie od motywu
--theme-page-dynamic-color-1	Dynamiczny kolor 1 dla tła artykułu. Zobacz sekcję „Kolory dynamiczne”.
--theme-page-dynamic-color-1--rgb	Składowe RGB dynamicznego koloru 1 dla tła artykułu
--theme-page-dynamic-color-2	Dynamiczny kolor 2 dla tła artykułu. Zobacz sekcję „Kolory dynamiczne”.
--theme-page-dynamic-color-2--rgb	Składowe RGB dynamicznego koloru 2 dla tła artykułu
--theme-page-text-color	Kolor tekstu na stronie. Alias dla --theme-page-dynamic-color-2
--theme-page-text-color--hover	Kolor tekstu strony po najechaniu kursorem
--theme-page-text-color--rgb	Składowe RGB koloru tekstu strony
--theme-page-text-mix-color	Mieszanka koloru tła strony i dynamicznego koloru 2 (50% / 50%)
--theme-sticky-nav-background-color	Kolor tła przyklejonej nawigacji, ustawiany w Kreatorze motywów
--theme-sticky-nav-dynamic-color-1	Dynamiczny kolor 1 dla tła nawigacji
--theme-sticky-nav-dynamic-color-1--rgb	Składowe RGB dynamicznego koloru 1 paska nawigacji
--theme-sticky-nav-dynamic-color-2	Dynamiczny kolor 2 dla tła nawigacji
--theme-sticky-nav-dynamic-color-2--rgb	Składowe RGB dynamicznego koloru 2 paska nawigacji
--theme-sticky-nav-text-color	Kolor tekstu nawigacji. Alias dla --theme-sticky-nav-dynamic-color-1
--theme-sticky-nav-text-color--hover	Kolor tekstu nawigacji po najechaniu
--theme-success-color	Kolor sukcesu (zielony), z zachowaniem odpowiedniego kontrastu
--theme-success-color--rgb	Kolor sukcesu jako składowe RGB
--theme-success-label	Czytelny kolor tekstu na tle --theme-success-color
--theme-warning-color	Kolor ostrzeżeń (żółty), dostosowany kontrastem do tła
--theme-warning-label	Czytelny kolor tekstu na tle --theme-warning-color

Kolory dynamiczne

Kolory dynamiczne są obliczane na podstawie koloru tła, na którym się znajdują. Ich celem jest zapewnienie możliwie najlepszego kontrastu i czytelności.

• dynamic-color-1 — fandom-black (#0E191A) dla jasnych teł oraz biały (#FFFFFF) dla ciemnych teł.
• dynamic-color-2 — ciemnoszary (#3A3A3A) dla jasnych teł oraz jasnoszary (#E6E6E6) dla ciemnych teł.

Aliasy zmiennych

Niektóre zmienne są jedynie aliasami (innymi nazwami) dla kolorów dynamicznych:

Nazwa zmiennej	Alias dla
--theme-accent-label-color	--theme-accent-dynamic-color-1
--theme-body-text-color	--theme-body-dynamic-color-1
--theme-link-label-color	--theme-link-dynamic-color-1
--theme-page-text-color	--theme-page-dynamic-color-2
--theme-sticky-nav-text-color	--theme-sticky-nav-dynamic-color-1

Zobacz też

• Omówienie wpływu kontrastu na wybór kolorów Twojej wiki
• Jak zmienić wygląd wiki poprzez Kreator motywu
• Artykuł o kolorach na Wikipedii, na bazie którego powstało powyższe zestawienie.
• Artykuł o zapisie kolorów w CSS na stronie Shebang.pl
• 4096 Color Wheel (ang.)
• Zestawienie nazw i odcieni kolorów na stronie color-blindness.com (ang.)
• Artykuł „Color Blindness & Web Design” na stronie usability.gov (ang.)

Dalsze wsparcie

Szukasz dalszego wsparcia lub masz pytanie? Sprawdź poniższe linki, aby dowiedzieć się więcej.

• Dowiedz się więcej, sprawdzając inne strony pomocy.
• Uzyskaj pomoc od innych użytkowników Fandomu w Dyskusjach na Centrum Społeczności.
• Skontaktuj się ze wsparciem Fandomu poprzez formularz kontaktowy.