Konwersja kolorów
#ca4e4e
≈ Chestnut Rose
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.
Podzielony dopełniający
Jeden kolor i dwa sąsiadujące z jego dopełnieniem. Odważny jak bezpośrednie dopełnienie, ale bardziej wszechstronny.
Triada
Trzy kolory równomiernie rozmieszczone na kole barw, każdy w odległości 120 stopni od siebie. Najlepiej pozwolić jednemu kolorowi dominować, a pozostałe wykorzystać jako akcenty.
Analogiczne
Trzy kolory o tej samej luminancji i nasyceniu, z odcieniami sąsiadującymi na kole barw, oddalonymi o 30 stopni. Płynne przejścia.
Monochromatyczne
Trzy kolory o tym samym odcieniu z wartościami luminancji +/-50%. Subtelne i wyrafinowane.
Tetrada
Dwa zestawy kolorów dopełniających, oddzielone o 60 stopni odcienia.
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
Każdy jest geniuszem. Ale jeśli oceniasz rybę po jej zdolności do wspinania się na drzewo, całe życie będzie wierzyła, że jest głupia.