Poradniki o kolorach

Krótkie, praktyczne poradniki o kolorach na ekranie: formaty, kontrast, palety, tryb ciemny i CSS. Każda liczba jest wyliczona, każdy przykład można skopiować.

OKLCH: format koloru, który wreszcie zgadza się z tym, co widzi okoOKLCH opisuje kolor tym, jak jasny się wydaje, ile ma w sobie koloru i jaką ma barwę. W przeciwieństwie do HSL ta sama wartość jasności naprawdę wygląda równie jasno dla każdej barwy, więc palety, stany hover i dostępny kontrast stają się przewidywalne.28 września 20263 min czytania
APCA czy WCAG 2: której metodzie sprawdzania kontrastu ufaćWspółczynnika kontrastu WCAG 2 wymagają przepisy. APCA to nowszy model, który znacznie lepiej przewiduje czytelność, zwłaszcza w ciemnych motywach i przy nasyconych kolorach. Sprawdzając oba, dostajesz tekst zgodny z przepisami i naprawdę łatwy do czytania.28 września 20263 min czytania
Gamut barw w praktyce: sRGB, Display P3 i kolory spoza gamutuGamut to zbiór kolorów, które może pokazać ekran lub przestrzeń barw. Sieć powstała na sRGB, ale większość telefonów i wiele laptopów wyświetla dziś Display P3, w którym czerwienie, zielenie i pomarańcze są wyraźnie żywsze.28 września 20262 min czytania
Formaty kolorów w praktyce: HEX, RGB, HSL, OKLCH i pozostałeTen sam kolor można zapisać na kilkanaście sposobów. Oto co oznacza każdy format, kiedy go używać i jak ten sam kolor wygląda w każdym z nich.28 września 20262 min czytania
Kody kolorów HEX: jak działa #RRGGBBKod koloru HEX, taki jak #1e90ff, to trzy pary cyfr szesnastkowych: ilość czerwonego, zielonego i niebieskiego światła, każda od 00 (brak) do ff (pełna, 255). Czwarta para ustawia krycie: 80 to około 50%, a ff oznacza kolor w pełni kryjący.28 września 20265 min czytania
Jak dobrać paletę kolorów do strony internetowej lub aplikacjiZacznij od jednego koloru marki, zbuduj z niego skalę od 50 do 950, dodaj lekko zabarwione szarości i cztery kolory statusów, a potem sprawdź każdą parę tekstu i tła pod kątem kontrastu i daltonizmu. Stopnie wybieraj według jasności OKLCH, a nie na oko: na białym tle tekst spełnia WCAG AA, gdy jasność spadnie do około 0,55, niezależnie od barwy.28 września 20266 min czytania
Kolory w trybie ciemnym: jak dobrać tła, tekst i akcentyUżyj ciemnoszarego tła, na przykład #121212, zamiast czystej czerni, złamanej bieli, na przykład #e5e5e5, zamiast czystej bieli oraz jaśniejszych i mniej nasyconych wersji kolorów marki. Sprawdzaj tekst w APCA, a nie tylko w WCAG 2, bo WCAG 2 zawyża kontrast na ciemnych tłach.28 września 20266 min czytania
Harmonia kolorów: komplementarne, analogiczne, triada i inneHarmonia kolorów wybiera barwy pod stałymi kątami na kole barw: 180° dla kolorów komplementarnych, 30° dla analogicznych, 120° dla triady. Obracaj barwę w OKLCH, a nie w HSL, a kolory zostaną równie jasne i żaden nie będzie przypadkiem wyskakiwał przed resztę.28 września 20265 min czytania
CSS color-mix() i kolory względne: rozjaśnienia, hover i przezroczystośćcolor-mix() miesza dwa kolory w wybranej przez ciebie przestrzeni barw, a składnia kolorów względnych pozwala zmienić jeden kanał istniejącego koloru, na przykład oklch(from var(--brand) calc(l - 0.1) c h). Obie działają w przeglądarce, współpracują ze zmiennymi CSS i zastępują większość funkcji kolorów z Sass. Do rozjaśnień i hovera mieszaj w oklab, do przezroczystości w srgb.28 września 20266 min czytania
Paleta kolorów przyjazna daltonistom: jak sprawdzić i poprawić koloryPaleta przyjazna daltonistom sprawia, że każdą parę kolorów da się odróżnić przy protanopii, deuteranopii, tritanopii i w skali szarości. Najpewniejszym rozwiązaniem nie jest specjalna barwa, tylko różnica jasności: kolory oddalone o około 0,2 w jasności OKLCH pozostały rozróżnialne w każdej przeprowadzonej przez nas symulacji. Dodaj do tego ikony lub podpisy, bo sam kolor zawsze kogoś zawiedzie.28 września 20266 min czytania
Kolory Tailwind CSS: paleta OKLCH w v4, własne kolory i odcienieTailwind CSS v4 ma 26 skal kolorów po 11 odcieni, od 50 do 950, czyli 286 kolorów zdefiniowanych w OKLCH jako zmienne CSS, np. --color-blue-500. Własne dodajesz przez @theme { --color-brand-500: oklch(...) }. Ten sam numer stopnia nie oznacza tej samej jasności: blue-600 to najjaśniejszy niebieski, który daje 4,5:1 na białym, a żółty potrzebuje 700.28 września 20266 min czytania