Opublikowano: 11 grudnia 2025 r.
Masz więc witrynę, którą chcesz utworzyć lub przeprojektować. Może masz już wybrane kolory podstawowe i zastanawiasz się, jak szybko wdrożyć motyw oparty na tych kolorach.
Będziesz potrzebować koloru podstawowego, ale także kolorów dla działań, stanów najechania, błędów i innych potrzeb interfejsu użytkownika. A co z opcjami trybu jasnego i ciemnego? Nagle okazuje się, że potrzebujesz wielu kolorów, co może być przytłaczające.
Dobra wiadomość jest taka, że jeśli chodzi o tworzenie palety w odniesieniu do tokenów kolorów, które definiują Twoją witrynę, i przełączanie się między trybami kolorów, funkcje Baseline mogą wykonać za Ciebie większość pracy. Niektóre z tych technik możesz poznać w prezentowanej wersji demonstracyjnej, czyli playlisty o tematyce kolorystycznej na fikcyjnej stronie Baseline Radio.
Tworzenie bazy z kolorami względnymi
Jeśli masz pomysł na kolor podstawowy motywu, możesz szybko zacząć generować paletę kolorów do wykorzystania w motywie, korzystając z podstawowych zasad teorii kolorów i składni kolorów względnych w CSS.
Załóżmy, że kolor podstawowy to odcień niebieskozielonego, który możesz najpierw zdefiniować w preferowanym formacie kolorów. Następnie możesz użyć dowolnej funkcji koloru, aby utworzyć nowe kolory względem koloru podstawowego:
html {
--base-color: oklch(43.7% 0.075 224);
}
Właściwość niestandardowa --base-color jest tworzona za pomocą funkcji koloru oklch(). OkLCh to cylindryczna forma przestrzeni kolorów Oklab, która określa wartości dla 3 kanałów: L (jasność), C (chroma), H (odcień) oraz opcjonalnego kanału alfa do kontrolowania przezroczystości.
OkLCh to dobry format do tego typu manipulacji kolorami, ponieważ został zaprojektowany tak, aby zapewniać jednolitość percepcyjną. Jeśli na przykład dostosujesz tylko odcień koloru, wynikowy kolor powinien mieć podobną jasność i chromatyczność do koloru oryginalnego. Jest to szczególnie przydatne, aby uniknąć nieoczekiwanych problemów z kontrastem.
Zachowując tę samą jasność i chromatyczność koloru --base-color, możesz dostosować odcień o 120 stopni w obu kierunkach, aby uzyskać paletę triadyczną.
html {
/* ... */
--triadic-color-primary: oklch(from var(--base-color) l c calc(h + 120));
--triadic-color-secondary: oklch(from var(--base-color) l c calc(h - 120));
}
Jak widać na tym przykładzie, składnia koloru względnego używa funkcji koloru, która odwołuje się do koloru źródłowego (--base-color w tym przykładzie) za pomocą słowa kluczowego from i dostosowuje odpowiednie kanały przestrzeni kolorów na podstawie wybranego koloru wyjściowego, który w tym przypadku będzie również kolorem OkLCh.
W wyniku tego otrzymasz ciemnoróżowy kolor dla --accent-color i odcień złota dla --highlight-color. Oba te kolory będą miały taką samą jasność i chromatyczność jak oryginalny kolor --base-color.
html {
/* ... */
--accent-color: var(--triadic-color-primary);
--highlight-color: var(--triadic-color-secondary);
}
html {
/* Input color in the rgb color space*/
--base-color: teal;
/* Output color in oklch. Computes to oklch(0.543123 0.0927099 314.769) */
--triadic-color-primary: oklch(from var(--base-color) l c calc(h + 120));
}
Kolor dopełniający doda 180 stopni do kąta barwy.
html {
/* ... */
--complement-color: oklch(from var(--base-color) l c calc(h + 180));
--border-highlight: var(--complement-color);
}
W przypadku stanu najedź w interfejsie możesz chcieć wyświetlić jaśniejszą wersję danego koloru. Oznacza to zwiększenie wartości kanału jasności. W przypadku stanu aktywnego możesz dodać przezroczystość, dostosowując kanał alfa, lub przyciemnić go, zmniejszając wartość kanału jasności.
html {
/* Darken the --base-color by 15% */
--base-color-darkened: oklch(from var(--base-color) calc(l * 0.85) c h);
/* Assign this color a meaningful variable name */
--action-color: var(--base-color-darkened);
/* Lighten the --action-color by 15% */
--action-color-light: oklch(from var(--action-color) calc(l * 1.15) c h);
/* Darken the --action-color by 10% */
--action-color-dark: oklch(from var(--action-color) calc(l * 0.9) c h);
}
W tym przypadku wyodrębniamy --action-color z --base-color i używamy go w przyciskach i linkach. --action-color ma 2 warianty – jaśniejszy i ciemniejszy – które nadal będą obowiązywać, nawet jeśli --action-color zostanie zmieniony tak, aby odnosił się do innego koloru niż --base-color.
Możesz dostosować kanały za pomocą funkcji matematycznej, np. calc(), lub całkowicie zastąpić kanał nową wartością. Niezmienione kanały są reprezentowane przez odpowiednie litery (np. l w przypadku niezmienionej wartości jasności).
Mieszaj kolory za pomocą color-mix()
W przypadku innych wariantów kolorystycznych możesz zastosować podobne podejście i dostosować inne kanały właściwości niestandardowej --base-color. Możesz też użyć color-mix(), aby dodać odcienie koloru podstawowego do innych elementów projektu.
Kolor --border-color to połączenie koloru podstawowego i nazwanego koloru grey, interpolowane w przestrzeni kolorów oklab. W przypadku użycia jako metody interpolacji kolorów zapewnia jednolite percepcyjnie wyniki.
html {
--base-mix-grey-50: color-mix(in oklab, var(--base-color), grey);
--border-color: var(--base-mix-grey-50);
}
Domyślnie będzie to 50% każdego koloru, ale możesz zwiększyć lub zmniejszyć widoczność danego koloru, dostosowując jego wagę procentową.
html {
--background-mix-base-80: color-mix(in oklab,
var(--background-color) 80%,
var(--base-color));
--surface-light: var(--background-mix-base-80);
}
Alternatywą dla dodawania większej ilości koloru do elementu jest dostosowanie jego kanału chromatyczności za pomocą składni koloru względnego. Obramowanie pól tekstowych w formularzu kontaktowym jest nieco bardziej kolorowe, gdy są one aktywne.
[data-input*="text"] {
--focus-ring: transparent;
/* ... */
&:focus {
--focus-ring: oklch(from var(--border-color) l calc(c + 0.1) h);
}
}
Włączanie trybu jasnego i ciemnego
Gdy masz już zestaw kolorów, musisz znaleźć skuteczny sposób na stosowanie różnych kolorów w trybie jasnym i ciemnym.
Obsługa sygnałów w przypadku motywów jasnych i ciemnych za pomocą właściwości color-scheme
Za pomocą właściwości color-scheme możesz od razu poinformować przeglądarkę, że Twoja witryna może być wyświetlana w trybie jasnym, ciemnym lub w obu tych trybach. Ta właściwość informuje przeglądarkę, w których schematach kolorów element może być wygodnie renderowany.
html {
color-scheme: light dark;
}
Ustawienie color-scheme: light dark w przypadku pseudoelementu :root lub elementu html:
- Informuje przeglądarkę, że strona może być wyświetlana w trybie jasnym lub ciemnym.
- Zmienia domyślne kolory interfejsu przeglądarki, aby pasowały do ustawień systemu operacyjnego.
Aby wcześniej poinformować roboty o tym, że Twoja strona obsługuje tryb jasny i ciemny, możesz też zasygnalizować obsługę przełączania schematu kolorów, dodając element <meta> w sekcji <head> dokumentu.
<head>
<!-- ... -->
<meta name="color-scheme" content="light dark">
</head>
Ustawianie wariantów „jasny” i „ciemny” za pomocą funkcji light-dark()
Jako autor możesz być przyzwyczajony do ustawiania kolorów strony za pomocą zapytania prefers-color-scheme @media.
@media (prefers-color-scheme: light) {
html {
--background-color: oklch(95.5% 0 162);
--text-color: black;
}
}
@media (prefers-color-scheme: dark) {
html {
--background-color: oklch(22.635% 0.01351 291.83);
--text-color: white;
}
}
To świetnie sprawdza się w przypadku kolorów i stylów kontrolowanych przez autora, ale jak wspomnieliśmy w poprzedniej sekcji, nadal musisz color-scheme zaktualizować kolory interfejsu przeglądarki.
Zmiana kolorów strony za pomocą zapytania prefers-color-scheme oznacza też powielanie kodu, ponieważ musisz zdefiniować kolory dla każdego trybu osobno.
Jeśli jednak ustawisz color-scheme na całej stronie (lub w określonych elementach), możesz użyć funkcji light-dark(), aby ustawić kolory dla każdego trybu w jednej linii kodu.
Funkcja akceptuje 2 kolory. Pierwszy jest używany, gdy schemat kolorów jest ustawiony na „jasny”, a drugi – gdy jest ustawiony na „ciemny”.
html {
color-scheme: light dark;
/* Color custom property values for both light and dark modes */
--base-color: light-dark(oklch(43.7% 0.075 224), oklch(89.2% 0.069 224));
--background-color: light-dark(oklch(95.5% 0 162), oklch(22.635% 0.01351 291.83));
--accent-color: oklch(from var(--base-color) l c calc(h + 120));
--active-color: light-dark(var(--action-color-light), var(--action-color-dark));
/* ... */
}
Podobnie jak w przypadku każdej właściwości niestandardowej, light-dark()ustawienia kolorów można skonfigurować globalnie lub w określonych komponentach, a następnie używać ich w innych miejscach w razie potrzeby.
/* custom property usage */
body {
background-color: var(--background-color);
/* ... */
}
:any-link {
/* ... */
text-decoration-color: var(--accent-color);
}
Zapewnij użytkownikom kontrolę dzięki wbudowanemu przełącznikowi motywów
Dobrze jest mieć motyw, który dostosowuje się do domyślnych ustawień kolorów systemu lub przeglądarki użytkownika, ale możesz pójść o krok dalej i dać osobom odwiedzającym Twoją witrynę możliwość zastąpienia tych domyślnych ustawień kolorów.
Jeśli utworzysz przełącznik motywu, który aktualizuje atrybut data-scheme w elemencie <html>, możesz użyć tego samego atrybutu, aby zmienić color-scheme za pomocą CSS.
html {
color-scheme: light dark;
&[data-scheme="light"] {
color-scheme: light;
}
&[data-scheme="dark"] {
color-scheme: dark;
}
&[data-scheme="green"] {
--base-color-light: oklch(48.052% 0.11875 151.945);
--base-color-dark: oklch(92.124% 0.13356 151.558);
color-scheme: light dark;
}
}
data-scheme="light" i data-scheme="dark" wyświetlają stronę tylko w odpowiednich trybach kolorów. data-scheme="green" można wyświetlać w obu trybach. Zmienia on też kolor --base-color na odcień zieleni, co daje zupełnie nową paletę, ponieważ większość innych kolorów jest oparta na kolorze --base-color.
Rejestrowanie właściwości niestandardowych w @property
Do tej pory kolory w wersji demonstracyjnej były ustawiane jako standardowe właściwości niestandardowe. Możesz też zarejestrować właściwości za pomocą reguły @property, aby korzystać z zalet sprawdzania typu.
Ponieważ --base-color jest używany jako podstawa wielu innych kolorów w interfejsie, warto zadbać o to, aby zawsze był kolorem i miał wartość domyślną.
@property --base-color-light {
syntax: '<color>';
inherits: false;
initial-value: oklch(43.7% 0.075 224);
}
@property --base-color-dark {
syntax: '<color>';
inherits: false;
initial-value: oklch(89.2% 0.069 224);
}
html {
--base-color: light-dark(var(--base-color-light), var(--base-color-dark));
}
Dzięki temu, jeśli wartość --base-color zostanie przypadkowo zmieniona na nieprawidłową, zawsze zostanie przywrócona wartość initial-value ustawiona za pomocą reguły @property.
Rejestrowanie w ten sposób niektórych właściwości umożliwia też płynne animowanie kolorów w linear-gradient().
.main-heading {
background: linear-gradient(in oklch 90deg, var(--text-color) 50%, oklch(from var(--base-color) l c var(--header-hue)));
background-clip: text;
color: transparent;
animation: header-hue-switch 5s ease-in-out infinite alternate;
}
Element .main-heading ma tło linear-gradient(), które jest widoczne przez przezroczysty tekst z właściwością background-clip.
Fragment tekstu zawiera znak hue, który za pomocą składni koloru względnego animuje się od wartości kanału 26.67 do 277:
@keyframes header-hue-switch {
from {
--header-hue: 26.67;
}
to {
--header-hue: 277;
}
}
Dzięki zarejestrowanej właściwości niestandardowej --header-hue animacja może przebiegać płynnie, ponieważ przeglądarka wie, że ta właściwość niestandardowa jest liczbą.
@property --header-hue {
syntax: '<number>';
inherits: false;
initial-value: 100;
}
W przypadku niezarejestrowanej właściwości niestandardowej przeglądarka nie znałaby typu danych --header-hue, więc przejście do liczby byłoby animacją dyskretną, która przeskakiwałaby między stanami bez stopniowej interpolacji.
Podsumowanie
Nowe narzędzia Baseline pomogą Ci szybko utworzyć regulowaną paletę kolorów i sprawniej tworzyć zmienne kolorów. Musisz jednak samodzielnie wybrać kolor i kombinację kolorów.
Dynamiczne tworzenie palety w ten sposób zapewnia elastyczność. Jeśli chcesz zmienić kolor podstawowy marki, wystarczy zaktualizować wartość --base-color, a reszta motywu zostanie dostosowana do tej zmiany. Jeśli dodasz funkcje odtwarzania muzyki, możesz zdecydować, że chcesz dynamicznie zmieniać kolor podstawowy, aby pasował do aktualnie odtwarzanego utworu.
Środki
Logika selektora motywu została zaadaptowana z komponentu przełączania motywów Adama Argyle’a.