No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Paletas de color

13/22
Recursos

Aportes 106

Preguntas 8

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Cuando ponemos colores en CSS ulilzamos RGB, RGBA o hexadecimales

RGB y RGBA

RGB significa: REDGREENBLUE
RGBA significa: REDGREENBLUEALPHA(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

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 estn seguidos en nuestro circulo crom谩tico)
- Combinaci贸n complementaria (Consiste en combinar un color primario m谩s un secundario)
	Estos colores estn 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;

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:

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

.

no entiendo como hacer la tarea de cambiar los codigos, no me deja hacer nada en la pagina
Este es la paleta que decid铆 usar, como en la teor铆a de colores mencionaba que el naranja se usa para la comida, siento que queda perfecto para la hamburgueser铆a ![]()![](https://static.platzi.com/media/user_upload/image-cf7ade92-41a3-4a58-bc8d-86865c8ef851.jpg)

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

馃
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:
_

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

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 鈥渞ect谩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