Remain Style Guide
Color de marca
Qué es el color de marca
Es el color propio que representa a la marca; aporta unidad al conjunto de la marca y resulta eficaz porque transmite sin cesar el mismo mensaje al usuario
Uso del color de marca
El color de marca se propone principalmente con 1 primary color y 1 secondary color. Usar pocos colores, en lugar de muchos, realza más el carácter de marca y facilita hacer un diseño centrado en el contenido. Si resulta demasiado monótono, se puede añadir saturación y luminosidad al color de marca para lograr una expresión más rica.
Proporción del color de marca
El primary color debe tener una proporción mayor que el secondary color. Si ocurre lo contrario, puede generar confusión en el usuario sobre cuál es el color principal, por lo que conviene usar el primary color más que el secondary color.
Se eligió #3d5afe como primary color y #ff6e40 como secondary color;
es un ejemplo que muestra que el peso del primary color es mayor que el del secondary color.
La combinación de colores (color scheme)
Al decidir el primary color y el secondary color, la combinación entre colores también es muy importante. La herramienta de rueda de color (círculo cromático) ayuda a lograr combinaciones de color armoniosas. Como todos los colores tanto armonizan entre sí como chocan, ese proceso puede alargarse demasiado o resultar difícil. En ese caso se puede acortar el tiempo usando la herramienta de rueda de color.
Es un ejemplo que muestra cómo se aprovecha en la web la relación entre el primary color (#3d5afe) y el secondary color (#ff6e40), que es una relación de colores complementarios.
Color de interacción (interaction color)
Para el color de interacción se propone usar un color de 1 a 2 tonos más claro y más oscuro que el color por defecto. También se pueden usar escalones mayores de luminosidad y saturación.
Tras fijar el default color, se pueden usar como interaction color unos 4 o 5 escalones de lighten y darken color. Permite una expresión más rica que cuando se toman 1 o 2 colores como interaction color. El lighten color es más claro cuanto más a la izquierda, y el número es más alto cuanto más claro es en comparación con el color básico. El darken color es más oscuro cuanto más a la derecha, y el número es más alto cuanto más oscuro es en comparación con el color básico.
Aprovechando el interaction color como color al pasar el ratón por encima, se puede ayudar al usuario a saber con facilidad sobre qué posición tiene el ratón.
Es un ejemplo que usa el default color como color básico antes de pasar el ratón y el interaction color (lighten-1) como color al pasar el ratón.
Temas: Diseño
Categoría: Recorte/Artículo
%% Fuente: http://styleguide.co.kr/content/color/brand-color.php %%