color: #0057A8;
Selector de colores online
Selector de colores y conversor HEX, RGB y HSL
Elige un color con el selector visual o escribe un valor HEX, RGB o HSL para convertirlo automaticamente entre los formatos principales usados en CSS y diseno web.
La herramienta tambien genera una paleta rapida, variaciones del color, ejemplos de contraste y declaraciones CSS listas para copiar en proyectos digitales.
Convertidor
Convertir color entre HEX, RGB y HSL
Usa el selector nativo o escribe un valor en HEX, RGB o HSL. Todos los campos se actualizan entre si cuando el color es valido, sin recargar la pagina.
Uso practico
Variaciones, paleta y CSS listo para usar
Genera referencias rapidas para diseno web: tonos relacionados, recomendacion de contraste y declaraciones CSS copiables a partir del color seleccionado.
Variaciones
Tonos utiles del color base
Contraste basico
Texto recomendado
Texto claro recomendado
Ejemplo de texto sobre el color seleccionado.
Paleta rapida
Colores relacionados
CSS
Declaraciones listas para copiar
background-color: #0057A8;
border-color: #0057A8;
Guia de formatos
Que significan HEX, RGB y HSL en codigo de colores CSS
Los tres formatos representan colores validos para CSS, pero cada uno resulta mas comodo segun la tarea: copiar un color exacto, mezclar canales o ajustar luminosidad y saturacion.
Que es un color HEX?
HEX usa numeros y letras para representar rojo, verde y azul en una forma compacta, por ejemplo #0057A8. Es uno de los formatos mas usados en guias de marca, interfaces web y hojas de estilo CSS.
Que es RGB?
RGB expresa el color como mezcla de rojo, verde y azul con valores de 0 a 255. Un rojo puro se escribe como rgb(255, 0, 0). Es facil de entender cuando necesitas revisar los canales del color.
Que es HSL?
HSL organiza el color por tono, saturacion y luminosidad. Es muy util para diseno web porque permite crear variantes mas claras, oscuras, suaves o intensas sin cambiar el tono principal.
Cuando usar cada formato?
Usa HEX para colores fijos de marca o interfaces. Usa RGB cuando trabajas con canales o necesitas una base para transparencias. Usa HSL para crear paletas, hover states, fondos suaves y variantes consistentes.
Ejemplos practicos en CSS
Puedes aplicar el color como texto, fondo o borde: color: #0057A8;, background-color: rgb(0, 87, 168); o border-color: hsl(209, 100%, 33%);.
Consejos para colores legibles
En fondos oscuros suele funcionar mejor texto blanco. En fondos claros, texto oscuro. Evita combinaciones con poco contraste, especialmente en botones, formularios y textos pequenos.
FAQ
Preguntas frecuentes
Respuestas breves para entender el alcance de la herramienta y los formatos soportados.
Como convertir HEX a RGB?
Escribe o pega un codigo como #0057A8 en el campo HEX. El conversor valida el formato y muestra automaticamente el valor RGB equivalente, por ejemplo rgb(0, 87, 168).
Como convertir RGB a HSL?
Ingresa un valor como rgb(255, 0, 0) o 255, 0, 0. La herramienta calcula el tono, la saturacion y la luminosidad para mostrar el resultado en formato HSL.
Cual formato de color conviene usar en CSS?
HEX es practico para valores fijos y faciles de copiar. RGB es util cuando trabajas con canales de color. HSL conviene cuando necesitas ajustar luminosidad o saturacion para variantes.
Que diferencia hay entre HEX, RGB y HSL?
HEX y RGB describen la mezcla de rojo, verde y azul. HSL representa el color por tono, saturacion y luminosidad, una forma mas intuitiva para crear paletas y estados visuales.
Como saber si un color necesita texto blanco o negro?
Observa la luminosidad del fondo. Si el color es oscuro, suele convenir texto blanco. Si el color es claro, suele convenir texto oscuro. La herramienta muestra una recomendacion basica junto con un ejemplo visual.