{ Sketch }

Cores são parte fundamental do design de um website, sejam como cores de fundo, de borda ou de textos. O framework Sketch fornece até 150 cores para criar diferentes tipos de layout para um website. Essas cores são acessadas por meio de classes específicas. A invocação de uma classe se dá pela especificação de um prefixo, prefix seguido do termo -color acrescido de um sufixo com nome da cor -color-name.

O prefixo indica se o elemento alvo da formatação irá ganhar:

• Cor de fundo, por meio do prefixo bg;

• Cor de borda, por meio do prefixo border;

• Cor de borda para conteúdo multimídia em colunas, por meio do prefixo border-column;

• Cor de texto, por meio do prefixo text.

O nome das cores é dado em inglês, sendo que as palavras que compõem o nome são separadas por hífen. Por exemplo, caso fosse desejável atribuir cor azul a um texto, utilizariamos a classe text-color-blue. Adicionalmente, uma borda de cor azul poderia ser aplicada a um bloco de conteúdo por meio da classe border-color-blue. Veja o exemplo abaixo:

Esse código irá resultar nos seguintes conteúdos:

A tabela abaixo apresenta todos os 150 nomes, com hífen, de cores em ordem alfabética crescente:

O framework Sketch fornece classes para atribuir cor de fundo gradiente em blocos de conteúdo. Para acessar as classes de cores gradientes basta utilizar o prefixo bg-gradient-color acrescido do nome da cor que fará gradiente com até 149 cores disponíveis. As seguintes cores estão habilitadas para o efeito de gradiente com as demais cores:

• white: pode ser combinada com 149 cores, exceto com a cor branca (white), a qual deve-se invocar bg-gradient-color-black-white;

• black: pode ser combinada com 149 cores, exceto com a cor preta (black), a qual deve-se invocar bg-gradient-color-white-black;

• red: pode ser combinada com 149 cores, exceto com a cor vermelha (red), a qual deve-se invocar bg-gradient-color-dark-red-red;

• blue: pode ser combinada com 149 cores, exceto com a cor azul (blue), a qual deve-se invocar bg-gradient-color-dark-blue-blue;

• green: pode ser combinada com 149 cores, exceto com a cor verde (green), a qual deve-se invocar bg-gradient-color-dark-green-green;

• yellow: pode ser combinada com 149 cores, exceto com a cor amarela (yellow), a qual deve-se invocar bg-gradient-color-gold-yellow;

• magenta: pode ser combinada com 149 cores, exceto com a cor magenta, a qual deve-se invocar bg-gradient-color-dark-magenta-magenta;

• cyan: pode ser combinada com 149 cores, exceto com a cor ciano (cyan), a qual deve-se invocar bg-gradient-color-dark-cyan-cyan;

• silver: pode ser combinada com 149 cores, exceto com a cor prata (silver), a qual deve-se invocar bg-gradient-color-gray-silver;

Observe o exemplo:

Esse código irá resultar no seguinte conteúdo: