Paletas De Cores Web

Que son as paletas de cores web?

As cores son moi importantes para os deseñadores web e os deseñadores gráficos. Os deseñadores describen as cores que describimos como azul, vermello e verde na vida diaria con códigos como #fff002, #426215. Non importa o tipo de proxecto de codificación que esteas a realizar, é probable que nalgún momento comeces a traballar con cores. Isto será especialmente útil se aprendes a codificar usando HTML, como fan moitas persoas para deseñar páxinas web.

Que significa o código hexadecimal en cores?

O código hexadecimal é unha forma de representar unha cor en formato RGB combinando tres valores. Estes códigos de cores forman parte integrante do HTML para o deseño web e seguen sendo unha forma importante de representar os formatos de cores dixitalmente.

Os códigos de cores hexadecimales comezan co signo de libra ou o hashtag (#) seguido de seis letras ou números. As dúas primeiras letras/números corresponden ao vermello, as dúas seguintes ao verde e as dúas últimas ao azul. Os valores de cor defínense en valores entre 00 e FF.

Os números úsanse cando o valor é 1-9. As letras úsanse cando o valor é superior a 9. p.ex.:

• A = 10
• B = 11
• C = 12
• D = 13
• E = 14
• F = 15

Códigos de cores hexadecimales e equivalentes RGB

Memorizar algúns dos códigos de cores hexadecimales máis comúns pode ser útil para axudarche a predicir mellor cales serán as outras cores cando vexas o código de cores hexadecimales, non só cando queiras usar esas cores exactas.

• Vermello = #FF0000 = RGB (255, 0, 0)
• Verde = #008000 = RGB (1, 128, 0)v
• Azul = #0000FF = RGB (0, 0, 255)
• Branco = #FFFFFF = RGB (255.255.255)
• Marfil = #FFFFF0 = RGB (255, 255, 240)
• Negro = #000000 = RGB (0, 0, 0)
• Gris = #808080 = RGB (128, 128, 128)
• Prata = #C0C0C0 = RGB (192, 192, 192)
• Amarelo = #FFFF00 = RGB (255, 255, 0)
• Roxo = #800080 = RGB (128, 0, 128)
• Laranxa = #FFA500 = RGB (255, 165, 0)
• Borgoña = #800000 = RGB (128, 0, 0)
• Fucsia = #FF00FF = RGB (255, 0, 255)
• Lima = #00FF00 = RGB (0, 255, 0)
• Aqua = #00FFFF = RGB (0, 255, 255)
• Verde azulado = #008080 = RGB (0, 128, 128)
• Oliva = #808000 = RGB (128, 128, 0)
• Azul mariño = #000080 = RGB (0, 0, 128)

Por que son importantes as cores do sitio web?

Podes pensar que non te afectan as cores, pero segundo un estudo, o 85% da xente afirma que a cor ten un gran impacto no produto que compran. Tamén di que cando algunhas empresas cambian a cor dos seus botóns, notaron un aumento ou unha diminución brusca das súas conversións.

Por exemplo, Beamax, unha empresa que fabrica pantallas de proxección, observou un aumento masivo do 53,1% nos clics nas ligazóns vermellas en comparación coas ligazóns azuis.

As cores teñen un gran impacto non só nos clics senón tamén no recoñecemento da marca. Un estudo sobre o impacto mental das cores descubriu que as cores aumentan o recoñecemento da marca nunha media dun 80%. Por exemplo, cando pensas en Coca-Cola, probablemente imaxinarás latas vermellas vibrantes.

Como elixir un esquema de cores para sitios web?

Para decidir que cores debes escoller no teu sitio web ou aplicación web, primeiro debes ter unha boa comprensión do que estás a vender. Por exemplo, se estás tentando conseguir unha imaxe de maior calidade e de gama alta, a cor que debes escoller é o violeta. Porén, se queres chegar a un público máis amplo, azul; É unha cor tranquilizadora e suave que se adapta ben a temas máis sensibles como a saúde ou as finanzas.

Os exemplos anteriores foron probados por moitos estudos. Pero a cor que elixes para o teu sitio web depende da complexidade do teu deseño e dos tipos de combinacións de cores. Por exemplo, se estás a usar unha paleta de deseño web monocromática, é posible que necesites sete ou máis tons desa cor para ter suficiente variedade na pantalla. Debes establecer cores para determinadas partes do teu sitio, como texto, fondos, ligazóns, cores do rato, botóns CTA e cabeceiras.

Agora "Como escoller un esquema de cores para sitios web e aplicacións web?" Botámoslle unha ollada paso a paso:

1. Escolle as túas cores primarias.

A mellor forma de decidir sobre unha cor primaria é examinar as cores que coinciden co estado de ánimo do teu produto ou servizo.

A continuación enumeramos algúns exemplos para ti:

• Vermello: significa emoción ou felicidade.
• Laranxa: denota un momento agradable e divertido.
• O amarelo significa optimismo e felicidade.
• Verde: significa frescura e natureza.
• Azul: significa fiabilidade e garantía.
• Morado: representa unha marca distinguida cunha historia de calidade.
• Marrón: significa un produto fiable que pode ser usado por todos.
• O negro significa luxo ou elegancia.
• Branco: Refírese a produtos elegantes e fáciles de usar.

2. Escolla as súas cores adicionais.

Escolla unha ou dúas cores adicionais que complementen a súa cor principal. Estes deberían ser idealmente as cores que fan que a túa cor principal sexa "abraiante".

3. Seleccione unha cor de fondo.

Escolla unha cor de fondo que sexa menos "agresiva" que a súa cor principal.

4. Seleccione a cor da fonte.

Escolle unha cor para o texto do teu sitio web. Teña en conta que unha fonte negra sólida é rara e non se recomenda.

As mellores paletas de cores web para deseñadores

Se non podes atopar a cor que buscas na colección de paletas de cores web de Softmedal, podes botar unha ollada aos sitios de cores alternativos a continuación:

A selección de cores é un proceso longo e moitas veces require moito axuste para atopar as cores correctas. Neste punto, pode aforrar tempo usando aplicacións web 100 % gratuítas que crean os esquemas de cores relevantes desde cero.

1. Paletón

Paletton é unha aplicación web que todos os deseñadores web deberían coñecer. Só tes que introducir unha cor de semente e a aplicación fará o resto por ti. Paletton é unha opción fiable e unha excelente aplicación web para aqueles que non saben nada de deseño e para principiantes.

2. Cor segura

Se WCAG ten algunha preocupación no seu proceso de deseño, Color Safe é a mellor ferramenta para usar. Con esta aplicación web, podes crear esquemas de cores que combinan perfectamente e ofrecen un contraste intenso segundo as directrices WCAG.

Ao usar a aplicación web Color Safe, asegúrate de que o teu sitio cumpre coas directrices WCAG e é totalmente accesible para todos.

3. Adobe Color CC

É unha das ferramentas gratuítas de Adobe creadas para uso público. É unha elaborada aplicación web onde calquera pode crear esquemas de cores desde cero. Permítelle escoller entre moitos modelos de cores diferentes que mellor se adapten ás súas necesidades. A interface pode parecer un pouco confusa ao principio, pero unha vez que te acostumes a ela non deberías ter ningún problema para escoller fermosas opcións de cores.

4. Ambiente

Ambiance, unha aplicación web gratuíta, ofrece paletas de cores web predefinidas doutros sitios de cores na web. Funciona como unha aplicación web tradicional onde podes gardar cores no teu perfil e crear os teus propios esquemas desde cero. Todas estas paletas de cores web veñen de Colorlovers. A interface de Ambiance facilita a navegación e pon máis foco na interacción de cores para o deseño da IU.

5. 0a 255

0to255 non é exactamente un xerador de esquemas de cores, pero pode axudarche a mellorar os esquemas de cores existentes. A aplicación web móstrache todos os tons diferentes para que poidas mesturar e combinar cores ao instante.

Se che resulta difícil crear un esquema de cores utilizable, podes revisar algunhas das aplicacións anteriores.

As mellores paletas de cores web

Os seguintes sitios usan unha variedade de paletas de cores web con gran efecto. Son coidadosamente seleccionados polas emocións que suscitan e polas emocións que transmiten.

1. Odópodo

Odopod foi deseñado cunha paleta de cores monótona, pero tivo como obxectivo evitar que pareza aburrido cun degradado na súa páxina de inicio. A tipografía grande ofrece un gran contraste. Está claro onde os visitantes queren que fagan clic.

2. Ollo de Tori

O ollo de Tori é un gran exemplo dun esquema de cores monocromático. Aquí, vense os efectos dunha paleta de cores sinxela pero poderosa centrada en tons de verde. Este esquema de cores adoita ser fácil de sacar, xa que un ton dunha cor case sempre funcionará con outro ton da mesma cor.

3. Kit de supervivencia do queixo

O vermello é unha cor moi popular para a paleta de cores dun sitio web. Pode transmitir unha rica mestura de emocións, polo que é versátil. Como podes ver no sitio web de Cheese Survival Kit, é especialmente potente cando se usa en pequenas doses. O vermello é suavizado por cores máis neutras e o azul axuda coas CTA e outras áreas nas que a empresa quere chamar a atención do visitante.

4. Ahrefs

Ahrefs é un exemplo de sitio web que usa libremente a paleta de cores. O azul escuro actúa como a cor predominante, pero existen variacións en todo o sitio. O mesmo ocorre coas cores laranxa, rosa e turquesa.

Preguntas máis frecuentes sobre cores

1. Cal é a mellor cor para un sitio web?

O azul é sen dúbida a opción máis segura xa que é a cor máis popular cun 35%. Non obstante, se todos os teus competidores están a usar o azul, pode ter sentido "diferenciar" a túa oferta e marca. Pero debes asegurarte de non abrumar aos visitantes.

2. Cantas cores debe ter o sitio web?

Considere que o 51% das marcas ten logotipos monocromos, o 39% usa dúas cores e só o 19% das empresas prefire logos a toda cor. Desde aquí, podes ver que os sitios web con 1, 2 e 3 cores teñen máis sentido que tentar crear un sitio web con cores do arco da vella. Non obstante, marcas como Microsoft e Google cren na vantaxe de traballar con máis cores xa que usan polo menos 4 cores sólidas nos seus deseños.

3. Onde debo usar as cores?

As cores atractivas deben usarse con moderación, se non, perderán o seu efecto. Este efecto debe estar en puntos de conversión como botóns "Comprar agora".