Conversor de Color
Elige un color o pega un código y visualízalo gráficamente y en Hex, RGB, RGBf, HSL y HSV. Funciona offline.
Instrucciones
Esta herramienta sencilla muestra un color dado gráficamente y en diferentes notaciones. Puedes elegir un color visualmente o introducir un código que ya tengas, para visualizarlo o convertirlo a otro estándar de codificación de color.
Cuadro de vista previa — muestra el color actual.
Barra de brillo — mueve izquierda–derecha para establecer cuán brillante u oscuro es el color.
Barra de tono — mueve izquierda–derecha para cambiar el tono base (rojo, verde, azul, etc).
Área de saturación/valor (SV) — haz clic o arrastra dentro: izquierda–derecha = más o menos saturación, arriba–abajo = más claro o más oscuro.
Muestras — ejemplos rápidos: variaciones de tu color, arcoíris, grises y selecciones recientes. Haz clic en cualquiera para seleccionar.
Color Aleatorio — elige un nuevo color al azar.
Valores — cinco campos: Hex, RGB, RGBf, HSL, HSV. Introduce un valor en cualquier campo para actualizar los demás. Usa Copiar para copiar el código.
Mini guía de formatos de color
Concisa pero didáctica
HEX
Qué: Triplete en base 16: #RRGGBB (o abreviado #RGB → dígitos duplicados).
Cómo: Cada par codifica un canal (0–255) en hexadecimal.
Por qué: Compacto, universal en la plataforma web, fácil de pegar en CSS.
Uso: Colores HTML/CSS, entrega de diseño, guías de estilo, intercambio rápido.
Consejo: #FF0000 rojo, #00FF00 verde, #0000FF azul, #00FF7F verde primavera.
Mapeo
#RRGGBB →
RR =
rojo (0–255),
GG =
verde (0–255),
BB =
azul (0–255)
RGB (0–255)
Qué: Canales enteros (R, G, B) cada uno de 0 a 255. Ejemplo: rgb(255, 128, 0).
Cómo: Representa la intensidad de luz por canal (típicamente 8 bits por canal).
Por qué: Coincide con archivos de imagen y buffers gráficos.
Uso: Procesamiento de imágenes, CSS rgb(), píxeles de canvas.
Modelo mental (mínimo)
origen = (0, 0, 0) negro
eje R →,
eje G ↑,
eje B ⟂
naranja brillante ≈
(255, 165, 0)
gris claro ≈
(200, 200, 200)
RGBf (0–1)
Qué: RGB como floats normalizados: (1.0, 0.5, 0.0).
Cómo: 255 → 1.0, 0 → 0.0.
Por qué: Preferido en shaders y matemáticas de color.
Uso: GLSL/HLSL, WebGL, pipelines GPU.
Conversión rápida
0–255 → 0–1: dividir entre 255 (128 → 0.502)
0–1 → 0–255: round(x*255) (0.5 → 128)
HSL (Tono, Saturación, Luminosidad)
Qué: Separa el tono (tipo de color) de la luminosidad y la saturación.
Cómo: Tono: 0–360° alrededor de la rueda; Saturación: 0% gris → 100% vivo; Luminosidad: 0% negro → 50% medio → 100% blanco.
Por qué: Excelente para construir paletas, variantes de color accesibles.
Uso: Tematización de IU, software de diseño.
Rueda de tono
HSV (Tono, Saturación, Valor)
Qué: Como HSL, pero Valor = canal máximo (brillo).
Cómo: Tono: 0–360°, S: 0–100%, V: 0–100%.
Por qué: Coincide con los selectores de programas de pintura (rueda de tono + control S/V).
Uso: Pintura digital, editores de fotos, interfaces de selección de color.
¿Cuándo preferir cuál?
- Hex: listo para web, códigos cortos.
- RGB: capturas de pantalla, datos de imagen 8 bits.
- RGBf: programación, shaders, matemáticas.
- HSL: paletas de diseño, variantes controladas.
- HSV: herramientas de pintura, selectores intuitivos.
Ejemplos de referencia cruzada
El mismo color escrito de cinco formas (verde primavera):
- Hex: #00FF7F
- RGB: rgb(0, 255, 127)
- RGBf: 0.000, 1.000, 0.498
- HSL: 150°, 100%, 50%
- HSV: 150°, 100%, 100%
Nota: CSS y la mayoría de las imágenes usan sRGB (codificación gamma); realiza cálculos de iluminación en espacio lineal y convierte de vuelta a sRGB para la visualización.