Nombres de Colores CSS
Explorá y buscá los 148 colores con nombre de CSS con sus valores HEX y RGB, ordenados por nombre, tono o luminosidad. Funciona enteramente en tu navegador: no se envía nada a ningún servidor.
¿Qué son los nombres de colores CSS?
CSS define 148 palabras clave de color, como tomato, steelblue o rebeccapurple, que se pueden usar en cualquier lugar donde se acepte un valor de color en vez de un código HEX o RGB. La mayoría vienen de la lista de colores de X11 que adoptaron los primeros navegadores, y por eso los nombres a veces sorprenden: darkgray es más claro que gray. Todos los navegadores los soportan. Esta lista muestra cada nombre con su color y sus valores HEX y RGB, te deja buscar por nombre, HEX o cualquier color, y los ordena alfabéticamente, por tono o por luminosidad.
Ejemplos
Usar nombres de color en hojas de estilo, markup y scripts:
.notice {
color: darkslategray;
background: lightgoldenrodyellow;
border: 1px solid goldenrod;
}<p style="color: rebeccapurple">Named colors work inline too.</p>// resolve a name to rgb() through the browser itself
const el = document.createElement("div");
el.style.color = "tomato";
document.body.append(el);
getComputedStyle(el).color; // "rgb(255, 99, 71)"<circle cx="50" cy="50" r="40" fill="cornflowerblue" stroke="navy" />Casos de uso
Prototipos rápidos y demos
Nombres como crimson o teal se escriben más rápido y se leen mejor que los códigos HEX cuando estás bocetando un layout o escribiendo un ejemplo.
Debuggear layouts
Marcá elementos con colores obvios como hotpink o lime para ver las cajas y el overflow mientras trabajás, y después sacalos.
Encontrar el nombre de un valor HEX
Pegá un valor HEX o RGB para ver si tiene un nombre exacto, o cuál es el color con nombre más cercano.
Enseñanza y documentación
Los nombres de color legibles hacen que los tutoriales y ejemplos de CSS sean más fáciles de seguir para quien empieza.