Przewodnik nad sekundarną paletą kolorów

Paleta drugoplanowych kolorów

Zakwalifikuj główną nazwę marki dodatkowymi odcieniami do uzupełnienia diagramów, znaczników, ilustracji i drugoplanowych stanów interfejsu użytkownika.

Drugoplanowe kolory dostarczają różnorodności dla visualizacji danych, znaczników, stanów pustych oraz przycisków drugoplanowych. Nie powinny one zdominować głównych kolorów i muszą być dostępne w kontekście tekstu i ikon.

Wyróżnienia, tagi, serie wykresu 3.

Ostrzeżenia, trendy wzrostu/spadku, mapy ciepła (heatmap).

Znakowe elementy, serii wykresów 4, akcenty ilustracji.

demo na żywo · powiązana symulacja● LIVE

Dostosowanie trybu ciemnego i jasnego

Desaturować i zgrubiać w trybie ciemnym, aby zmniejszyć błysk. Przykład: magenta.500 → #c026d3; orange.500 → #ea580c; teal.600 → #0d5f59.

Przyciski sekundarnego przycisku: tło teal.600, tekst biały; nadkreślenie teal.500.

Często zadawane pytania

Jakie powinno być poziom zasycania dla sekundarnych kolorów?

Ogranicz wysokie-zasycone kolorzy do ≤15% ekranu, aby uniknąć nadmiernego obciążenia widocznościowego i utrzymanie czytelności.

Jak powinny być publikowane tokeny w różnych systemach projektowania (CSS, JSON, Figma)?

Publikuj tokeny w CSS/JSON/Figma z mapowaniem semantycznym: --color-chart-series-2 → teal.600, --color-badge-info → cyan.500. Włącz odpowiedniki ciemne.

Ile różnych sekundarnych kolorów powinno znaleźć się w paletie?

Ile sekundarnych kolorów? 4–6 różnych tonów. Czy możemy dodać gradacje? Tak, zrestrykowana ilość dla heroi/ilustracji. Czy potrzebujemy odcieni/twardeń? Podaj co najmniej trzy etapy dla każdego tonu w celach stanowych i diagramów.

Wypróbuj na żywo

Wszystko powyżej działa bezpośrednio w Twojej przeglądarce — otwórz Hash Function Avalanche Visualizer i zmieniaj parametry podczas działania. Nic nie jest instalowane ani przesyłane na serwer, cały model działa w jednej karcie.

▶ Otwórz symulację Hash Function Avalanche Visualizer