Co składa się na paletę kolorów marki?

Paleta marki przypisuje każdemu kolorowi określoną rolę. Kolor podstawowy to ten, który ludzie zapamiętują — pojawia się w logo i na głównych przyciskach. Kolor uzupełniający wspiera kolor podstawowy, akcentowy wyróżnia wezwania do działania, a kolor tła i tekstu spajają całą stronę.

Kontrast jest równie ważny jak estetyka. Wytyczne dotyczące dostępności treści internetowych (WCAG) wymagają współczynnika kontrastu co najmniej 4.5:1 między zwykłym tekstem a jego tłem lub 7:1 dla bardziej rygorystycznego poziomu AAA.

Opis narzędzia

Opisz swoją markę w polu „O Twojej marce”: czym się zajmuje, dla kogo jest przeznaczona i jakie wrażenie powinna wywoływać. Wybierz osobowość marki (Profesjonalna, Zabawna, Luksusowa, Minimalistyczna, Wyrazista lub Naturalna) albo pozostaw opcję „Dopasuj do opisu”, a AI określi ją na podstawie Twojego tekstu.

Otrzymasz pięć nazwanych kolorów: Podstawowy, Uzupełniający, Akcentowy, Tło i Tekst. Format wyjściowy zmienia wartości kolorów na HEX, RGB, HSL, CMYK i inne formaty, a przy każdym kolorze znajduje się przycisk kopiowania. Przewodnik użytkowania wyjaśnia, jak stosować każdy kolor, a zmienne CSS udostępniają blok kodu do wklejenia do arkusza stylów. AI ma zadbać o to, by kontrast tekstu z tłem wynosił co najmniej 7:1, a kontrast kolorów podstawowego i akcentowego — co najmniej 3:1.

Przykład

Dla opisu „Lokalna palarnia kawy w Portland. Ciepła, przyjazna i działająca w zrównoważony sposób” możesz otrzymać kawowy brąz jako kolor podstawowy, kremowe tło i terakotowy akcent oraz zmienne CSS takie jak te:

:root {
  --brand-primary: #5b3a29;
  --brand-secondary: #a47551;
  --brand-accent: #d9643a;
  --brand-background: #faf6f0;
  --brand-text: #2b211c;
}

Funkcje

  • Pięć kolorów o jasno określonych rolach — każdy z nazwą i wskazówką dotyczącą zastosowania
  • Sześć osobowości marki lub osobowość określona na podstawie Twojego opisu
  • Kopiowanie kolorów w wybranym formacie lub całego zestawu jako zmiennych CSS

Ograniczenia

Narzędzie samo nie mierzy kontrastu, dlatego przed wdrożeniem sprawdź parę kolorów tekstu i tła za pomocą narzędzia do sprawdzania kontrastu.