Paletas de color

Cuando ponemos colores en CSS ulilzamos RGB, RGBA o hexadecimales

RGB y RGBA

RGB significa: RED— GREEN— BLUE
RGBA significa: RED— GREEN— BLUE—ALPHA(Opacidad)

Los hexadecimales

Son un grupo de 6 caracteres (números y letras) que representan un color.
Esos 6 caracteres se agrupan en grupos de 2: el primer grupo representa el rojo, el segundo el color verde y el tercero el color azul.

		Los números y letras de los hexadecimal.

Para crear un color hexadecimal podemos utilizar los siguientes caracteres:

• 0 1 2 3 4 5 6 7 8 9 A B C D E F
  Los números y letras representan la intensidad del color, entre más a la izquierda, menos intenso el color, entre más a la derecha, más intenso el color.
  Con esto podemos crear diferentes intensidades de un color, por ejemplo:

    #27ECC0
  

Este hexadecimal tiene una intensidad de rojo 27, una intensidad de verde EC y una intensidad de azul C0.

PALETA DE COLOR.
Para construir una paleta de color, tenemos que tener claro que tipo de colores existen:
• Colores primarios: Amarillo, azul y rojo.
• Colores secundarios: Son los que resultan de la combinación de los colores primarios.
• Colores terciarios: Son los colores intermedios que hay entre un color primario y un color secundario.
Tipos de paletas:
• Combinación monocromática: Diferentes tonos de un mismo color. (diferente opacidad).
• Combinación análoga: Resulta de combinar un color primario con uno secundario y uno terciario que estén seguidos en el circulo cromático.
• Combinación complementaria: Consiste en combinar un color primario con un color secundario que no estén seguidos en el circulo cromático. Estos colores estan opuestos en el circulo.
• Combinación triádica: Se trata de combinar tres colores que estén en el circulo cromático de forma que forman un triángulo dentro del circulo.
• Combinación tétrada: Combinamos 4 colores elegidos al formar un rectángulo dentro del circulo cromático. Se eligen dos primarios y dos secundarios.

La verdad de las verdades… es que en el diseño de una interfaz usas muchos más colores. Es cierto que defines una paleta con 2 o más colores base. Pero de ahí, debes crear colores para sus contextos, colores para las alertas, colores para jerarquizar los textos.

En mi último proyecto UI he creado la siguiente paleta de 15 colores para un cliente que solo tenia verde y negro como requerimientos de color. (Los rojos y azules son para alertas de error y de lectura de datos)

Yo lo hago así:

Como variables (En Sass en este caso) para usarlos en todo el proyecto.

Dato curioso

Cabe aclarar que en la Física (específicamente en la óptica)

los colores primarios son rojo, verde y azul el famoso RGB.

Y en la Química son los mencionados en la clase rojo, azul y amarillo ó Cian, Magenta y Amarillo

Estas diferencias se deben al proceso en como se combinan los colores en la Física se obtiene combinando luz de diferentes colores como en las pantallas de nuestros dispositivos y en la Química se obtiene combinando sustancias por ejemplo las impresoras

Paleta de color

Para poder construir una paleta de color debemos de tener claro los tipos de colores que existen

1. Colores primarios
   • Amarillo
   • Azul
   • Rojo
2. Colores secundarios
   • Son los que resultan de la combinación de los primarios
   • Amarillo + Azul = Verde
   • Verde + Rojo = Morado
   • Rojo + Amarillo = Naranja
3. Colores terciarios
   • Son los que se encuentran en el circulo cromatico entre un color primario y un secundario
   • Son la transición entre amarillo a verde
   • Verde a azul
   • Son los colores intermedios que resultan de la combinación de un color primario y un secundario

Diferentes tipos de paletas

• Combinación monocromática (Un color + diferente opacidad)
• Combinación análoga (Consiste en combinar un color primario, uno secundario y uno terciario que estén seguidos en nuestro circulo cromático)
• Combinación complementaria (Consiste en combinar un color primario más un secundario)
  Estos colores están opuestos el uno al otro en un circulo cromático y se pueden encontrar en cualquier gráfica del circulo cromático
• Combinación triádica (Consiste en crear un triángulo en la mitad del circulo cromático y a medida que se va girando el triángulo se visualiza como cada una de las puntas del triángulo apunta a un color)
• Combinación tétrada (Consiste en crear 4 colores, 2 primarios y dos secundarios. Se crea un rectángulo en medio del circulo cromático y se va girando)

Herramientas útiles para crear paletas de color

• Adobe color

Para los que anotan en .md

## Paleta de color
Para poder construir una paleta de color debemos de tener claro los tipos de colores que existen
1. Colores primarios
	- Amarillo
	- Azul
	- Rojo
2. Colores secundarios
	- Son los que resultan de la combinación de los primarios
	- Amarillo + Azul = Verde
	- Verde + Rojo = Morado
	- Rojo + Amarillo = Naranja
3. Colores terciarios
	- Son los que se encuentran en el circulo cromatico entre un color primario y un secundario
	- Son la transición entre amarillo a verde
	- Verde a azul
	- Son los colores intermedios que resultan de la combinación de un color primario y un secundario

## Diferentes tipos de paletas
- Combinación monocromática (Un color + diferente opacidad)
- Combinación análoga (Consiste en combinar un color primario, uno secundario y uno terciario que estén seguidos en nuestro circulo cromático)
- Combinación complementaria (Consiste en combinar un color primario más un secundario)
	Estos colores están opuestos el uno al otro en un circulo cromático y se pueden encontrar en cualquier gráfica del circulo cromático
- Combinación triádica (Consiste en crear un triángulo en la mitad del circulo cromático y a medida que se va girando el triángulo se visualiza como cada una de las puntas del triángulo apunta a un color)
- Combinación tétrada (Consiste en crear 4 colores, 2 primarios y dos secundarios. Se crea un rectángulo en medio del circulo cromático y se va girando)

Herramientas útiles para crear paletas de color
- [Adobe color](https://color.adobe.com/es/explore)

Mis Notas

$color-white: #fff;
$color-black: #000;
$color-primary: #ffd000;
$color-secondary: #181d20;
$color-terciary: #ff5252;
$color-cuaternary: #181d20;

Dejo mis apuntes, espero les sirva 😃

=> Aquí otra representación de los tipos de paletas de colores <=

Ahora los vemos con claridad los colores complementarios

Les comparto el mapa mental de la clase.

🤔 Las paletas de color, permiten definir los colores de las aplicaciones.

🤔
Muchas vemos hemos experimentado dificultad para combinar o elegir una paleta de colores para nuestro proyecto, ya sea una aplicación web, un presentación en ppt, etc. (se recomienda entre 3 y un máximo de 5), pero ¿Me puedo basar en alguna referencia para hacer esta elección mucho más fácil?. Pues si.🤩 -->Justamente en la teoría de colores.

Teoría de colores: el círculo cromático.

Los colores se subdividen principalmente en 3:

1. Colores primarios
   Son el rojo🔴, azul 🔵y amarillo🟡.
   

   

2. Colores secundarios
   Se obtienen de la mezcla de los colores primarios. Son el anaranjado🟠 , verde 🟢y violeta🟣 .
   

   

3. Colores terciarios
   Se obtienen de la mezcla de un color primario y uno secundario.
   

   

¿Cómo utilizar la teoría de colores para elegir nuestra paleta de colores?.

📌 Podemos elegir entre:

1️⃣ Paleta monocromática: Representada por un color con diferentes intensidades (opacidad)

2️⃣ Paleta análoga: Colores que están uno al costado del otro en el círculo cromático.

3️⃣ Complementaria: Son colores opuestos en el círculo cromático. Son colores de alto contraste e intensidad. Ejemplo: Heineken

4️⃣ Complementarios divididos: Se determina eligiendo un color del círculo más los 2 adyacentes a su color opuesto.

5️⃣ Tríada equidistante: Representada por 3 colores que sean equidistantes en el círculo cromático (forman un triángulo)

6️⃣ Complementarios dobles (tetrádicas): Representada por 2 pares de colores opuestos (2 paletas complementarias) Ejemplo: Google

Se recomienda elegir a un color dominante y ajustarle la saturación al resto de colores para que combinen mejor:
_

Me gusta mucho la organizacón del proyecto.

Suena interesante la paleta de color monocromatica, creo que implementaré es

Espero les sirva, a mi me ha funcionado mucho este esquema:

Con está clase por fin puede entender como crear una paleta de colores correctamente.

Hay muchas herramientas! gracias por la información.

Tipos de Colores.

Primarios: Rojo Azul, etc.

Secundarios: Resultado de combinar colores primarios.

Terciarios: Resultado de combinar colores secundarios.

Monocromáticos: cambiar la opacidad del color.

Análogos: Color primario + secundario + terciario, que sean adyacentes.

Complementarios: Primario + secundario que sean opuestos.

Triádica: se forma por 3 colores ubicados en las esquinas del triangulo interior.

Tetráda: se forma por 2 primarios + 2 secundarios que forman un rectángulo.

#Genial

Gracias por el vídeo!

Viendo que el curso es nuevo le haría una critica constructiva para futuras actualizacion:
Que se agreguen ejemplos de cómo se veria una pagina aplicando todos los conocimientos explicados para no quedarnos solo en teoria =)

13.-Paletas de color

Colores primarios (amarillo, azul y rojo), secundarios(verde, morado, naranja) y terciarios (están entre los primarios y los secundarios, su transición).

Hay diferentes tipos de paletas que podemos usar:

Combinación monocromática: un color + diferente opacidad.

Combinación análoga: Combinar primario + secundario + terciario que estén seguidos en el círculo cromático.

Combinación complementaria: primario + secundario, estos están opuestos el uno al otro en el círculo cromático.

Combinación tríadica: crear un triángulo en la mitad del círculo cromático, cuando gira podemos ver como las puntas apuntan a un color.

Combinación tétrada: Combinar 4 colores, 2 primarios y 2 secundarios. Se crea un “rectángulo” en medio del círculo cromático y se va girando.

ahora entiendo de donde venia ese concepto de los colores en las plantillas de IONIC. =)

Combinación complementaria

Colores: Primario, secundario y terciario

Herramientas para crear paletas de colores

Combinación triádica

Combinación tétrada

Combinación monocromática

Combinación análoga

PALETAS DE COLOR

• Combinación monocromática - un solo color que cambia los niveles de saturación.

• Combinación análoga - resulta de crear nuestra paleta de colores eligiendo un color u sus vecinos dentro del circulo cromático.

• Combinación complementaria. Es el resultado de elegir dos colores opuestos de tú círculo cromático.

• Combinación Tríadica. Se elige un color y se crea un triangulo para elegir los otros.
  Combinación Tétrada. Se elige dos colores primarios y se elige los otros dos creando un rectángulo.

Una paleta de colores es un conjunto de colores que combinan bien. Las paletas de colores a menudo se usan para diseñar algo con una apariencia consistente. Las paletas de colores son utilizadas por diseñadores de logotipos, diseñadores gráficos, ilustradores, desarrolladores web y otros artistas. Una buena paleta de colores es fundamental para el diseño visual profesional.

A ver así:

$color-white: #fff;
$color-black: #000;
$color-primary: #DBD44D;
$color-secondary: #F0CB5E;
$color-terciary: #D9974A;
$color-cuaternary: #F87F54;

Gracias platzi!!!

Interesante!

Paletas de color
Formamos nuestra paleta con colores
-Primarios
-Secundarios
-Terciarios

Acabo de hacer el examen en dónde preguntan si colores primarios, secundarios y terciarios forma parte de la paleta de colores, algo que se afirma en los primeros segundos del video pero se me califico como erróneo, no entiendo si es un error, en fin, gracias.

Adobe color se me hace una herramienta muy completa si lo que quieres es tener control total de los colores que deseas tener

Por lo tanto, crear una paleta de colores es una posibilidad para generar diferentes sensaciones en la percepción del espacio. En cualquier caso, los colores forman un dispositivo fundamental para intensificar o disminuir la presencia de elementos, facilitar o complicar la lectura del entorno en su conjunto.

Hay infinitas paletas de colores y se pueden combinar como se desee. Pero también hay una ciencia que explica por qué ciertos colores combinados no gustan. Y por eso se siguen unas directrices.

Existe colores primarios, secundarios, terciarios.
- Primarios: Rojo, Azul y Verde.
- Secundarios: Combinación de primarios.
- Terciarios: Interseción entre un primario y un terciario.

COMBINACION MONOCROMÁTICA: un color + diferente opacidad.

COMBINACIÓN ANÁLOGA: Un primario, secundario y terciario que esten seguido en el círculo cromático.

COMBINCIÓN COMPLEMENTARIA: Un primario con un secundario opuesto al otro.

COMBINACIÓN TRIÁDICA: Triángulo en el círculo cromático.

COMBINACION TÉTRADA: Rectagulo y lo vamos girando en el círculo cromático.

Me gusto esta paleta ya que tiene el amarillo relacionado a la comida

![](

Gracias profe por la explicación…

Las paletas de color son conjuntos de colores cuidadosamente seleccionados que se utilizan para crear una estética visual coherente y atractiva en un diseño. Aquí hay algunos tipos comunes de paletas de color:

Monocromática: Esta paleta se compone de diferentes tonos y saturaciones de un solo color base. Es una opción segura y fácil de usar que crea una sensación de armonía y cohesión en el diseño.

Análoga: Una paleta análoga consiste en colores que están adyacentes entre sí en el círculo cromático. Estos colores suelen crear una sensación de armonía y son ideales para diseños que requieren una apariencia suave y cohesionada.

Complementaria: Una paleta complementaria utiliza colores que están opuestos entre sí en el círculo cromático. Estos colores crean un fuerte contraste y pueden usarse para destacar elementos importantes en el diseño.

Triádica: Esta paleta utiliza tres colores equidistantes entre sí en el círculo cromático. Proporciona un buen equilibrio entre contraste y armonía y es ideal para diseños vibrantes y llamativos.

Tetrádica (cuadrada o rectangular): Esta paleta utiliza cuatro colores que están dispuestos en forma de cuadrado o rectángulo en el círculo cromático. Proporciona un alto contraste y una amplia variedad de opciones de color.

Split-Complementaria: Esta paleta utiliza un color principal y los dos colores adyacentes a su complementario. Proporciona un contraste fuerte pero menos intenso que la paleta complementaria y crea una apariencia equilibrada.

Al seleccionar una paleta de color para un proyecto de diseño, es importante considerar el contexto, el mensaje que se quiere transmitir y las preferencias del público objetivo. Las herramientas en línea y los generadores de paletas pueden ser útiles para explorar diferentes combinaciones de colores y encontrar la paleta perfecta para tu diseño.
(el chat)

.

Paletas de color

Para poder construir una paleta de color primero tenemos que tener en cuenta los tipos de colores que existen, los cuales son: Primarios, Secundarios y Terciarios

Colores Primarios

Son los colores básicos, de los cuales podemos crear los demás colores, estos colores primarios son el Azul, Amarillo y Rojo.

Colores Secundarios

Son los colores resultantes de la combinación de los colores primarios, por ejemplo: Amarillo + Azul = Verde

Colores Terciarios

Son colores que resultan de la combinación de un color primario y un color secundario, estos colores suelen tener tonos intermedios entre el primario y el secundario, por ejemplo: Azul + Verde = Verde Agua

Tipos de paletas

Ya hay varios tipos de paletas que podemos utilizar. A continuación veremos algunos ejemplos.

Combinación monocromática

Consiste en tener un solo color, pero cambiando los niveles de opacidad

Combinación análoga

Consiste en usar una combinación de colores continua siguiendo según su tipo de color. Esto quiere decir que emplearemos un color primario, un color secundario directo del color primario y un terciario resultante de la combinación del color primario y secundario. Por ejemplo:

• Primario = Azul
• Secundario = Verde (Resulta de mezclar Amarillo y Azul)
• Terciario = Verde Agua (Resulta de mezclar Verde y Azul)

Combinación complementaria

Esta mezcla consiste en tomar un color primario y un color secundario, el color secundario deberá ser el opuesto al primario de acuerdo al círculo cromático.

Combinación triádica

Consiste en utilizar un círculo cromático, y dentro de este dibujar un triángulo equilátero, en donde cada punta representara un color de nuestra paleta.

Combinación tétrada

Consiste en seleccionar dos colores primarios y dos secundarios, estos colores se seleccionarán igual haciendo uso del círculo cromatico, en el cual dibujaremos un rectángulo y las esquinas definirán la combinación de colores.

Combinación tétrada

Combinación triádica

Combinación análoga

Combinación monocromática

Empezamos escogiendo los colores uwu

yo lo que hago creo variables de colores que voy usar en el proyecto lo hago al incio del style.css

¡¡Genial!! A crear nuestra propia paleta de colores.

muy buena clase !

Importante complementar el conocimiento sobre colores con el Curso de Uso y Manejo del Color

hola

Muy buena clase!

Seria Genial que la presentación de la clase la dejara en PDF… Saludos @teamPlatzi

Muy bien explicado

No se si mi paleta tenga sentido

Existe algun recurso de IA para analizar el impacto del color en el producto

aquí les comparto el circulo cromático, para los desean saber sobre el color

Al fin aprendo esto 😦