Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

15D
11H
43M
43S

Colores en DevTools

5/22
Recursos

Aportes 39

Preguntas 4

Ordenar por:

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

o inicia sesi贸n.

Me parece muy 煤til el tema de las paletas, no sab铆a que podia guardar esas paletas y que tambi茅n en chrome me identificaba los colores que he agregado como variables en mi CSS. Si quieren saber un poco m谩s de variables en CSS los invito a visitar el siguiente enlace: CSS Custom Properties con Leonidas

Recordar :

Respecto a los colores de Material Design , para poder ver la combinaci贸n de colores que se pueden aplicar a una pagina , En la secci贸n mencionada de Material Design recordar dar un click sostenido a cada uno para visualizar la linea de colores de esta forma :

Entrar a la paleta de colores y dirigirse a la secci贸n de Material Design

Click sostenido sobre la linea de colores que desee visualizar

Modificar colores con el Selector de colores

  • Para abrir el Selector de colores, encuentra una declaraci贸n de CSS en el panel Styles
    que defina un color (como color: blue). A la derecha del valor de la declaraci贸n se encuentra un cuadrado peque帽o de color. El color del cuadrado coincide con el valor de la declaraci贸n. Haz clic en este peque帽o cuadrado para abrir el Selector de colores.

Todo lo que es Material Design es un tema interesante, me encanta porque Google tiene una p谩gina espec铆fica para Material Desgin, yo recomiendo esta p谩gina para crear combinaciones y paletas de colores Material Design:

https://www.materialpalette.com/

Hay otras paletas de colores que les pueden servir, una es la de google, es solo buscar
color picker
Y podran tener esta paleta que les da el color en todo tipo de valores que existen.

Y otra esla de VScode donde escriben algun color, y luego ponen el cursor sobre ese color y les sale esta paleta:

Espero les sriva 馃槃 馃槈

como robarme los colores, entendido.

Colores en DevTools


Al darle click al cuadrito que aparece al lado de los colores y nos saldr谩 una micro-pesta帽a donde nos da un selector de colores y nos muestra nustra paleta de colores.

<h1>Colores en DevTools</h1>

En DevTools tambi茅n podr茅mos acceder a una paleta de colores con ciertos features que nos facilitan el flujo de trabajo. Para acceder a 茅stas tenemos que hacer click en alg煤n cuadro de color de cualquier selector de css.

Podemos elegir el color que queramos y nos da su c贸digo HEX o RBG si preferimos.Tambi茅n tenemos un inspector de colores para poder tomar cualquier color dentro de la p谩gina.

En la secci贸n de paleta de colores DevTools nos da paletas Material predise帽adas, nos muestra los colores que tengamos en variables de css y los colores que la p谩gina usa.

Es una excelente herramienta el picker color, aunque tambi茅n est谩 la extensi贸n de google llamado ColorZilla

Yo antes sol铆a dise帽ar mientras iba haciendo el c贸digo, sin embargo, eso era muy tardado, ya que estaba re-escribiendo c贸digo muy seguido. Lo que hice entonces fue aprender figma y de ah铆 me baso para despu茅s crear el c贸digo. Figma nos deja guardar paletas de colores tambi茅n, entonces as铆 el proceso de c贸digo es mucho mas r谩pido

Para mi este es el mejor sitio para obtener un color y generar diversos tipos de paletas a partir de el
https://htmlcolorcodes.com/es/selector-de-color/

DevTools - Colors
En las DevTools tenemos una herramienta (color picker), que nos ayudar谩 a tomar cualquier color que deseemos de la p谩gina en que estamos. Adem谩s, tenemos la funci贸n de ver la paleta de colores del proyecto, customizar nuestra propia paleta o cambiar colores del proyecto.

Es interesante el tema de los colores y como podemos obtenerlos a traves de la paleta y como podemos agregarlos segun nuestro criterio.

Tambi茅n pueden instalar las 鈥淧owerToys鈥 de Microsoft, es una caja de herramientas la cual incluye tambi茅n un selector de color. Y podemos ver el color de cualquier cosa que tengamos en pantalla.

Si das click sobre el recuadro del color mantenimiento presionado Shift, te va a cambiar el formato del color de hexadecimal a rgb, etc.

馃槷 Genial no sabia que podia guardar una paleta de colores, y saber que colores se estan usando en mi proyecto

Genial esta clase.

A seguir aprendiendo.COLORES

El detector de colores, se llama Eye Dropper

Hay grandes herramientas en solo esta parte de color, herramientas que sin dudas agilizar谩n nuestro trabajo, lo de guardar los colores personalizados y las paletas sugeridas realmente es asombroso.

No conoc铆a lo de las paletas. Vamos muy bien 鈥

Buena herramienta, relevante lo de guardar los colores para el proyecto en que se este trabajando, se podrian traer los colores requeridos y usarlos

S煤per 煤til las paletas de colores!

Excelente herramienta.

Genial! Cuando comenzaba era frustrante (m谩s si no sab铆as nada de dise帽o), la parte de la paleta de color.

Esto es una buena herramienta, me funciona mucho cuando quiero saber el color de una parte especifica del navegador.

馃憦馃憦鉁 Excelente.

Perfecto, y aunque VSCODE tiene su propio selector de colores, contar con este selector de colores en las DEVTOOLS lo hace perfecto a la hora de visitar paginas web en las que nos haya gustado algun color en especifico

Extraer colores min 0:50

Paletas de colores de la p谩gina min 3:05

suuuper bueno lo del color picker, y yo instalando extensiones todas malucas para eso, gracias

Esto yo lo utilizo a diario, es una gran herramienta, Genial no sabia que se podia guardar algunos colores 馃く馃く

Consejos de colores Dev Tools

  • Puedes editar el color al dar click sobre el elemento deseado.
  • Dev Tools viene con paletas de colores recomendadas.
  • Dev Tools agrega los colores que tiene tu p谩gina a una paleta.
  • Puedes agregar colores a una paleta personalizada.
  • Pueses buscar un color al posicionar el cursos en ese pixel.

que interesante el manejo de colores con las dev tools de chrome! super utiles馃挌

<h3>5. Colores en DevTools</h3>

0:43 驴C贸mo extraer colores o generar colores con el inspector?

3:27 Agregando colores base de tu proyecto como valores customizados.

4:38 Extraer colores con Color Picker.

Esta clase nos permite saber c贸mo 鈥渕anipular鈥 y guardar las paletas de colores de nuestro proyecto.

estimado profesor ? cual es la finalidad de cambiar los css, dise帽o de la pagina web como texto , etc? me podria explicar el fin y la necesidad de hacerlo???

Este apartado de Paleta de Colores no la conoc铆a. Impresionante lo que puede hacer las Dev Tools y lo que me estaba perdiendo. Que incre铆ble que se haya echo este curso! Muchas Gracias Profe :)