Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Paletas de color

13/22
Recursos

Aportes 85

Preguntas 6

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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)

Uno más que me parece muy interesante:

Yo lo hago así:

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

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

Mis Notas

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

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)

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

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.

Dejo mis apuntes, espero les sirva 😃


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

Les comparto el mapa mental de la clase.

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

Ahora los vemos con claridad los colores complementarios

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

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

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

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

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

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

!Hola¡ si están buscando paletas de colores les recomiendo Color Hunt

Y como pro tip, si quieres poner un grado de transparencia al color con css agreguenle dos cifras más al color… Ejemplo con color hexadecimal:
#000000 => Daría un color negro
#000000aa=> Le daría un poco de transparencia
Pero si quieres buscar un color preciso es mejor utilizar RGB por que te permite escoger cualquier color y también el porcentaje de transparencia 😄

Otras páginas muy útiles para crear paletas de colores son:
Coolors
Picular
Y mi favorita:
Color tool

Al fin aprendo esto 😦

<h3>Hola Comunidad 😃</h3>

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


Mis apuntes sobre 28561-paletas-de-color
Existen los colores primarios, secundarios y terciarios

Paletas:

Combinación monocromática (un color con diferente tonalidad).
Combinación análoga
Combinación complementaria (primario y secundario)
Combinación triádica (un triángulo dentro del círculo cromático)
Combinación tétrada

Página para crear paletas de colores:
https://color.adobe.com/explore

En estas páginas puedes generar tu paleta de colores https://coolors.co/ https://colorhunt.co/