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
#FF0000FFmoże został zapisany jakorgba(255, 0, 0, 1)lubrgba(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). Wzystkie 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).
Odcienie koloru czerwonego[]
| Nazwa HTML | Kod szesnastkowy R G B |
Kod dziesiętny R G B |
|---|---|---|
| IndianRed | #CD5C5C | 205 92 92 |
| LightCoral | #F08080 | 240 128 128 |
| Salmon | #FA8072 | 250 128 114 |
| DarkSalmon | #E9967A | 233 150 122 |
| LightSalmon | #FFA07A | 255 160 122 |
| Crimson | #DC143C | 220 20 60 |
| Red | #FF0000 | 255 0 0 |
| FireBrick | #B22222 | 178 34 34 |
| DarkRed | #8B0000 | 139 0 0 |
Odcienie koloru różowego[]
| Nazwa HTML | Kod szesnastkowy R G B |
Kod dziesiętny R G B |
|---|---|---|
| Pink | #FFC0CB | 255 192 203 |
| LightPink | #FFB6C1 | 255 182 193 |
| HotPink | #FF69B4 | 255 105 180 |
| DeepPink | #FF1493 | 255 20 147 |
| MediumVioletRed | #C71585 | 199 21 133 |
| PaleVioletRed | #DB7093 | 219 112 147 |
Odcienie koloru pomarańczowego[]
| Nazwa HTML | Kod szesnastkowy R G B |
Kod dziesiętny R G B |
|---|---|---|
| LightSalmon | #FFA07A | 255 160 122 |
| Coral | #FF7F50 | 255 127 80 |
| Tomato | #FF6347 | 255 99 71 |
| OrangeRed | #FF4500 | 255 69 0 |
| DarkOrange | #FF8C00 | 255 140 0 |
| Orange | #FFA500 | 255 165 0 |
Odcienie koloru żółtego[]
| Nazwa HTML | Kod szesnastkowy R G B |
Kod dziesiętny R G B |
|---|---|---|
| Gold | #FFD700 | 255 215 0 |
| Yellow | #FFFF00 | 255 255 0 |
| LightYellow | #FFFFE0 | 255 255 224 |
| LemonChiffon | #FFFACD | 255 250 205 |
| LightGoldenrodYellow | #FAFAD2 | 250 250 210 |
| PapayaWhip | #FFEFD5 | 255 239 213 |
| Moccasin | #FFE4B5 | 255 228 181 |
| PeachPuff | #FFDAB9 | 255 218 185 |
| PaleGoldenrod | #EEE8AA | 238 232 170 |
| Khaki | #F0E68C | 240 230 140 |
| DarkKhaki | #BDB76B | 189 183 107 |
Odcienie koloru fioletowego[]
| Nazwa HTML | Kod szesnastkowy R G B |
Kod dziesiętny R G B |
|---|---|---|
| Lavender | #E6E6FA | 230 230 250 |
| Thistle | #D8BFD8 | 216 191 216 |
| Plum | #DDA0DD | 221 160 221 |
| Violet | #EE82EE | 238 130 238 |
| Orchid | #DA70D6 | 218 112 214 |
| Fuchsia | #FF00FF | 255 0 255 |
| Magenta | #FF00FF | 255 0 255 |
| MediumOrchid | #BA55D3 | 186 85 211 |
| MediumPurple | #9370DB | 147 112 219 |
| BlueViolet | #8A2BE2 | 138 43 226 |
| DarkViolet | #9400D3 | 148 0 211 |
| DarkOrchid | #9932CC | 153 50 204 |
| DarkMagenta | #8B008B | 139 0 139 |
| Purple | #800080 | 128 0 128 |
| Indigo | #4B0082 | 75 0 130 |
| SlateBlue | #6A5ACD | 106 90 205 |
| DarkSlateBlue | #483D8B | 72 61 139 |
| MediumSlateBlue | #7B68EE | 123 104 238 |
Odcienie koloru zielonego[]
| Nazwa HTML | Kod szesnastkowy R G B |
Kod dziesiętny R G B |
|---|---|---|
| GreenYellow | #ADFF2F | 173 255 47 |
| Chartreuse | #7FFF00 | 127 255 0 |
| LawnGreen | #7CFC00 | 124 252 0 |
| Lime | #00FF00 | 0 255 0 |
| LimeGreen | #32CD32 | 50 205 50 |
| PaleGreen | #98FB98 | 152 251 152 |
| LightGreen | #90EE90 | 144 238 144 |
| MediumSpringGreen | #00FA9A | 0 250 154 |
| SpringGreen | #00FF7F | 0 255 127 |
| MediumSeaGreen | #3CB371 | 60 179 113 |
| SeaGreen | #2E8B57 | 46 139 87 |
| ForestGreen | #228B22 | 34 139 34 |
| Green | #008000 | 0 128 0 |
| DarkGreen | #006400 | 0 100 0 |
| YellowGreen | #9ACD32 | 154 205 50 |
| OliveDrab | #6B8E23 | 107 142 35 |
| Olive | #808000 | 128 128 0 |
| DarkOliveGreen | #556B2F | 85 107 47 |
| MediumAquamarine | #66CDAA | 102 205 170 |
| DarkSeaGreen | #8FBC8F | 143 188 143 |
| LightSeaGreen | #20B2AA | 32 178 170 |
| DarkCyan | #008B8B | 0 139 139 |
| Teal | #008080 | 0 128 128 |
Odcienie koloru niebieskiego[]
| Nazwa HTML | Kod szesnastkowy R G B |
Kod dziesiętny R G B |
|---|---|---|
| Aqua | #00FFFF | 0 255 255 |
| Cyan | #00FFFF | 0 255 255 |
| LightCyan | #E0FFFF | 224 255 255 |
| PaleTurquoise | #AFEEEE | 175 238 238 |
| Aquamarine | #7FFFD4 | 127 255 212 |
| Turquoise | #40E0D0 | 64 224 208 |
| MediumTurquoise | #48D1CC | 72 209 204 |
| DarkTurquoise | #00CED1 | 0 206 209 |
| CadetBlue | #5F9EA0 | 95 158 160 |
| SteelBlue | #4682B4 | 70 130 180 |
| LightSteelBlue | #B0C4DE | 176 196 222 |
| PowderBlue | #B0E0E6 | 176 224 230 |
| LightBlue | #ADD8E6 | 173 216 230 |
| SkyBlue | #87CEEB | 135 206 235 |
| LightSkyBlue | #87CEFA | 135 206 250 |
| DeepSkyBlue | #00BFFF | 0 191 255 |
| DodgerBlue | #1E90FF | 30 144 255 |
| CornflowerBlue | #6495ED | 100 149 237 |
| MediumSlateBlue | #7B68EE | 123 104 238 |
| RoyalBlue | #4169E1 | 65 105 225 |
| Blue | #0000FF | 0 0 255 |
| MediumBlue | #0000CD | 0 0 205 |
| DarkBlue | #00008B | 0 0 139 |
| Navy | #000080 | 0 0 128 |
| MidnightBlue | #191970 | 25 25 112 |
Odcienie koloru brązowego[]
| Nazwa HTML | Kod szesnastkowy R G B |
Kod dziesiętny R G B |
|---|---|---|
| Cornsilk | #FFF8DC | 255 248 220 |
| BlanchedAlmond | #FFEBCD | 255 235 205 |
| Bisque | #FFE4C4 | 255 228 196 |
| NavajoWhite | #FFDEAD | 255 222 173 |
| Wheat | #F5DEB3 | 245 222 179 |
| BurlyWood | #DEB887 | 222 184 135 |
| Tan | #D2B48C | 210 180 140 |
| RosyBrown | #BC8F8F | 188 143 143 |
| SandyBrown | #F4A460 | 244 164 96 |
| Goldenrod | #DAA520 | 218 165 32 |
| DarkGoldenrod | #B8860B | 184 134 11 |
| Peru | #CD853F | 205 133 63 |
| Chocolate | #D2691E | 210 105 30 |
| SaddleBrown | #8B4513 | 139 69 19 |
| Sienna | #A0522D | 160 82 45 |
| Brown | #A52A2A | 165 42 42 |
| Maroon | #800000 | 128 0 0 |
Odcienie koloru białego[]
| Nazwa HTML | Kod szesnastkowy R G B |
Kod dziesiętny R G B |
|---|---|---|
| White | #FFFFFF | 255 255 255 |
| Snow | #FFFAFA | 255 250 250 |
| Honeydew | #F0FFF0 | 240 255 240 |
| MintCream | #F5FFFA | 245 255 250 |
| Azure | #F0FFFF | 240 255 255 |
| AliceBlue | #F0F8FF | 240 248 255 |
| GhostWhite | #F8F8FF | 248 248 255 |
| WhiteSmoke | #F5F5F5 | 245 245 245 |
| Seashell | #FFF5EE | 255 245 238 |
| Beige | #F5F5DC | 245 245 220 |
| OldLace | #FDF5E6 | 253 245 230 |
| FloralWhite | #FFFAF0 | 255 250 240 |
| Ivory | #FFFFF0 | 255 255 240 |
| AntiqueWhite | #FAEBD7 | 250 235 215 |
| Linen | #FAF0E6 | 250 240 230 |
| LavenderBlush | #FFF0F5 | 255 240 245 |
| MistyRose | #FFE4E1 | 255 228 225 |
Odcienie koloru szarego[]
| Nazwa HTML | Kod szesnastkowy R G B |
Kod dziesiętny R G B |
|---|---|---|
| Gainsboro | #DCDCDC | 220 220 220 |
| LightGrey | #D3D3D3 | 211 211 211 |
| Silver | #C0C0C0 | 192 192 192 |
| DarkGray | #A9A9A9 | 169 169 169 |
| Gray | #808080 | 128 128 128 |
| DimGray | #696969 | 105 105 105 |
| LightSlateGray | #778899 | 119 136 153 |
| SlateGray | #708090 | 112 128 144 |
| DarkSlateGray | #2F4F4F | 47 79 79 |
| Black | #000000 | 0 0 0 |
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 odcieni z kreatora motywu, jako wartość heksadecymalna |
--theme-accent-color--hover
|
Kolor odcieni z kreatora motywu, rozjaśniona bądź przyciemniona o 20% (zależnie od motywu), jako wartość heksadecymalna |
--theme-accent-color--rgb
|
Kolor odcieni z kreatora motywu, jako wartość RGB |
--theme-accent-dynamic-color-1
|
kolor dynamic-1 dla odcieni. Zobacz sekcję "Dynamiczne kolory" po więcej informacji. |
--theme-accent-dynamic-color-1--rgb
|
wartości RGB dla koloru dynamic-1 dla odcieni. Zobacz sekcję "Dynamiczne kolory" po więcej informacji. |
--theme-accent-dynamic-color-2
|
kolor dynamic-2 dla odcieni. Zobacz sekcję "Dynamiczne kolory" po więcej informacji. |
--theme-accent-dynamic-color-2--rgb
|
wartości RGB dla koloru dynamic-2 dla odcieni. Zobacz sekcję "Dynamiczne kolory" po więcej informacji. |
--theme-accent-label-color
|
Kolor tekstu pasujący do --theme-accent-color background, jako wartość heksadecymalna |
--theme-alert-color
|
Kolor ostrzeżenia (czerwonawy), dostosowany kontrastowo do koloru tła strony, jako wartość heksadecymalna |
--theme-alert-color--hover
|
Kolor ostrzeżenia (czerwonawy), dostosowany kontrastowo do koloru tła strony, rozjaśniona bądź przyciemniona o 20% (zależnie od motywu), jako wartość heksadecymalna |
--theme-alert-color--rgb
|
Kolor ostrzeżenia (czerwonawy), dostosowany kontrastowo do koloru tła strony, jako wartość RGB |
--theme-alert-label
|
Kolor tekstu ostrzeżenia pasujący do --theme-alert-color background, jako wartość heksadecymalna |
--theme-body-background-color
|
Kolor tła społeczności z kreatora motywu, jako wartość heksadecymalna |
--theme-body-background-image
|
Adres URL do obrazu tła, pobrany z kreatora motywu, jako ciąg znaków |
--theme-body-dynamic-color-1
|
kolor dynamic-1 dla tła artykułu. Zobacz sekcję "Dynamiczne kolory" po więcej informacji. |
--theme-body-dynamic-color-1--rgb
|
wartości RGB dla koloru dynamic-1 dla tła artykułu. Zobacz sekcję "Dynamiczne kolory" po więcej informacji. |
--theme-body-dynamic-color-2
|
kolor dynamic-2 color for body background. Zobacz sekcję "Dynamiczne kolory" po więcej informacji. |
--theme-body-dynamic-color-2--rgb
|
wartości RGB dla koloru dynamic-2 dla tła artykułu. Zobacz sekcję "Dynamiczne kolory" po więcej informacji. |
--theme-body-text-color
|
Kolor tekstu pasujący do koloru tła --body-background-color, jako wartość heksadecymalna |
--theme-body-text-color--hover
|
Kolor tekstu pasujący do koloru tła --body-background-color, rozjaśniony bądź przyciemniony o 20% (zależnie od motywu), jako wartość heksadecymalna |
--theme-border-color
|
Pasujący kolor krawędzi oparty na --theme-page-background-color, jako wartość heksadecymalna |
--theme-border-color--rgb
|
Pasujący kolor krawędzi oparty na --theme-page-background-color, jako wartości RGB |
--theme-link-color
|
Kolor linków pobrany z kreatora motywu, jako wartość heksadecymalna |
--theme-link-color--hover
|
Kolor linków pobrany z kreatora motywu, rozjaśniony bądź przyciemniony o 20% (zależnie od motywu), jako wartość heksadecymalna |
--theme-link-color--rgb
|
Kolor linków pobrany z kreatora motywu, jako wartości RGB |
--theme-link-dynamic-color-1
|
kolor dynamic-1 dla linków. Zobacz sekcję "Dynamiczne kolory" po więcej informacji. |
--theme-link-dynamic-color-1--rgb
|
wartości RGB koloru dynamic-1 dla linków. Zobacz sekcję "Dynamiczne kolory" po więcej informacji. |
--theme-link-dynamic-color-2
|
kolor dynamic-2 dla linków. Zobacz sekcję "Dynamiczne kolory" po więcej informacji. |
--theme-link-dynamic-color-2--rgb
|
wartości RGB koloru dynamic-2 dla linków. Zobacz sekcję "Dynamiczne kolory" po więcej informacji. |
--theme-link-label-color
|
Kolor tekstu pasujący do --theme-link-color background, jako wartość heksadecymalna |
--theme-message-color
|
Kolor powiadomienia (niebieskawy), dostosowany kontrastowo do koloru tła strony, jako wartość heksadecymalna |
--theme-message-label
|
Kolor tekstu pasujący do --theme-message-color background, jako wartość heksadecymalna |
--theme-page-accent-mix-color
|
Mieszanka koloru tła strony oraz koloru odcieni w proporcji 50:50 |
--theme-page-background-color
|
Kolor tła artykułu z kreatora motywu, jako wartość heksadecymalna |
--theme-page-background-color--rgb
|
Kolor tła artykułu z kreatora motywu, jako wartości RGB |
--theme-page-background-color--secondary
|
Drugorzędny kolor oparty na --theme-page-background-color, zmieszany nieco z białym lub czarnym kolorem (zależnie od motywu), jako wartość heksadecymalna |
--theme-page-dynamic-color-1
|
Kolor dynamic-1 dla koloru tła artykułu. Zobacz sekcję "Dynamiczne kolory" po więcej informacji. |
--theme-page-dynamic-color-1--rgb
|
Wartości rgb dla koloru dynamic-1 dla koloru tła artykułu. Zobacz sekcję "Dynamiczne kolory" po więcej informacji. |
--theme-page-dynamic-color-2
|
Kolor dynamic-2 dla koloru tła artykułu. Zobacz sekcję "Dynamiczne kolory" po więcej informacji. |
--theme-page-dynamic-color-2--rgb
|
Wartości rgb dla koloru dynamic-2 dla koloru tła artykułu. Zobacz sekcję "Dynamiczne kolory" po więcej informacji. |
--theme-page-text-color
|
Kolor tekstu artykułu. Alias dla --theme-page-dynamic-color-2. |
--theme-page-text-color--hover
|
Kolor tekstu po najechaniu dla artykułu |
--theme-page-text-color--rgb
|
Wartości RGB dla koloru tekstu artykułu |
--theme-page-text-mix-color
|
Mieszanka kolorów tła artykułu oraz koloru dynamic-2 w stosunku 50:50 |
--theme-sticky-nav-background-color
|
Kolor nawigacji wiki, ustawiany w kreatorze motywu |
--theme-sticky-nav-dynamic-color-1
|
Kolor dynamic-1 dla nawigacji wiki. Zobacz sekcję "Dynamiczne kolory" po więcej informacji. |
--theme-sticky-nav-dynamic-color-1--rgb
|
Wartości RGB kolor dynamic-1 dla nawigacji wiki. Zobacz sekcję "Dynamiczne kolory" po więcej informacji. |
--theme-sticky-nav-dynamic-color-2
|
Kolor dynamic-2 dla nawigacji wiki. Zobacz sekcję "Dynamiczne kolory" po więcej informacji. |
--theme-sticky-nav-dynamic-color-2--rgb
|
Wartości RGB kolor dynamic-2 dla nawigacji wiki. Zobacz sekcję "Dynamiczne kolory" po więcej informacji. |
--theme-sticky-nav-text-color
|
Kolor tekstu dla nawigacji. Alias dla --theme-sticky-nav-dynamic-color-1 |
--theme-sticky-nav-text-color--hover
|
Kolor tekstu dla nawigacji po najechaniu |
--theme-success-color
|
Kolor powodzenia (zielonkawy), dostosowany kontrastowo do koloru tła strony, jako wartość heksadecymalna |
--theme-success-color--rgb
|
Kolor powodzenia (zielonkawy), dostosowany kontrastowo do koloru tła strony, jako wartości RGB |
--theme-success-label
|
Kolor tekstu dopasowany do --theme-success-color, jako wartość heksadecymalna |
--theme-warning-color
|
Kolor ostrzeżenia (żółtawy), dostosowany kontrastowo do koloru tła strony, jako wartość heksadecymalna |
--theme-warning-label
|
Kolor tekstu dopasowany do --theme-warning-color, jako wartość heksadecymalna |
Dynamiczne kolory[]
Dynamiczne kolory ustanawiane są na podstawie ich tła. Są wyliczane, aby osiągnąć jak najlepszy kontrast.
- dynamic-color-1 to czarny (logo Fandomu - #0E191A) dla jasnych teł lub biały (#FFFFFF) dla ciemnych teł.
- dynamic-color-2 to ciemnoszary (#3A3A3A) dla jasnych teł lub jasnoszary (#E6E6E6) dla ciemnych teł.
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.