Cómo aprender códigos de colores en CSS más rápido

Suponiendo que quiere decir notación hexadecimal en lugar de colores con nombre, recuerde estas tres cosas y las sabrá:

  1. El valor se divide en 3 conjuntos de dos caracteres. Entonces tiene #aabbcc, que significa una cantidad de rojo, bb de verde y cc de azul.
  2. La recta numérica va de 0 a 9 y luego de af. Eso significa que ff es ‘lotes’ y 00 es ‘ninguno’
  3. Leer el primer carácter de cada conjunto te da la cantidad de ese color.

Vamos a intentarlo. # f7ab2e

rojo: f7 – f es grande, por lo que hay mucho rojo

verde: ab – a está alrededor del medio, entonces hay algo de verde.

azul: 2e – 2 es pequeño, por lo que no hay mucho azul.

Entonces, hay mucho rojo, un poco de verde y casi nada de azul. Va a ser algo entre rojo y amarillo (que es rojo y verde), por lo que significa naranja.

¿Como lo hicimos? Bueno, aquí está el color:

¡No está mal!

Ese es el método de 2 segundos para leer colores hexadecimales.

#R_G_B_ donde R, G y B son las cantidades de cada color, y _ son los caracteres que no importan.

Pruébalo: ¿de qué color es? # ed0af4

Mira mi respuesta a ¿Hay algún truco para aprender los códigos de color CSS?

TL; DR: los códigos de color hexadecimales siguen el patrón #RRGGBB, y cada posición tiene un valor de 0 a f . El segundo dígito en cada par es para un ajuste preciso del valor. Al visualizar la intensidad de cada canal y cómo se pueden mezclar aditivamente, puede adivinar el color resultante producido por el código hexadecimal. En CSS, puede usar una taquigrafía de tres dígitos #RGB.

(En la respuesta anterior, explico exactamente cómo entender y desglosar fácilmente los códigos de color hexadecimales).

Hay algo así como dos millones de códigos de color, y eso sin el valor alfa. ¿Todavía quieres memorizarlos a todos?

Estoy de acuerdo con las otras respuestas: puedes usar una herramienta. Pero me gustaría agregar lo siguiente.

Un código de color (alfa excluido) consta de tres números hexadecimales, que representan las cantidades de rojo, verde y azul en un color. Estos números son de un byte cada uno, por lo tanto, van de 00 a FF, o en notación decimal de 0 a 255. Un código de color de 000000 es negro, FFFFFF es blanco y FF0000 es el rojo más puro posible. ¿Crees que el rojo más puro es demasiado claro? Pruebe 800000. Menos rojo, por lo que el color terminará más oscuro. ¿Quieres una especie de gris azulado? 808087 probablemente obtendrá lo que quieres. Es solo una mezcla de colores como probablemente lo hiciste en la escuela primaria.

Luego está el alfa. Esto no es más que otro número agregado al final del código de color, que nuevamente va de 00 a FF. Muestra la opacidad, 00 es invisible y FF es completamente opaco.

Realmente no hay nada más que esto. Recuerde esto, y puede acercarse a cualquier color que desee sin buscarlo.

PD: Dejé el # que precede al código de color en HTML, porque a menudo 0x precede al código en otros idiomas.

Déjame enseñarte un atajo. No tienes que aprender todo bajo el sol.

Solo necesita saber dónde obtener la referencia. Pruebe los códigos de color Color Hex

Si realmente quiere saberlo por lo básico, puede ir a Códigos de sentido de color para obtener más información.

No es necesario, sin embargo, es útil conocer los conceptos básicos. Tiendo a memorizar los colores que estoy usando en un proyecto. 3–4 a la vez. Es suficiente acostumbrarse.

Fuera de eso, comience con códigos hexadecimales grises y 3 caracteres. Son taquigráficos pero buenos para obtener el principio básico.

fff = blanco

000 = negro

ccc, aaa, 999, 666, 333 = diferente tono de gris, claro a oscuro

El resto es como mezclar colores de luz.

Primero es rojo

2do es verde

Tercero es azul

f significa usar mucho

0 significa no usar nada

entonces … # f00 sería todo redans, nada más.

# ff0 estaría mezclando rojo y verde. Que a la luz es amarilla.

Sugeriría probar este truco.

Consulte Color Picker de WebpageFX o cualquiera de estos sitios web para obtener códigos de colores. Todo, desde código hexadecimal, rgb, tono, saturación.

En segundo lugar, obtenga una extensión de cuentagotas para su navegador. Al igual que para Chrome, uso ColorZilla

Recordará algunos códigos una vez que comience a trabajar con sus ideas y crear proyectos. ¡Feliz codificación!

¡Espero que esto ayude!

Yo personalmente resolví este problema con los IDE que uso.

Por ejemplo, en este momento uso Visual Studio para mi desarrollo web y tiene la capacidad de permitirle acceder a una muestra de color desde archivos .CSS y .HTML una vez que nota que se está definiendo un color.

Además, si utiliza editores de texto más livianos, instale un complemento que haga lo mismo, lo que sería una buena solución … de esta manera puede elegir el color que desee directamente, mientras codifica y con confirmación visual en lugar de volver a cargar o volver a ejecutar su compilación .

No lo aprendes. Lo buscas en Google 🙂

Bromea con un lado, hay toneladas de colores afuera, no tiene sentido aprenderlos todos … incluso en CSS puedes escribir color: rojo; azul verde amarillo etc.

No veo el propósito de aprenderlo.

No hay necesidad de llenar tu cerebro con cosas a las que tienes acceso fácilmente. Simplemente descargue un complemento de Chrome como ColorZilla o algo similar que le permita acceder a todos los colores con la opción de elegir un color de la página web actual que está viendo.

Buena suerte 🙂

Realmente no hay una razón para aprenderlos, especialmente cuando hay más de 16 millones, puedes ir aquí https://color.adobe.com/create/c … y usar el código HEX o RGB que quieras, confía en mí ninguna persona en el planeta quiere o puede recordar códigos de colores para usar en CSS

Prueba esto,

CSS3-CODE-GENERATOR,

Este es mi proyecto universitario, espero que esto ayude.

No necesita eso, solo elija el código de color del navegador (elemento de inspección), o use este sitio web para elegir colores planos.

Nada que memorizar, solo use las herramientas correctas:

Colores web y herramientas de color

Solo sigue la teoría del color

De RGB: R es para rojo y verde y luego negro

Cuando agregue el código, si desea aplicar el rojo: simplemente use # ff0000.

Sí, no necesitas aprenderlo en absoluto. Todo está en línea, ya sea que necesite códigos RGB o HEX. 🙂