Colores en DevTools

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.

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/

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 “PowerToys” 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💚

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 “manipular” 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???