Konwersja kolorów
#e24826
≈ Cinnabar
Wariacje
Celem tej sekcji jest dokładne uzyskanie cieni (przez dodanie czystej czerni) i tonów (przez dodanie czystej bieli) wybranego koloru w przyrostach co 10%.
Pro Tip: Używaj odcieni dla stanów najechania kursorem i cieni, odcieni dla świateł i tła.
Cienie
Ciemniejsze odmiany tworzone przez dodanie czerni do koloru bazowego.
Tony
Jaśniejsze odmiany tworzone przez dodanie bieli do koloru bazowego.
Typowe przypadki użycia
- • Stany komponentów UI (najechanie kursorem, aktywny, wyłączony)
- • Tworzenie głębi za pomocą cieni i świateł
- • Tworzenie spójnych systemów kolorów
Wskazówka dotycząca systemu projektowania
Wariacje te stanowią podstawę spójnej palety kolorów. Wyeksportuj je, aby zachować spójność w całym projekcie.
Kombinacje kolorów
Każda harmonia ma swój własny nastrój. Użyj harmonii, aby stworzyć kombinacje kolorów, które dobrze ze sobą współgrają.
Jak używać
Kliknij dowolny kolor, aby skopiować jego wartość szesnastkową. Udowodniono matematycznie, że te kombinacje tworzą wizualną harmonię.
Dlaczego to ma znaczenie
Harmonie kolorów tworzą równowagę i wywołują określone emocje w Twoich projektach.
Dopełniający
Kolor i jego przeciwieństwo na kole barw, +180 stopni odcienia. Wysoki kontrast.
Split-uzupełniający
Kolor i dwa sąsiadujące z nim kolory dopełniające, o +/-30 stopni od wartości przeciwnej do koloru głównego. Wyrazisty jak kolor dopełniający, ale bardziej wszechstronny.
Triadyczny
Trzy kolory rozmieszczone równomiernie na kole barw, każdy w odstępie 120 stopni. Najlepiej pozwolić jednemu kolorowi dominować, a pozostałe wykorzystać jako akcenty.
Analogiczny
Trzy kolory o tej samej jasności i nasyceniu, z odcieniami sąsiadującymi ze sobą na kole barw, oddalonymi od siebie o 30 stopni. Płynne przejścia.
Monochromatyczny
Trzy kolory o tym samym odcieniu i wartościach jasności +/-50%. Subtelne i wyrafinowane.
Czterotrodowy
Dwa zestawy dopełniających się kolorów, oddzielone odcieniem o 60 stopni.
Zasady teorii kolorów
Równowaga
Używaj jednego dominującego koloru, wspieraj go drugorzędnym i akcentuj oszczędnie.
Kontrast
Zapewnij wystarczający kontrast dla czytelności i dostępności.
Harmonia
Kolory powinny współgrać ze sobą, tworząc jednolite wrażenia wizualne.
Kontroler Kontrastu Kolorów
Przetestuj kombinacje kolorów, aby upewnić się, że spełniają one standardy dostępności WCAG w zakresie czytelności tekstu.
Kolor tekstu
Kolor tła
Kontrast
Standardy WCAG
Zaawansowany kontroler kontrastu
Dopasuj za pomocą suwaków, wielu podglądów i nie tylko
Każdy jest geniuszem. Ale jeśli oceniasz rybę po jej zdolności wspinania się na drzewo, to całe życie spędzi w przekonaniu, że jest głupia.