¿Cómo están organizados los colores?

25 familias de tono y 20 gradaciones (25–900). Haz clic en cualquier muestra para abrir su página de detalle con HEX, RGB, HSL, HSB, OKLCH, CMYK, WCAG, armonías y escala de tintes.

¿Cuál es la diferencia entre tono, saturación y luminosidad?

El tono es el color base. La saturación mide la vivacidad (0%=gris, 100%=saturado). La luminosidad: 0%=negro, 50%=color puro, 100%=blanco.

¿Qué significan los números de gradación (25–900)?

50 es el más claro, 500 la versión más "pura", 950 muy oscuro. Esta escala facilita sistemas de diseño consistentes.

¿Cómo convierto HEX a RGB o HSL?

HEX a RGB: divide el código en tres pares y convierte de hex a decimal. Usa nuestro conversor HEX→RGB.

¿Cómo uso estos colores en CSS?

Directamente: color: #3B82F6; background-color: #ECFDF5. También en HSL o variables CSS.

¿Cuántos colores hay en el Explorador HEX?

500 colores: 25 familias × 20 gradaciones (25–900). Haz clic en cualquier color para explorar todos sus formatos.

Explorador de Colores HEX

Navega 500 colores por familia de tono y gradación

500 colores25 familias20 gradaciones cada una

Haz clic en un color para ver HEX, RGB y HSL — luego úsalo en otras herramientas

Sobre los códigos de color HEX

Los códigos de color HEX son una notación hexadecimal para colores RGB, ampliamente utilizada en diseño web y CSS. Cada código es una cadena de 6 caracteres (ej. #FF6B6B) que representa los componentes rojo, verde y azul en una escala 0–255. Los colores en este explorador están organizados por familia de tono y gradación (50–900), siguiendo la convención de Tailwind CSS.

FAQ

Un código HEX es un código de 6 dígitos para representar colores en diseño web y CSS. Comienza con # seguido de tres pares de dígitos hex para los valores rojo, verde y azul (00–FF, equivalente a 0–255).

Los colores están organizados en 12 familias de tono y 10 gradaciones (50–900). Las gradaciones más bajas son más claras, las más altas más oscuras. Esta convención es usada por Tailwind CSS y Material Design.

El tono (hue) es el color base en la rueda de colores. La saturación mide la vivacidad (0%=gris, 100%=totalmente saturado). La luminosidad mide la claridad (0%=negro, 50%=color puro, 100%=blanco).

Los números de gradación indican la luminosidad: 50 es el más claro, 500 es la versión más "pura" de un color, 900 es muy oscuro. Esta escala facilita la construcción de sistemas de diseño consistentes.

HEX a RGB: divide el código de 6 dígitos en tres pares y convierte cada uno de hex a decimal. Para HSL se requieren cálculos adicionales. Usa nuestro conversor HEX→RGB para conversiones instantáneas.

Úsalos directamente: color: #3B82F6; background-color: #ECFDF5. También puedes usar notación HSL o variables CSS: --color-primary: #3B82F6.

El explorador contiene 120 colores: 12 familias de tono × 10 gradaciones (50–900), generados con valores HSL cuidadosamente ajustados.

Sobre los códigos de color HEX

FAQ

Explora nuestra red