Pomoc:Kolory
- Dla zaawansowanych
- Te informacje dotyczą edytora wikikodu. Brak analogicznych dotyczących edytora wizualnego (Czym to się różni?)
Kolory w Wikipedii są wykorzystywane głównie w szablonach i innych metastronach. Kolorowanie wprost w artykułach spotyka się bardzo rzadko, dlatego umiejętność ustawiania kolorów w kodzie źródłowym jest uznawana za umiejętności zaawansowane i nie jest wymagana od każdego autora Wikipedii.
Subiektywność postrzegania
[edytuj | edytuj kod]Wiele zmiennych zadecyduje o postrzeganym kolorze, samym wyborze barwy i rzeczywistym oddaniu jej na rozmaitych ekranach, w tym natężenie światła w pomieszczeniu czy światła okolicznego na zewnątrz, w przypadku użytkowania telefonu, urządzenia kieszonkowego czy laptopa.
Niezależnie od tego ludzie różnią się w zdolności postrzegania barw. Zasadniczo duża część osób jest kolorystycznie mniej czuła na różnice kolorów od normy dla ogółu, a nawet nie odbiera różnic w przypadku postrzeganych odcieni.
Tabele kolorów
[edytuj | edytuj kod]Kolory Wikipedii
[edytuj | edytuj kod]Istnieją kolory o specjalnym znaczeniu, które są wbudowane w oprogramowanie MediaWiki. Zdefiniowane nazwy kolorów mają znaczenie semantyczne np. var(--color-error) powinien być używany do błędów, a var(--border-color-base) do kolorów ogólnych ramek. Wartości te zmieniają się w zależności od wybranego przez użytkownika motywu (tryb nocny lub dzienny) i mogą się z czasem dostosowywać się do zmian w oprogramowaniu Wikipedii. To dlatego używanie tych kolorów jest zalecane do konstruowania szablonów, gadżetów itp.
Listę wbudowanych kolorów znajdziesz na stronie: Pomoc:Tryb ciemny#Korzystanie ze zmiennych CSS
Kolory nazywane
[edytuj | edytuj kod]| Zestawienie nazw barw[1] | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Kolory bezpieczne dla WWW
[edytuj | edytuj kod]Wartości barw podane szesnastkowo wraz z wymaganym znakiem „#”
(liczba xyz faktycznie oznacza liczbę xxyyzz)
| #000 | #003 | #006 | #009 | #00c | #00f | #300 | #303 | #306 | #309 | #30c | #30f |
| #030 | #033 | #036 | #039 | #03c | #03f | #330 | #333 | #336 | #339 | #33c | #33f |
| #060 | #063 | #066 | #069 | #06c | #06f | #360 | #363 | #366 | #369 | #36c | #36f |
| #090 | #093 | #096 | #099 | #09c | #09f | #390 | #393 | #396 | #399 | #39c | #39f |
| #0c0 | #0c3 | #0c6 | #0c9 | #0cc | #0cf | #3c0 | #3c3 | #3c6 | #3c9 | #3cc | #3cf |
| #0f0 | #0f3 | #0f6 | #0f9 | #0fc | #0ff | #3f0 | #3f3 | #3f6 | #3f9 | #3fc | #3ff |
| #600 | #603 | #606 | #609 | #60c | #60f | #900 | #903 | #906 | #909 | #90c | #90f |
| #630 | #633 | #636 | #639 | #63c | #63f | #930 | #933 | #936 | #939 | #93c | #93f |
| #660 | #663 | #666 | #669 | #66c | #66f | #960 | #963 | #966 | #969 | #96c | #96f |
| #690 | #693 | #696 | #699 | #69c | #69f | #990 | #993 | #996 | #999 | #99c | #99f |
| #6c0 | #6c3 | #6c6 | #6c9 | #6cc | #6cf | #9c0 | #9c3 | #9c6 | #9c9 | #9cc | #9cf |
| #6f0 | #6f3 | #6f6 | #6f9 | #6fc | #6ff | #9f0 | #9f3 | #9f6 | #9f9 | #9fc | #9ff |
| #c00 | #c03 | #c06 | #c09 | #c0c | #c0f | #f00 | #f03 | #f06 | #f09 | #f0c | #f0f |
| #c30 | #c33 | #c36 | #c39 | #c3c | #c3f | #f30 | #f33 | #f36 | #f39 | #f3c | #f3f |
| #c60 | #c63 | #c66 | #c69 | #c6c | #c6f | #f60 | #f63 | #f66 | #f69 | #f6c | #f6f |
| #c90 | #c93 | #c96 | #c99 | #c9c | #c9f | #f90 | #f93 | #f96 | #f99 | #f9c | #f9f |
| #cc0 | #cc3 | #cc6 | #cc9 | #ccc | #ccf | #fc0 | #fc3 | #fc6 | #fc9 | #fcc | #fcf |
| #cf0 | #cf3 | #cf6 | #cf9 | #cfc | #cff | #ff0 | #ff3 | #ff6 | #ff9 | #ffc | #fff |
Gamma
[edytuj | edytuj kod]Podstawowym kalibracyjnym pojęciem jest korekcja gamma[2] Zmiany w gammie powodują, czy treść graficzna wygląda na zaciemnioną czy inaczej niedobrana kolorystycznie. Rożne systemy komputerowe czy wyświetlacze operują na innej wartości gammy, lub właściwości korekcji gammy są zakodowane w ustawieniach kalibracji przestrzeni barw czy kalibracji koloru urządzenia. Kolorystycznie wykalibrowana grafika wymaga zmiany gamma przy przenoszeniu jej do wyświetlenia na kolejne nośniki komputerowe czy w kolejnych wyświetlaczach precyzyjnie.
Składowe koloru
[edytuj | edytuj kod]Oprócz gammy, rozmaite metody przekazują numerycznie kolor danej barwy. Istnieje także możliwość oddania stopnia przezroczystości grafiki czy koloru, czyli wartość tzw. kanału alfa.
Podstawowym systemem do wyrażania barw na komputerze jest absolutna przestrzeń barw o nazwie sRGB. Stanowi ona referencyjną przestrzeń dla HTML i CSS. Istnieją pokrewne, alternatywne, lepiej dostosowane do konkretnych zapotrzebowań graficznych np. Adobe RGB[3] ustalona przez grafików Adobe Systems. Szerzej, RGB to cały system wyrażania barwy trzema składowymi: czerwienią, zielenią i niebieskością. Tradycyjnie piksele ekranów składają się z fosforu świecącego mniej lub bardziej jasno w tylko jednej z tych trzech składowych.
W świecie drukarskim (poligrafii), podobna rolę odgrywa system CMYK, gdzie barwy są wyrażone składowymi cyjanu, magenty, żółci, i czerni.
Istnieją także inne metody specyfikacji barwy, np. HSL, czy znormalizowane przestrzenie mające na celu wyrażenie różnic pomiędzy barwami, czyli metryką delta E. Są to m.in. CIELUV czy CIELab, często stosowanych do porównania barw dla współrzędnych z kolei wyrażonych w przestrzeni CIE xyY, jak w przypadku ustawy o Barwach RP.
W pewnych nowych technologiach wyświetlaczy (OLED), światło jest emitowane za pośrednictwem diod elektroluminescencyjnych, a same wyświetlacze, drukowane niby gazety. Można przyjąć, że odmienne notacje kolorów pojawią się m.in. z powodu zaistnienia nowych metod wyświetlania barw.
Zestawienie kolorów
[edytuj | edytuj kod]Dane podstawowe
[edytuj | edytuj kod]Zazwyczaj kolory oddajemy w RGB. Jest to również najprostszy i najbardziej zwarty zapis barwy, np. #aaa czy LightGray. Poniżej podane są dwa osobne zestawienia „bezpiecznych” barw, które to zalecamy stosować m.in. do kolorowania tabel.
Pierwsza jest wynikiem zalecenia organizacji formułującej standardy sieciowe, utworzonej przez twórców sieci WWW i korporacje komputerowe: konsorcjum W3C.
Druga jest tradycyjnie używanym zdroworozsądkowym ograniczeniem do zaokrąglonych wartości barw[4]. Te zaokrąglenia to tradycyjnie uznawane „bezpieczne kolory w sieci”, heurystycznie stosowane tradycyjnie, na długo przed sformułowaniem w 1999 ustaleń w tym temacie przez W3C, przyjętych przy okazji sformułowania formalnej specyfikacji dla grafiki wektorowej, SVG, a następnej jej minimalistycznej zalecanej implementacji, SVG Tiny.
Jednak same te nazwy i wybór barw jest znacznie starszym dziejowo, bowiem wywodzi się z Projektu Athena, utworzony w 1983 na Massachusetts Institute of Technology, kiedy to skodyfikowano system interfejsu graficznego X Windows. Pomiędzy wtedy i teraźniejszością, systematyką barw „logicznych” opiekowali się oprócz społeczności X Windows przede wszystkim inżynierowie Microsoftu, wdrażając je żywcem jako pierwsi do przeglądarki Internet Explorer komercyjnie.
Specyfikacje SVG 1.1 i SVG Tiny 1.1 po prostu utrwalają te tradycje, nadając możliwość kombinowania i stosowania barw jako jednostek logicznych w nowoczesnych urządzeniach i oprogramowaniu.
Barwy według ustaleń dla SVG przez W3C rzekomo mają działać we wszystkich przeglądarkach, niezależnie od ustawień ekranu przez użytkownika czy limitacji sprzętowych.
Natomiast zaokrąglenia tradycyjne po prostu rozrzucają barwy wystarczająco daleko od siebie, aby były one zazwyczaj odróżniane. Jednak przestrzeń numeryczna RGB nie stanowi absolutnej przestrzeni barw. (Przykładem takowej jest sRGB.) Również, nie nadaje się ani ona ani np. sRGB czy Adobe RGB do porównywania odległości pomiędzy barwami, to jest ich różnic, jak to je postrzega ludzkie oko. Po prostu nie można porównać dowolnych dwóch wartości RGB czy ich różnic (nawet zaokrąglonych) jako różnic postrzeganych przez ludzi równomiernie.
W tym celu ustalono znormalizowane względem ludzkiej percepcji i oka przestrzenie CIELab i CIELUV oraz metrykę Delta E, oraz coraz to nowsze, dokładniejsze kolorymetryczne narzędzia.
Jednak zaistnienie i przetrwanie nazw dla barw dodatkowo pozwala na wskazanie ich zrozumiale, oraz na wykrycie literówki nie sposób do zauważenia gołym okiem w kodzie liczbowym. Nazwy kolorów także pozwalają na ich powielenie mnemonicznie, kiedy nie ma możliwości korzystania z kopiuj-wklej.
Inne metody (profesjonalne)
[edytuj | edytuj kod]Dla pełności opisu sprawy, nowoczesne metody wyszczególnienia barw wywodzą się ze środowisk technicznych grafików i drukarzy, oraz inżynierów od konstrukcji drukarek komputerowych w Adobe Systems (twórców PostScriptu) czy od telewizji analogowej/cyfrowej, czy nawet artystów w szkle, plakacie i fotografii, oraz techników od kolorymetrii, w przeciwieństwie do społeczności programistów i deweloperów przeglądarek sieciowych. Nie są to tylko numerki trzech składowych RGB, czy logiczne nazwy historycznego zbioru powstałego na MIT.
Np. specyfikacja HTML 5 ma zawierać, a obecne specyfikacje SVG 1.1 i SVG Tiny 1.1 już zawierają, możliwość określenia barwy składowymi dziesiętnymi, czy procentowo, czy arbitralnie precyzyjnymi wartościami liczb w przedziale 0..1. Notacje te są wykonane z uwzględnieniem kanału „alfa”, czyli stopnia przezroczystości. Przykładem tu będzie wektor lekko prześwitującej bieli wyrażonej składowymi dziesiętnymi:
- rgba(255,255,255,0.8), alternatywnie to samo:
- rgba(100%,100%,100%,0.8).
Inne ścisłe systemy opisu barwy, np. metodą HSL (ang. od Hue, Saturation, Luminance), są także zaimplementowane (także w MediaWiki, jak i przetwarzane poprawnie przez nowoczesne przeglądarki zgodnie ze specyfikacjami SVG czy SVG Tiny).
Korzyści wypływające z takiej metody barwienia to m.in. naprowadzanie na pożądaną barwę z pobliskiej w miarę intuicyjnie, przez wykonanie „suwakowych” zmian w natężeniu, jasności czy odcieniu, lub dwoma albo nawet wszystkimi trzema na raz. W praktyce bywa to skuteczniejszym od przesuwania sobie podobnych suwaków RGB po przestrzeniach barw, gdzie zazwyczaj występują nieliniowe „uskoki” percepcyjne w kolorze. Sprawy te są naświetlone w specyfikacjach W3C oraz komentarzach udzielonych tamże[5], jak i w artykule Wikipedii o HSL w wersji anglojęzycznej[6].
Zobacz też
[edytuj | edytuj kod]Przypisy
[edytuj | edytuj kod]- ↑ według specyfikacji W3C ('CSS3: Color Module, X11 color names
- ↑ Korekcja gamma opisana wyczerpująco w anglojęzycznej wersji artykułu, en:Gamma correction.
- ↑ W wersji angielskiej Wikipedii: en:Adobe RGB color space
- ↑ wartości wyrażone w notacji RGB w szesnastkowym systemie liczbowym (wyrażonym skrótowo 3 cyframi z domyślnymi powtórzeniami w co drugim miejscu, zamiast wszystkich 6 cyfr dla po kolei: R (czerwony), G (zielony), B (niebieski))
- ↑ Tantek Çelik (Microsoft) <tantekc@microsoft.com>: CSS3 Module: Color — Disposition of Comments. [w:] CSS3 Module [on-line]. W3C, 2003-04-14. [dostęp 2009-02-16]. (ang.).
- ↑ en:HSL