Tonos de Gris: Códigos Hex, RGB y HSL

¿Qué cuenta como un tono de gris?

El gris es lo que sale cuando rojo, verde y azul valen lo mismo: el Gris #808080 es exactamente eso, igual que LightGray #D3D3D3, Plata #C0C0C0 y DimGray #696969. Los 16 tonos siguientes van de Gainsboro #DCDCDC en el extremo claro hasta DarkSlateGray #2F4F4F, y son el esqueleto de cualquier interfaz: bordes, separadores, estados deshabilitados y texto secundario viven en esta lista.

Lo interesante son las entradas que no son neutras del todo. SlateGray #708090 y LightSlateGray #778899 llevan un velo azul; Gris Ceniza #B2BEB5 tira a verde; Carbón #36454F es lo bastante azul como para leerse casi marino en tamaños pequeños. Esos grises teñidos son los que hacen que una paleta parezca deliberada: una página construida solo con neutros puros suele verse plana, mientras que otra en la que los grises comparten un leve matiz con el color de marca se ve compuesta.

Cómo usar estos códigos de color

1. Busca tu tono. La lista va de claro a oscuro, con una muestra real junto a cada nombre — recórrela como si fuera una carta de pinturas.
2. Haz clic en un código para copiarlo. Cada fila trae el valor hex, RGB y HSL de ese color. Un clic copia ese texto exacto a tu portapapeles.
3. Pégalo en tu proyecto. Lleva el hex a CSS, Figma, Photoshop o un documento. Al hacer clic en la muestra también se copia el hex, así no tienes que apuntar al texto pequeño.

Qué comunica el gris

El gris es el color de la contención. Transmite neutralidad, profesionalidad y precisión, y es el color más seguro para superficies grandes porque nunca compite con el contenido: justo por eso el diseño editorial y de interfaz se apoya tanto en él.

Su riesgo es la otra cara de la misma virtud: demasiado gris sin alivio se lee como triste, corporativo o inacabado. La solución rara vez es más color, sino más rango de contraste — enfrentar Gainsboro con Carbón en lugar de amontonar varios grises medios. Plata y Peltre #899499 añaden un registro metálico que sugiere tecnología y hardware premium, y por eso dominan en electrónica de consumo.

Limitaciones honestas

Un código hex es exacto, pero el color que ves no lo es. El mismo #FF0000 se ve distinto en un móvil OLED, en un monitor de oficina barato y en papel impreso, porque cada dispositivo tiene su propia gama y calibración. Usa estos valores como un punto de partida preciso para pantalla, y revisa siempre una prueba física antes de mandar un color a imprenta: CMYK no puede reproducir todos los tonos de esta lista.

Los nombres de color mezclan dos cosas. Los marcados con CSS son colores con nombre oficiales: el nombre funciona tal cual en una hoja de estilos y todos los navegadores lo resuelven exactamente a ese hex. El resto son nombres convencionales — Burdeos, Salvia, Espresso — que no pertenecen a ningún estándar. Sus valores siguen la convención más citada, pero otra carta puede colocarlos un poco más claros u oscuros, así que cita el hex y no el nombre cuando el valor exacto importe.

¿Por qué es gratis?

FreeToGenerate.com mantiene todas sus herramientas realmente gratis. Esta página es una lista estática de valores de color que se muestra en tu navegador: nada que instalar, sin cuenta y sin versión premium que esconda la mitad de la paleta. Copia todos los códigos que necesites, las veces que quieras.

Otras familias de color

rojonaranjaamarilloverdecianazulmoradorosamarrónnegroblancoTodas las familias