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

Qué encontrarás en estas páginas

Cada página de familia lista sus tonos con nombre ordenados de claro a oscuro, con una muestra real, el nombre del color y tres códigos listos para copiar: hex para CSS y herramientas de diseño, RGB para lo que pida valores por canal, y HSL para cuando necesites ajustar luminosidad o saturación a mano. Al hacer clic en un código se copia; al hacer clic en la muestra se copia el hex.

Los tonos marcados con CSS son colores con nombre oficiales: el nombre funciona directamente en una hoja de estilos y todos los navegadores lo resuelven exactamente al hex mostrado. El resto son nombres convencionales cuyos valores siguen la convención más citada.

Cómo elegir un tono que funcione

Los colores de una misma familia rara vez chocan, así que la forma más rápida de montar una paleta es tomar un valor claro, uno medio y uno oscuro de una página y usar una segunda familia solo para acentos. Si el color va detrás de texto, elígelo de la parte alta de la lista y comprueba el contraste; si tiene que sostener un titular o un botón, tómalo del centro y no de los extremos.

Vigila el desplazamiento de matiz en los extremos de cada familia. Los rojos más oscuros se han ido hacia el marrón, los amarillos más oscuros hacia el oliva y los rosas más pálidos hacia el blanco: dos tonos de los extremos opuestos de una misma página pueden parecer de paletas distintas.

¿Por qué es gratis?

FreeToGenerate.com mantiene todas sus herramientas realmente gratis. Estas páginas son listas estáticas de valores de color que se muestran en tu navegador: nada que instalar, sin cuenta y sin versión premium que esconda media paleta. Copia todos los códigos que necesites, las veces que quieras.