Conversor de colores
Web y desarrollo¿Cómo expresas un color en HEX, RGB o HSL?
Elige o escribe un color y cópialo como HEX, RGB, HSL, HWB u OKLCH, con el nombre CSS más cercano.
Lo que introduces permanece en tu dispositivo mientras usas esta herramienta. Al abrir un enlace compartido, los ajustes de su dirección se envían a HowToolbox para preparar la página.
Un nombre, hexadecimal, rgb(), hsl(), hwb() u oklch(), como en CSS.
HEX
#2563eb
Nombre CSS más cercano: royalblue (#4169e1).
El mismo color en otros formatos
- RGB
- rgb(37 99 235)
- HSL
- hsl(221.2 83.2% 53.3%)
- HWB
- hwb(221.2 14.5% 7.8%)
- OKLCH
- oklch(54.61% 0.2152 262.88)
Tonos claros y oscuros
- Luminosidad 95 %
- #e6efff
- Luminosidad 85 %
- #b4ceff
- Luminosidad 75 %
- #82adff
- Luminosidad 65 %
- #4f89ff
- Luminosidad 55 %
- #2664ec
- Luminosidad 45 %
- #0543ca
- Luminosidad 35 %
- #002b93
- Luminosidad 25 %
- #00185c
- Luminosidad 15 %
- #00062a
Enlaces patrocinados
Elige o escribe un color y cópialo como HEX, RGB, HSL, HWB u OKLCH, con el nombre CSS más cercano.
Cómo usar la herramienta
- Escribe un color en formato CSS, como tomato, #1a73e8, rgb(26 115 232) u oklch(60% 0.2 260), o pulsa la muestra para elegirlo.
- Copia el formato que necesites. HEX aparece primero y debajo están RGB, HSL, HWB y OKLCH.
- Usa la fila de tonos para encontrar versiones más claras y oscuras del mismo color.
Colores CSS comunes en HEX y RGB
| Nombre CSS | HEX | RGB |
|---|---|---|
| black | #000000 | rgb(0 0 0) |
| white | #ffffff | rgb(255 255 255) |
| red | #ff0000 | rgb(255 0 0) |
| lime | #00ff00 | rgb(0 255 0) |
| blue | #0000ff | rgb(0 0 255) |
| yellow | #ffff00 | rgb(255 255 0) |
Cómo funciona
Una pantalla crea colores mezclando luz roja, verde y azul. RGB y HEX expresan esa mezcla directamente: HEX contiene las mismas cantidades en base 16; #1a73e8 significa rojo 26, verde 115 y azul 232. HSL y HWB describen el color de forma más intuitiva: su matiz en el círculo cromático y cuánto tiene de claro, oscuro o gris.
OKLCH es una descripción más reciente cuya luminosidad se aproxima a la percepción: dos colores con igual luminosidad parecen igual de claros, algo que HSL basado en sRGB no garantiza (CSS Color Module Level 4; Ottosson, 2020). Los tonos conservan matiz y croma y cambian solo la luminosidad OKLCH para crear una progresión uniforme. Si un color no puede mostrarse con esa luminosidad, se reduce el croma hasta que quepa.
El nombre CSS más cercano es el de los 148 colores con nombre que tiene la menor diferencia en OKLab, un espacio donde distancias iguales representan diferencias visuales parecidas. Un color fuera de la gama habitual sRGB se muestra como el color más cercano que cabe en ella.
Enlaces patrocinados
Preguntas frecuentes
¿Qué significa el código hexadecimal de 8 cifras?
Las dos últimas cifras son la opacidad: de 00 (invisible) a ff (opaco). Se añaden si el color no es totalmente opaco y la muestra aparece sobre un damero.
¿Por qué dos colores con igual luminosidad HSL pueden verse distintos?
La luminosidad HSL se calcula con los valores rojo, verde y azul de la pantalla, no con la claridad percibida. El amarillo parece mucho más claro que el azul con igual luminosidad HSL; por eso los tonos usan OKLCH.
¿Qué formato debería usar en CSS?
Todos funcionan en navegadores actuales. HEX es el más habitual y corto; HSL es fácil de ajustar a mano; OKLCH permite paletas con pasos visuales uniformes y colores fuera de sRGB en pantallas de gama amplia.
¿El nombre CSS más cercano coincide exactamente con mi color?
No siempre. La herramienta distingue una coincidencia exacta del color con nombre más cercano.
¿Convierte colores de pintura o perfiles ICC?
No. Trabaja con colores CSS, no con sistemas de pintura física ni perfiles de color ICC.
También puedes necesitar
- Formateador JSONPega JSON para encontrar errores, darle formato o compactarlo., privada, funciona en tu dispositivoWeb y desarrolloComprobadorConversorCodificación
- Codificar y decodificar URLCodifica texto con porcentajes para una dirección web o convierte %20 y otros códigos en texto normal., privada, funciona en tu dispositivoWeb y desarrolloConversorCodificación
- Consulta DNSConsulta direcciones, servidores de correo y otros registros DNS., privada, funciona en tu dispositivoWeb y desarrolloComprobadorRedes
- Calculadora de tiempo de descargaIntroduce el tamaño del archivo y la velocidad de conexión para calcular cuánto tarda una descarga o subida., privada, funciona en tu dispositivoWeb y desarrolloCalculadoraRedes
- Generador de hashHashes SHA-256, SHA-512, SHA-1 y MD5 de cualquier texto, calculados en tu navegador., privada, funciona en tu dispositivoWeb y desarrolloGeneradorCodificación
- Códigos de estado HTTPBusca cualquier código de estado HTTP: qué significa 200, 301, 404, 429 o 503, cuándo lo envía un servidor, si las cachés lo guardan y qué RFC lo define., privada, funciona en tu dispositivoWeb y desarrolloConsultaRedes
Más en Web y desarrollo
Todas las 18 herramientas de Web y desarrollo- Generador de contraseñasUna contraseña aleatoria creada en tu dispositivo, con su resistencia en bits y sin enviar nada., privada, funciona en tu dispositivo
- ¿Cuál es mi IP?Tu IP pública y la red que hay detrás.
- ¿Está caída la web?Comprueba la respuesta de una web desde nuestro servidor.
- Comprobador de certificados SSLCaducidad, emisor, nombres cubiertos, cadena y versión TLS de cualquier sitio público, con soluciones fáciles de entender.
- Consulta WHOISConsulta el registrador, las fechas y los servidores de nombres que comunica WHOIS.
- Generador de UUIDUUID aleatorios de versión 4 o de versión 7 ordenados por tiempo, creados en tu dispositivo., privada, funciona en tu dispositivo
Populares ahora
Enlaces patrocinados
Enlaces patrocinados
Enlaces patrocinados