Índice
140 Nombres de Colores y valores hexadecimales compatibles con todos los navegadores:
Comprendiendo los formatos de color en CSS
Palabras clave de color básicas
La manera más sencilla de comenzar a experimentar con colores en CSS es utilizando palabras clave básicas. Estas son nombres de colores comunes como “rojo,” “azul,” “verde,” “amarillo,” y muchos más. Existen más de 140 palabras clave de color reconocidas, ofreciendo un punto de partida decente para elecciones de color simples.
Ejemplo
HTML
<p style="color: orange;">This paragraph will have orange text.</p>
<div style="background-color: purple;">This div will have a purple background. </div>
Palabras clave de color extendidas
¿Desea una paleta de colores más matizada? CSS expande su vocabulario con palabras clave de color extendidas. Estas ofrecen tonos más específicos como “turquesa,” “coral,” “lavanda,” y “azur.” Imagine estos como los primos más “sofisticados” de las palabras clave de color básicas.
Ejemplo
HTML
<h1 style="color: aquamarine;">This heading will have an aquamarine color.</h1>
<button style="background-color: fuchsia;">This button will have a fuchsia background.</button>
Consejo: Una lista completa de palabras clave de color extendidas puede encontrarse en numerosos recursos. Estas a menudo proporcionan una gama sorprendentemente amplia de opciones para la mayoría de las necesidades de diseño.
Códigos de color hexadecimal
Los códigos de color hexadecimal abren un vasto espectro de posibilidades de color. Utilizan un código de seis dígitos precedido por un símbolo de almohadilla (#) y representan la cantidad de rojo, verde y azul (RGB) en el color. Cada par de dígitos controla la intensidad de uno de estos colores primarios, abarcando desde 00 (sin color) hasta FF (intensidad máxima).
Ejemplos
- #FF0000 = Rojo puro
- #008000 = Verde puro
- #0000FF = Azul puro
- #FFFFFF = Blanco
- #000000 = Negro
¡Los códigos hexadecimales permiten más de 16 millones de combinaciones de colores! Son la forma más común de especificar colores en el diseño web debido a su precisión.
Códigos hexadecimales abreviados: Por conveniencia, se puede utilizar una versión abreviada de tres dígitos de los códigos hexadecimales donde cada dígito se duplica (por ejemplo, #FF0033 puede abreviarse como #F03).
Consejo: Los selectores de color en línea y los convertidores facilitan encontrar el código hexadecimal perfecto o convertir entre diferentes formatos de color. ¡Experimente y explore esos recursos!
Colores RGB y RGBA
RGB y RGBA proporcionan una forma numérica de definir colores basándose en sus componentes rojo, verde y azul.
Formato RGB
Utiliza la función rgb() . Cada valor de color oscila entre 0 y 255, representando su intensidad.
Ejemplo
CSS
body {
background-color: rgb(255, 128, 0); /* A bright orange color */
}
RGBA Format
This function adds a fourth value (alpha) to the rgba() function controlling opacity (transparency). The alpha value ranges from 0.0 (fully transparent) to 1.0 (fully opaque).
Example
CSS
p {
color: rgba(0, 0, 0, 0.7); /* Black text with 70% opacity */
}
¿Por qué RGBA? RGBA le permite crear colores semitransparentes, superposiciones, efectos de desvanecimiento y diseños sofisticados que juegan con las capas. Es una herramienta esencial para los diseñadores web modernos.
Tanto RGB como RGBA admiten el uso de porcentajes en lugar de valores numéricos (por ejemplo, rgb(100%, 50%, 0%)). Sin embargo, el formato numérico es generalmente preferido en entornos profesionales debido a su mayor precisión.
Colores HSL y HSLA
HSL significa Tono, Saturación y Luminosidad. Es un modelo de color que ofrece una forma de expresar el color más alineada con cómo los percibimos intuitivamente:
Tono
El color real en la rueda de colores se representa como un grado de 0 a 360:
- 0/360 = Rojo
- 120 = Verde
- 240 = Azul
Saturación
La intensidad o vivacidad del color se expresa como un porcentaje. 0% es escala de grises, mientras que 100% es saturación completa.
Luminosidad
Qué tan claro u oscuro es el color también se expresa como un porcentaje. 0% es negro, 50% es el tono verdadero y 100% es blanco.
HSLA añade el canal alfa para la transparencia, al igual que RGBA.
Ejemplo
CSS
h1 {
color: hsl(240, 100%, 50%); /* A pure blue color */
}
p {
background-color: hsla(0, 100%, 50%, 0.8); /* A semi-transparent red */
}
¿Por qué HSL/HSLA?
HSL/HSLA es a menudo preferido por los diseñadores porque permite pensar en los componentes del color de manera independiente. ¿Desea un tono ligeramente más claro del color que está utilizando? Simplemente ajuste el valor de luminosidad. ¿Necesita una versión menos saturada? Reduzca la saturación. Ofrece una forma natural de manipular colores.
Manipulación de colores en CSS
Funciones de color
CSS proporciona funciones integradas que le permiten modificar colores existentes directamente dentro de sus hojas de estilo. Este enfoque dinámico le otorga una flexibilidad increíble. Examinemos algunas funciones clave:
lighten() y darken(): Estas funciones toman un color y un porcentaje. Ajustan la luminosidad del color original, haciéndolo más claro u oscuro, respectivamente.
Ejemplo
CSS
p {
color: blue;
}
p.highlight {
color: lighten(blue, 20%); /* Creates a lighter blue for the highlighted text */
}
saturate() y desaturate() Similar a lighten y darken, estas funciones ajustan la saturación (intensidad) de un color por un porcentaje.
Ejemplo
CSS
button {
background-color: hsl(30, 80%, 60%); /* An orange button */
}
button:hover {
background-color: desaturate(hsl(30, 80%, 60%), 30%); /* A less saturated orange on hover */
}
Beneficios de las funciones de color:
Estas funciones optimizan los ajustes, facilitando la creación de variaciones de un color base para mantener un esquema de color consistente en sus diseños.
Colores relativos
Los colores relativos de CSS proporcionan un notable poder de personalización. Le permiten definir colores basados en un color existente. Esto es increíblemente útil al crear una paleta de colores consistente o variaciones entre elementos.
¿Cómo funciona? Utiliza la palabra clave from seguida de un color base. Luego, utiliza variables como r, g, b y a (que representan rojo, verde, azul y alfa) para modificar partes de ese color base.
Ejemplo
CSS
.section-title {
color: blue;
}
.section-title-highlight {
color: from blue lighten(r, 20%) saturate(g, 50%);
/* A color derived from blue, with lighter red and more saturated green components */
}
Los colores relativos son particularmente útiles cuando necesita mantener relaciones de color, incluso si un color base cambia dentro de su diseño web.
Nota: Los colores relativos son una adición bastante reciente a CSS, por lo que, si bien el soporte del navegador está aumentando, es una buena práctica verificar la compatibilidad antes de utilizarlos.
Actualizaciones de manipulación de colores en CSS3
Si bien hemos abordado los métodos principales de manipulación de colores, cabe destacar que CSS3 introdujo varias formas nuevas y emocionantes de trabajar con colores:
- HWB: Este modelo de color significa Tono, Blancura y Negrura. Ofrece otra manera de describir los colores de forma intuitiva para el ser humano, que a veces se prefiere cuando se trabaja con variaciones de color.
- Lab y LCH: Estos espacios de color están diseñados para representar mejor la percepción del color humano, ofreciendo mayor precisión en ciertos contextos.
- Función color-mix(): Esta función le permite mezclar colores de varias maneras directamente dentro de CSS, de manera similar a los modos de fusión en los editores de imágenes.
Si bien estas nuevas características ofrecen flexibilidad adicional, el soporte del navegador puede variar. Siempre verifique la compatibilidad si planea incorporarlas en sus proyectos.
Contraste de color y accesibilidad
Las elecciones de color impactan directamente en la accesibilidad de su sitio web para usuarios con discapacidades visuales. Es esencial un contraste suficiente entre el texto y el fondo para la legibilidad.
- Pautas WCAG: Las Pautas de Accesibilidad al Contenido Web (WCAG) definen relaciones mínimas de contraste para diferentes tamaños y estilos de texto para garantizar que el contenido sea legible.
- Herramientas de verificación de contraste: Numerosas herramientas en línea le ayudan a verificar las relaciones de contraste.
Cabe destacar que Elementor incluye herramientas y características integradas que facilitan la consideración de la accesibilidad en su proceso de diseño. Esta mención sutil se alinea con nuestra estrategia general de integrar Elementor sin problemas en la narrativa.
Recuerde – El diseño accesible no es solo una buena práctica; amplía el alcance y la inclusividad de su sitio web.
Teoría del color para diseñadores web
La rueda de color
El fundamento de la teoría del color radica en la rueda de color. Este diagrama circular organiza los colores según sus relaciones entre sí. He aquí un desglose de sus componentes esenciales:
- Colores primarios: Rojo, amarillo y azul. Estos son los bloques de construcción de todos los demás colores.
- Colores secundarios: Naranja, verde y morado. Se crean mezclando dos colores primarios.
- Los colores terciarios son colores formados al mezclar un color primario y uno secundario (por ejemplo, amarillo-naranja, rojo-violeta).
Comprensión de la rueda de color: La rueda de color es una poderosa herramienta de visualización para entender cómo interactúan los colores y para crear combinaciones de colores intencionales.
Esquemas de color
La rueda de color proporciona un marco para crear paletas de colores armoniosas. Aquí hay algunos esquemas ampliamente utilizados:
Complementario
Colores directamente opuestos entre sí en la rueda de color (por ejemplo, rojo y verde, azul y naranja). Estos crean alto contraste y vivacidad.
Análogo
Colores ubicados uno al lado del otro en la rueda de color (por ejemplo, rojo, rojo-naranja y naranja). Ofrecen una sensación armoniosa y a menudo relajante.
Triádico
Tres colores espaciados uniformemente alrededor de la rueda de color (por ejemplo, rojo, amarillo y azul). Estos esquemas son audaces y dinámicos.
Complementario dividido
Una variación de los colores complementarios en la que se utilizan los dos colores adyacentes al opuesto directo de su color base, creando un equilibrio entre contraste y armonía.
Tetrádico (o doble complementario)
Utiliza dos conjuntos de colores complementarios, a menudo formando un rectángulo en la rueda de color. Esto ofrece una amplia gama de combinaciones de colores con gran versatilidad.
Monocromático
Variaciones de un solo tono utilizando diferentes valores de luminosidad y saturación (por ejemplo, azul claro, azul medio y azul oscuro). Los esquemas monocromáticos evocan una sensación de unidad y elegancia.
Consejos
- Herramientas en línea: Los generadores de esquemas de color pueden ser recursos fantásticos para experimentar y encontrar la combinación perfecta.
- Equilibrio: Si bien las combinaciones audaces pueden ser llamativas, es importante lograr un equilibrio entre la vivacidad y la coherencia visual en su diseño web.
Psicología del color
Las elecciones de color impactan profundamente en cómo las personas perciben y responden emocionalmente a su sitio web. Comprender la psicología del color le faculta para evocar estados de ánimo y asociaciones específicas.
Asociaciones cromáticas comunes (cultura occidental)
- Rojo: Pasión, excitación, energía, pero también peligro o urgencia. ¡Utilícese estratégicamente!
- Azul: Confianza, fiabilidad, calma, profesionalismo. A menudo popular en sitios web corporativos.
- Verde: Naturaleza, crecimiento, armonía, frescura. Frecuentemente vinculado a marcas ecológicamente conscientes.
- Amarillo: Optimismo, felicidad, carácter lúdico. Puede resultar abrumador si se utiliza en exceso.
- Naranja: Calidez, entusiasmo, asequibilidad. Excelente para llamadas a la acción.
- Púrpura: Lujo, sofisticación, creatividad. A menudo utilizado en contextos artísticos o espirituales.
Consideraciones importantes
- Contexto cultural: Las asociaciones cromáticas pueden variar entre culturas. Realice su investigación si se dirige a una audiencia global.
- Identidad de marca: Sus elecciones cromáticas deben alinearse con la personalidad y el mensaje general de su marca.
Un constructor de sitios web como Elementor le permite experimentar e implementar la psicología del color. Sus selectores de color intuitivos y opciones de estilización flexibles facilitan la adaptación del aspecto y la sensación de su sitio web precisamente a la respuesta emocional que desea evocar.
Técnicas avanzadas de color en CSS
Gradientes
Los gradientes crean fusiones perfectas entre dos o más colores, añadiendo profundidad e interés visual a sus diseños web. CSS ofrece varios tipos de gradientes:
Gradientes lineales
Los colores transicionan en una línea recta. Se define una dirección (por ejemplo, “to right”, “to bottom left”), y puntos de color a lo largo del camino.
Ejemplo
CSS
background: linear-gradient(to right, red, orange, yellow);
Gradientes radiales
Los colores transicionan hacia afuera desde un punto central, creando un efecto circular o elíptico.
Ejemplo
CSS
background: radial-gradient(blue, lightblue);
Gradientes repetitivos
Crean efectos de rayas o patrones repitiendo un patrón de gradiente.
Ejemplo
CSS
background: repeating-linear-gradient(45deg, black, black 10px, white 10px, white 20px);
Consejo – Generadores de gradientes: Las herramientas en línea facilitan la creación y personalización de gradientes.
Animaciones y transiciones de color
CSS permite crear cambios de color suaves, añadiendo un toque de interacción y atractivo visual a sus sitios web.
Transiciones
Cambios graduales en las propiedades de color desencadenados por un evento, como pasar el cursor sobre un botón (propiedad transition).
CSS
button {
background-color: blue;
transition: background-color 0.5s ease-in-out;
}
button:hover {
background-color: green;
}
Animaciones
Cambios de color más complejos utilizando fotogramas clave y la regla @keyframes para definir puntos distintos en la secuencia de animación.
CSS
@keyframes color-pulse {
0% { background-color: red; }
50% { background-color: yellow; }
100% { background-color: red; }
}
Aplicaciones
Las animaciones y transiciones de color pueden utilizarse para:
- Elementos interactivos (botones, enlaces)
- Resaltar notificaciones o actualizaciones
- Añadir efectos visuales lúdicos
Nota: ¡Utilice las animaciones con prudencia! Su uso excesivo puede distraer en lugar de mejorar la experiencia del usuario.
Filtros CSS
Los filtros CSS ofrecen una forma poderosa de modificar la apariencia de los elementos en su sitio web, incluyendo imágenes, fondos e incluso texto. Aquí se presentan algunos filtros populares:
- grayscale(): Convierte los colores en tonos de gris.
- sepia(): Aplica un tono marrón vintage.
- saturate(): Aumenta o disminuye la saturación del color.
- contrast(): Ajusta el contraste entre áreas claras y oscuras.
- brightness(): Aclara u oscurece los colores.
- blur(): Añade un efecto de desenfoque.
- invert(): Invierte los colores.
- hue-rotate(): Desplaza los colores a lo largo del círculo cromático.
Ejemplo
CSS
img {
filter: sepia(80%) blur(3px);
}
img:hover {
filter: grayscale(0%); /* Image becomes full color on hover */
}
Consejos
- Los filtros pueden combinarse para lograr efectos únicos.
- Utilice transiciones para crear cambios de filtro suaves al pasar el cursor o interactuar.
Trabajando con variables de color
Las variables CSS (también conocidas como propiedades personalizadas) revolucionan la forma en que se gestionan los colores y se mantiene la consistencia visual en sus sitios web.
Cómo funcionan
Declarar
Las variables se declaran con dos guiones (—) y un nombre personalizado:
CSS
:root {
--primary-color: blue;
--accent-color: orange;
}
Utilizar
Utilice las variables con la función var():
CSS
h1 {
color: var(--primary-color);
}
button {
background-color: var(--accent-color);
}
Beneficios
- Control centralizado: La modificación de una variable de color actualiza todos los usos en toda su hoja de estilo.
- Legibilidad mejorada: Los nombres de variables significativos facilitan la comprensión de su CSS.
- Tematización: Cree diferentes temas de color cambiando dinámicamente los valores de las variables.
Preprocesadores (Sass, Less): Herramientas como Sass y Less extienden CSS con características avanzadas, incluyendo variables de color, anidamiento y funciones de manipulación de color. Si bien no son estrictamente necesarios, optimizan aún más los flujos de trabajo de color.
Nota: Las variables CSS tienen un excelente soporte en los navegadores. Siempre verifique la compatibilidad si se dirige a navegadores más antiguos.
Elección de colores para su sitio web
Marca
Si ya tiene una marca establecida, los colores principales de su sitio web deben alinearse con la identidad de su marca. Esto asegura la consistencia visual y fortalece el reconocimiento de la marca. Considere estos aspectos:
- Personalidad de la marca: ¿Qué emociones o cualidades encarna su marca? Elija colores que reflejen estos rasgos.
- Logotipo: ¿Puede extraer un esquema de color dominante de su logotipo para usarlo como base?
- Materiales de marca existentes: Analice sus materiales de marketing impresos o digitales para identificar temas de color recurrentes.
Público objetivo
Comprender las preferencias y expectativas de su público objetivo es crucial para una elección eficaz de los colores. Considere estos factores:
- Demografía: La edad y el género pueden influir en las asociaciones de color. Por ejemplo, los públicos más jóvenes podrían gravitar hacia paletas más brillantes y audaces, mientras que los públicos de mayor edad podrían preferir tonos más apagados.
- Trasfondo cultural: Los significados de los colores varían entre culturas. Investigue sus mercados objetivo para evitar interpretaciones erróneas.
- Industria y nicho: Industrias específicas a menudo tienen asociaciones de color convencionales (por ejemplo, el sector sanitario con azules y verdes). Analice a sus competidores para identificar patrones comunes y cómo puede alinearse o diferenciarse.
Consejo: Si bien considerar a su audiencia es vital, no permita que anule completamente la identidad de su marca. Esfuércese por lograr un equilibrio auténtico que resuene con su mercado objetivo.
Tendencias de diseño web
Mantenerse al tanto de las tendencias actuales de diseño web puede inspirar paletas de colores frescas y mantener el aspecto moderno de su sitio web. Sin embargo, es esencial equilibrar la modernidad con principios de diseño atemporales:
- Esquemas de color en tendencia: Investigue plataformas como Dribbble o Behance para identificar combinaciones de colores populares.
- Monocromos audaces: El uso de un solo color en diferentes tonos y saturaciones es una tendencia llamativa.
- Paletas retro: ¡La nostalgia está de moda! Los tonos pastel y apagados reminiscentes de décadas específicas pueden causar un impacto memorable.
- Tendencias orientadas a la accesibilidad: Las tendencias que se centran en paletas de alto contraste y amigables para daltónicos son beneficiosas tanto para el diseño como para la inclusividad.
No persiga las tendencias ciegamente. Elija colores que se alineen con la visión a largo plazo de su marca. Incorporar elementos de moda como acentos o en secciones efímeras de su sitio puede ser un buen equilibrio.
Conclusión
Los colores tienen un inmenso poder en el diseño web. Dan forma a la experiencia del usuario, transmiten la identidad de su marca e influyen en cómo las personas perciben su sitio web. Al dominar los aspectos técnicos y artísticos del color, creará sitios web visualmente impresionantes que resonarán con su audiencia.
Puntos clave:
- CSS proporciona una amplia gama de opciones para la manipulación del color, desde palabras clave básicas hasta técnicas avanzadas como degradados y filtros.
- La teoría del color y la psicología son sus aliados al tomar decisiones de diseño intencionales.
- Considere la marca, el público objetivo y las tendencias actuales al elaborar su paleta de colores.
No tema experimentar, probar nuevas combinaciones y encontrar colores que enciendan su creatividad.
Un constructor de sitios web como Elementor simplifica el proceso de implementación de sus hermosos esquemas de color. Su interfaz intuitiva, opciones de personalización de color y características orientadas al rendimiento optimizan el proceso de diseño web para que pueda concentrarse en expresar su visión.
¿Buscas contenido nuevo?
Recibe artículos y novedades en nuestro boletín semanal.
Al introducir tu correo electrónico, aceptas recibir correos electrónicos de Elementor, incluidos los de marketing,
y aceptas nuestros Términos y condiciones y Política de privacidad.
