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.

Uno más que me parece muy interesante:

Les comparto un par de paginas para obtener palestas de color
https://colorhunt.co/palettes/green
https://coolors.co/palettes/trending

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

Mis Notas

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)

Dejo mis apuntes, espero les sirva 😃

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

Enlace correcto de GitHub
https://github.com/mssroboto/diseno-para-programadores/blob/master/4-app/src/scss/variables/colors-theme-primary.scss

Ahora los vemos con claridad los colores complementarios

Les comparto el mapa mental de la clase.

Además de la herramienta de adobe, también creo conveniente usar esta herramienta llamada Paletton, tiene algunas opciones adicionales que también pueden ayudar mucho.

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

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

Círculo Cromático:

• Colores primarios
  
  
• Colores secundarios
  
  
• Colores Terciarios
  
  
  Fuente: Círculo cromático

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

13. Paletas de color

Existen los colores:

1. Primarios: rojo, amarillo, azul.
2. Secundarios: Es la combinación de colores primarios.
3. Terciarios: Son los que se encuentran en el círculo cromático entre un color primario y un color secundario.

Podemos usar la paleta de **combinación monocromática (**cambiando su opacidad):

Tenemos también la combinación análoga, consiste combinar un color primario, secundario y terciario que estén seguidos en el círculo cromático:

Luego tenemos la combinación complementaria, que consiste en combinar un color primario con un color secundario, y están opuestos el uno del otro.:

También tenemos la combinación triádica, el cual consiste en crear un triángulo en el círculo cromático:

Luego también tenemos la combinación tétrada, la cual junta dos colores primarios y dos secundarios, formando un rectángulo:

Una herramienta útil para ver paletas de colores es:

https://color.adobe.com/explore

Por si se preguntaban por que los colores básicos son rojo amarillo y azul pero en la web usamos rojo verde y azul
https://youtu.be/B1t4Fjlomi8

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

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.

Me gusta mucho la organizacón del proyecto.

Hay muchas herramientas! gracias por la información.

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

.

Gracias profe por la explicación…

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

ADOBE COLOR
https://color.adobe.com/es/create/color-wheel

🤔
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:
_

Fuente: Teoría del color

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

Por aquí les dejo una página muy útil para extraer paletas de color gratis.

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

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

Paletas de colores:
Para entender este tema es necesario conocer los diferentes tipos de colores los cuales se dividen en tres:
• Colores primarios: Se conforma por Amarillo, Azul y Rojo.
• Colores secundarios: Es la unión de los colores primarios:
o Ejemplo:
 Amarillo + Azul = Verde.
 Verde + Rojo = Morado.
 Rojo + Amarillo = Naranja.
• Colores terciarios: Son la transición entre la unión de un color primario con otro.
Hay diferentes tipos de paletas de colores:
• Combinación monocromática: Es la elección de un solo color en diferente opacidad.
• Combinación análoga: Consiste en combinar los tres tipos de colores seguidos.
• Combinación complementaría: Es la combinación de un color primario con uno secundario, se hace basado en el contrario o lado opuesto del círculo cromático.
• Combinación triádica: Consiste en colocar un triangulo en el circulo cromático.
• Combinación tétrada: Consiste en combinar dos colores primarios y dos terciarios.
En la pagina que esta en recursos , se pueden colocar la paleta de colores con su respectiva nomenclatura en Hexadecimal o en este enlace.

https://color.adobe.com/es/create/color-wheel

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.

Existen muchas herramientas para elegir un color o al momento de querer hacerlo sin embargo una de buena interfaz, limpia y agradable es esta página donde tiene métodos para combinar sus colores predilectos e incluso herramientas donde los observas con de acuerdo a ciertas condiciones visuales.

muy buena clase !

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.

Aquí puedes ayudarte con los colores

https://color.adobe.com/es/create/color-wheel

https://color.adobe.com/es/create/color-wheel

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.

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

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.

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

Para crear una paleta de colores sencilla pueden utilzar esta pagina:
Paletton

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.

Otro modo de representar el color en CSS es mediante el método HSL (Hue, Saturation, Lightness o Matiz, Saturación y Luminosidad) que a mi ver es mucho más fácil de entender y manipular si queremos crear una paleta de colores, en especial una monocromática porque es mucho más fácil manejar los tonos de un color, aunque tiene algunos limitantes importantes. Les voy a dejar un par de recursos en inglés sobre el tema

https://www.youtube.com/watch?v=Ab9pHqhsfcc
Este video de Kevin Powell explica bien sobre el método de HSL y muestra de qué limitantes hablo.

https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/
Este artículo muestra las limitantes de usar HSL y cómo una nueva medida que está viniendo eventualmente para CSS llamada LCH (Lightness, Chroma, Hue o Luminosidad, Croma y Matiz) ayuda a resolver este problema y ayuda a manipular los colores para crear una paleta de forma más intuitiva.

https://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF

Pueden ayudarse de esta herramienta para escoger sus colores

hola

Aquí les dejo las siguientes herramientas para generar paletas de colores:
Coolors
Color Hunt

#Genial

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 =)

Otra página que yo suelo usar para definir la paleta de colores de mis publicaciones es: coolors. co

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

http://www.paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF

Gracias platzi!!!

A ver así:

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

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

https://color.adobe.com/es/trends En este enlace del Kuler se pueden ver colores tendencias con paletas ya elaboradas que se pueden usar de guía

Muy buena clase!

Interesante!

https://color.adobe.com/es/explore

aquí la herramienta mencionada.

Colores: Primario, secundario y terciario

Sublime Text tiene packages para colores. ColorPicker (elegir color) y Color Highlighter (resaltar la linea de codigo del color que elegiste).
Paginas de los packages:
Color Highlighter: https://packagecontrol.io/packages/Color Highlighter
ColorPicker: https://packagecontrol.io/packages/ColorPicker

Combinación triádica

Combinación tétrada

Herramientas para crear paletas de colores

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

Combinación monocromática

Combinación análoga

Combinación complementaria

Gracias por el vídeo!

Muy bien explicado

Acá les dejo la siguiente herramienta de Adobe que permite seleccionar paletas de colores dependiendo de un color ingresado.

https://color.adobe.com/es/create/color-wheel

Aqui un enlace de paletas de color, estan interesantes
![](

Otra pagina que tambien esta buena para hacer paletas de colores es coolors

Paleta de colores:

• Primarios: Amarillo, rojo y azul
• Secundarios: Combinación de lo: primarios
• Terciarios: Transición de primario a secundario

Tipos de paletas:

- Combinación monocromática
Un color con diferentes niveles de opacidad

- Combinación análoga
Primario, secundario y terciario seguidos

- Combinación complementaria:
Primaria + secundaria opuestos

- Combinación Triádica:
Triangulo en la mitad del circulo cromático

- Combinación tétrada:
Combinar cuatro colores (2 primarios, 2 secundarios)

Herramientas para crear paletas de colores:
https://color.adobe.com/es/explore

No se si mi paleta tenga sentido

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

https://material.io/resources/color/#!/?view.left=0&view.right=0