Color Picker & Converter
Understand Color Picker & Converter
Convierte un color entre hex, RGB, HSL, HWB y OKLch, con un selector visual y vista previa en vivo.
How it works
Hex y RGB describen lo mismo en dos notaciones: cada par de dígitos hexadecimales es un canal de 0 a 255, así que #FF5733 es rgb(255, 87, 51). HSL es una reordenación cilíndrica de esos mismos números sRGB — el tono como ángulo en el círculo cromático, la saturación y la luminosidad como porcentajes —, lo que facilita derivar tintes y sombras pero no cambia el espacio de color. OKLch es distinto en naturaleza: es un espacio perceptual, así que pasos iguales en su canal de luminosidad se ven iguales al ojo, y por eso una rampa en OKLch produce una paleta uniforme donde una rampa en HSL se apelotona en los amarillos.
When to use it
- Convertir un valor hexadecimal de un archivo de diseño en la forma rgb() o hsl() que espera una hoja de estilos o una API de canvas
- Construir una escala de tintes y sombras a partir de un color de marca manteniendo el tono y la saturación y variando la luminosidad
- Leer un color de una captura de pantalla o de una página renderizada y obtener todas sus notaciones a la vez
- Comparar dos colores de aspecto parecido por sus números en lugar de a ojo
Watch out for
- Aquí no hay canal alfa. El hexadecimal de ocho dígitos (#RRGGBBAA), rgba() y hsla() no se analizan, y la transparencia se descarta en lugar de trasladarse.
- La ida y vuelta puede desplazar el valor en una unidad. La salida HSL se redondea a grados enteros y a porcentajes enteros, así que hex → HSL → hex no siempre devuelve el byte del que partió.
- La luminosidad de HSL no es el brillo percibido. hsl(60, 100%, 50%) es un amarillo vivo y hsl(240, 100%, 50%) es un azul oscuro, pese a que ambos declaran un 50 % de luminosidad: use OKLch cuando la comparación tenga que coincidir con lo que ve el ojo.
- Los nombres de color de CSS no se aceptan. Introduzca `#FF0000` en lugar de `red`.
Frequently Asked Questions
¿Cómo se convierte hex a RGB?
Divida el código hexadecimal de 6 dígitos en tres pares: #FF5733 → R=0xFF=255, G=0x57=87, B=0x33=51, es decir, rgb(255, 87, 51). En la forma abreviada como #F73, duplique antes cada dígito (#FF7733). Pegue aquí cualquier código hexadecimal y los valores RGB, HSL y HWB aparecen al instante.
¿Cómo se convierte RGB a hex?
Convierta cada canal (0–255) en dos dígitos hexadecimales: R=255 → FF, G=87 → 57, B=51 → 33, es decir, #FF5733. En JavaScript: "#" + [r, g, b].map(v => v.toString(16).padStart(2, "0")).join(""). Pegue aquí valores rgb() para obtener el código hexadecimal automáticamente.
¿Cuál es la diferencia entre RGB y HSL?
RGB define los colores por la intensidad de luz roja, verde y azul (0–255 cada una) y se corresponde con el funcionamiento de las pantallas. HSL usa tono (0–360° en el círculo cromático), saturación (0–100 % de viveza) y luminosidad (0–100 %). HSL resulta más intuitivo para crear tintes, sombras y escalas de color de un sistema de diseño.
How to Use Color Picker & Converter
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.