Descripción general de los conceptos básicos para establecer un esquema de colores dinámico y configurable
En esta publicación, quiero compartir ideas sobre formas de administrar varios esquemas de colores. en CSS. Prueba la demostración.
Si prefieres ver un video, aquí tienes una versión de YouTube de esta publicación:
Descripción general
Compilaremos un sistema de colores accesible con propiedades personalizadas y calc() para
hacer una página web que se adapte a las preferencias del usuario y que, al mismo tiempo, mantenga la
experiencia mínima. Comenzamos con un color de marca base y construimos un sistema de
variantes a partir de él: 2 colores de texto, 4 colores de superficie y una sombra coincidente.
Esta guía comienza con la definición de todos los colores para cada esquema de colores al frente. Se los utiliza para cambiar la página hasta el final.
La marca
A menudo, el color de una marca ya está establecido y se entrega como
hex o
rgb. Este desafío de la GUI
tiene un color de marca base de #0af. En primer lugar, para este sistema de colores, el valor hexadecimal
necesidades convertidas en
hsl
* {
--brand: #0af;
--brand: hsl(200 100% 50%);
}
Para habilitar un concepto de oscurecimiento o aclaración del color de la marca, por ejemplo, 20%, los 3 canales del valor de color hsl se deben extraer en su propio valor propiedades, como esta:
* {
--brand-hue: 200;
--brand-saturation: 100%;
--brand-lightness: 50%;
}
CSS puede realizar cálculos matemáticos con esas propiedades de color, por ejemplo, calc(var(--brand-lightness) -
20%) para disminuir el valor de luminosidad en un 20%. Esto es fundamental para crear
como CSS, puede mantener todos los colores en la misma familia de matiz ajustando la
las cantidades de saturación y luminosidad de hsl.
Tema claro
Cada variante de color se marcará con su esquema coincidente. En este caso, cada
se le agrega -light.
Marca
Comenzando con el color de la marca, se reconstruye uniendo --brand-hue, --brand-saturation
y --brand-lightness dentro del paréntesis de la función () de hsl.
sin ningún cálculo:
* {
--brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
}
Colores del texto
A continuación, los elementos esenciales de un esquema de colores necesitan colores de texto. En un tema claro, el texto debería ser muy oscuro. Observa que la luminosidad de los siguientes colores es baja, muy por debajo del 50%.
* {
--text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
--text2-light: hsl(var(--brand-hue) 30% 30%);
}
--text1-light, como está muy oscuro con un 10% de luminosidad, mantiene el intenso 100%
para que el color de la marca pueda verse
en el azul marino oscuro y oscuro.
--text2-light, no es tan oscuro como el primer color, que es tan bueno como está
un color secundario y también es mucho menos saturado.
Colores de superficie
Los colores de la superficie son los fondos, bordes y otras superficies decorativas que el texto se ubica sobre o dentro. En un tema claro, estos son los colores claros, como a diferencia de los colores del texto, que eran oscuros. Para crear colores claros con hsl, usaremos valores porcentuales más altos en el tercer valor de luminosidad. También reduciremos la saturación, para que los grises claros no se vean demasiado teñidos.
* {
--surface1-light: hsl(var(--brand-hue) 25% 90%);
--surface2-light: hsl(var(--brand-hue) 20% 99%);
--surface3-light: hsl(var(--brand-hue) 20% 92%);
--surface4-light: hsl(var(--brand-hue) 20% 85%);
}
Se crearon 4 colores de superficie, ya que los colores decorativos suelen necesitar más
variantes, para momentos interactivos como :focus o :hover, o para crear la
de las capas de papel. En estas situaciones, es bueno pasar
--surface2-light cuando se coloca el cursor sobre --surface3-light, lo que genera una
aumento del contraste (99% de luminosidad a 92% de luminosidad, lo que hace que sea más oscuro).
Sombras
Las sombras dentro de un esquema de color están por encima y más allá, pero agregan una naturaleza realista a el efecto y ayudar a que se destaque entre sombras poco realistas basadas en negro. Tareas pendientes esto, el color de la sombra usará la propiedad personalizada mat, será ligeramente saturado con el tono, pero aún muy oscuro. Básicamente, construir un modelo sombra ligeramente azul.
* {
--surface-shadow-light: var(--brand-hue) 10% 20%;
--shadow-strength-light: .02;
}
--surface-shadow-light no está unido a una función hsl. Esto se debe a que el
Se combinará el valor --shadow-strength para crear cierta opacidad, y las necesidades de CSS
las piezas para realizar cálculos. Salta a la sombra de rad
para obtener más información.
Colores de las luces en un solo lugar
No es necesario buscar por todas partes para ver cómo se hacen los colores claros, son todo en un solo lugar en el CSS.
* {
--brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
--text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
--text2-light: hsl(var(--brand-hue) 30% 30%);
--surface1-light: hsl(var(--brand-hue) 25% 90%);
--surface2-light: hsl(var(--brand-hue) 20% 99%);
--surface3-light: hsl(var(--brand-hue) 20% 92%);
--surface4-light: hsl(var(--brand-hue) 20% 85%);
--surface-shadow-light: var(--brand-hue) 10% calc(var(--brand-lightness) / 5);
--shadow-strength-light: .02;
}
Tema oscuro
La mayoría de las marcas no comienzan con un tema oscuro, por lo general, más claro. Por otro lado, los usuarios suelen elegir un tema oscuro para en diferentes contextos, como la noche. Estos factores me llevaron a mantener dos aspectos que debes tener en cuenta con los temas oscuros:
- Los usuarios generalmente estarán a oscuras mientras usen este tema, así que prueba en la oscuro.
- Los colores deben reducir la saturación para no vibrar en la pantalla debido a demasiado intensa.
Marca
El tema claro utilizó los 3 valores de canales de color hsl de marca sin alteraciones, el tema oscuro no. La saturación se reduce a la mitad y la luminosidad se reduce. un 50% relativo.
* {
--brand-dark: hsl(
var(--brand-hue)
calc(var(--brand-saturation) / 2)
calc(var(--brand-lightness) / 1.5)
);
}
Colores del texto
En un tema oscuro, los colores del texto deben ser claros. Los siguientes colores tienen de luminosidad, lo que los acerca al blanco.
* {
--text1-dark: hsl(var(--brand-hue) 15% 85%);
--text2-dark: hsl(var(--brand-hue) 5% 65%);
}
Colores de superficie
En un tema oscuro, los colores de la superficie deben ser oscuros. Los siguientes colores tienen baja iluminación y saturación, con la primera superficie es la más oscura con un 10%.
* {
--surface1-dark: hsl(var(--brand-hue) 10% 10%);
--surface2-dark: hsl(var(--brand-hue) 10% 15%);
--surface3-dark: hsl(var(--brand-hue) 5% 20%);
--surface4-dark: hsl(var(--brand-hue) 5% 25%);
}
Sombras
En un tema oscuro, las sombras pueden ser muy difíciles de ver. Tiene sentido, ya que es difícil
oscurecer algo que ya está bastante oscuro. Aquí es donde
--shadow-strength-dark es muy útil, ya que nos permite oscurecer la
sombras cambiando una variable.
* {
--surface-shadow-dark: var(--brand-hue) 50% 3%;
--shadow-strength-dark: .8;
}
Además, observa cuánta saturación hay en esa sombra. ¿Puedes notar el color cuando miras la interfaz? Intenta quitar la saturación de la Herramientas para desarrolladores, ¿cuál prefieres?
Colores oscuros juntos
* {
--brand-dark: hsl(var(--brand-hue) calc(var(--brand-saturation) / 2) calc(var(--brand-lightness) / 1.5));
--text1-dark: hsl(var(--brand-hue) 15% 85%);
--text2-dark: hsl(var(--brand-hue) 5% 65%);
--surface1-dark: hsl(var(--brand-hue) 10% 10%);
--surface2-dark: hsl(var(--brand-hue) 10% 15%);
--surface3-dark: hsl(var(--brand-hue) 5% 20%);
--surface4-dark: hsl(var(--brand-hue) 5% 25%);
--surface-shadow-dark: var(--brand-hue) 50% 3%;
--shadow-strength-dark: .8;
}
Atenuar tema
Este esquema de colores se trata de organizar la luminosidad y la saturación. Hay debe ser suficiente saturación presente como para tener un tono visible, pero también apenas pasa puntuaciones de contraste, ya que es de todos modos debe ser tenue y con poco contraste.
Marca
* {
--brand-dim: hsl(
var(--brand-hue)
calc(var(--brand-saturation) / 1.25)
calc(var(--brand-lightness) / 1.25)
);
}
Colores del texto
* {
--text1-dim: hsl(var(--brand-hue) 15% 75%);
--text2-dim: hsl(var(--brand-hue) 10% 61%);
}
Colores de superficie
* {
--surface1-dim: hsl(var(--brand-hue) 10% 20%);
--surface2-dim: hsl(var(--brand-hue) 10% 25%);
--surface3-dim: hsl(var(--brand-hue) 5% 30%);
--surface4-dim: hsl(var(--brand-hue) 5% 35%);
}
Sombras
* {
--surface-shadow-dim: var(--brand-hue) 30% 13%;
--shadow-strength-dim: .2;
}
Atenuar todos los colores
* {
--brand-dim: hsl(var(--brand-hue) calc(var(--brand-saturation) / 1.25) calc(var(--brand-lightness) / 1.25));
--text1-dim: hsl(var(--brand-hue) 15% 75%);
--text2-dim: hsl(var(--brand-hue) 10% 61%);
--surface1-dim: hsl(var(--brand-hue) 10% 20%);
--surface2-dim: hsl(var(--brand-hue) 10% 25%);
--surface3-dim: hsl(var(--brand-hue) 5% 30%);
--surface4-dim: hsl(var(--brand-hue) 5% 35%);
--surface-shadow-dim: var(--brand-hue) 30% 13%;
--shadow-strength-dim: .2;
}
Colores accesibles
Observa que la luminosidad más baja en el conjunto de colores de texto oscuro es del 65% y el la mayor luminosidad en las superficies oscuras es del 25%. Eso es el 40% de luminosidad entre ellos. En el Tema claro, hay un 55% de espacio para respirar el tema claro. Cómo mantener las diferencias de luminosidad entre los colores del texto y de la superficie cerca del 40-50% puede ayudar a mantener las relaciones de contraste de color altas, a la vez que método sutil para ajustarlo en caso de que las puntuaciones sean bajas.
Lo llamo "batir el pelo hasta pasar", que es la interacción de golpear valor de luminosidad hasta que una herramienta indique que estoy pasando.
Cada uno de los temas creados en este desafío aprueba las puntuaciones de contraste. El esquema de colores atenuados tiene el contraste más bajo, pero cumple con los requisitos mínimos. Para ayudar a otros miembros del equipo a usar colores contrastantes, es una buena idea crear un nombre de clase que combine el color de la superficie con un color de texto accesible.
.surface1 {
background-color: var(--surface1);
color: var(--text2);
}
.surface2 {
background-color: var(--surface2);
color: var(--text2);
}
.surface3 {
background-color: var(--surface3);
color: var(--text1);
}
.surface4 {
background-color: var(--surface4);
color: var(--text1);
}
Sombra brillante
Los temas usan una clase de utilidad llamada .rad-shadow. Esta sombra se generó
esta herramienta de Sombra suave, que valoro mucho
mucho. Tomé el fragmento generado y lo personalicé con mis propios colores.
cálculos de opacidad. El motivo fue crear una sombra que pudiera ajustar
dentro de cada esquema de colores.
Para lograr esto, creé 2 variables para cada esquema de color a ajustar, una color de la sombra y una intensidad de la sombra. El color es para la saturación y la oscuridad ajustes, mientras que la fuerza es para una manera fácil de aumentar la sombra la intensidad cuando es un esquema de colores oscuros. El resultado final fue algo así.
:root {
--surface-shadow-light: var(--brand-hue) 10% 20%;
--shadow-strength-light: .02;
}
.rad-shadow {
box-shadow:
0 2.8px 2.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
0 6.7px 5.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01)),
0 12.5px 10px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
0 22.3px 17.9px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
0 41.8px 33.4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
0 100px 80px hsl(var(--surface-shadow) / var(--shadow-strength))
;
}
Si fuera más allá con sombras en mi esquema de color, haría la sombra también se orienta una constante de token de diseño, ya que la dirección de la luz debe ser la misma entre todas las sombras del diseño.
Uso de los esquemas de colores
Una vez que se predefinen los colores, es hora de convertirlos en agnósticas a los esquemas. Me refiero a que, como CSS, autor dentro de este proyecto de esquema de colores, rara vez será necesario acceder a un valor del esquema de colores específico. Quiero que sea fácil mantenerse dentro del tema.
Para lograr esto, el uso del esquema de color debe hacerse exclusivamente a través de
las propiedades personalizadas genéricas, que definiremos en un momento. De esta manera,
las personas que usan las variables de diseño no necesitan preocuparse por la combinación de colores que
establecido actualmente, solo necesitan usar los colores de la superficie y del texto. En lugar de
color: var(--text1-light) usa color: var(--text1). Todo sobre adaptación y reorientación
de colores se realiza en un nivel mucho más alto en los CSS.
Si analizamos los estilos conectados del tema claro en el siguiente bloque de código,
conectar una propiedad personalizada genérica con el color específico del tema claro. Ahora todas
usos de var(--brand) se usará el color de marca claro.
Tema claro (automático)
:root {
color-scheme: light;
--brand: var(--brand-light);
--text1: var(--text1-light);
--text2: var(--text2-light);
--surface1: var(--surface1-light);
--surface2: var(--surface2-light);
--surface3: var(--surface3-light);
--surface4: var(--surface4-light);
--surface-shadow: var(--surface-shadow-light);
--shadow-strength: var(--shadow-strength-light);
}
El sitio ahora está usando el tema claro. Es un momento muy divertido y exitoso. Veamos algunos momentos más de esos momentos mientras usamos nuestros colores predefinidos en otros contextos de esquema de colores.
Tema oscuro (automático)
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--brand: var(--brand-dark);
--text1: var(--text1-dark);
--text2: var(--text2-dark);
--surface1: var(--surface1-dark);
--surface2: var(--surface2-dark);
--surface3: var(--surface3-dark);
--surface4: var(--surface4-dark);
--surface-shadow: var(--surface-shadow-dark);
--shadow-strength: var(--shadow-strength-dark);
}
}
Tema claro
[color-scheme="light"] {
color-scheme: light;
--brand: var(--brand-light);
--text1: var(--text1-light);
--text2: var(--text2-light);
--surface1: var(--surface1-light);
--surface2: var(--surface2-light);
--surface3: var(--surface3-light);
--surface4: var(--surface4-light);
--surface-shadow: var(--surface-shadow-light);
--shadow-strength: var(--shadow-strength-light);
}
Tema oscuro
[color-scheme="dark"] {
color-scheme: dark;
--brand: var(--brand-dark);
--text1: var(--text1-dark);
--text2: var(--text2-dark);
--surface1: var(--surface1-dark);
--surface2: var(--surface2-dark);
--surface3: var(--surface3-dark);
--surface4: var(--surface4-dark);
--surface-shadow: var(--surface-shadow-dark);
--shadow-strength: var(--shadow-strength-dark);
}
Atenuar tema
[color-scheme="dim"] {
color-scheme: dark;
--brand: var(--brand-dim);
--text1: var(--text1-dim);
--text2: var(--text2-dim);
--surface1: var(--surface1-dim);
--surface2: var(--surface2-dim);
--surface3: var(--surface3-dim);
--surface4: var(--surface4-dim);
--surface-shadow: var(--surface-shadow-dim);
--shadow-strength: var(--shadow-strength-dim);
}
En este punto, los autores tienen la libertad de utilizar los genéricos de esquema de colores proporcionados como necesario y no debería tener que volver a preocuparse por los temas.
Conclusión
Ahora que sabes cómo lo hice, ¿cómo lo harías? 🙂
Diversifiquemos nuestros enfoques y aprendamos todas las formas de desarrollar en la Web. Crea un CodePen o aloja tu propia demostración, envíame un tweet y la agregaré al Aquí tienes la sección Remixes de la comunidad.
Fuente
Remixes de la comunidad
- @chris-kruining agregó un control deslizante de tono,
colores de estado y modos de contraste para no-preference, more y less:
demostración.