Selector de color HEX
Preajustes comunes
Elige un color con el control visual del navegador o introduce un valor HEX de tres o seis dígitos. El selector lo convierte a RGB, HSL y un CMYK aproximado, y calcula la luminancia relativa y los contrastes exactos frente a blanco y negro. El color se procesa en este navegador y no se añade a la URL de los pasos.
Cómo elegir un color
-
1
Empieza con una muestra o el control de color
Elige uno de los colores de ejemplo o abre el selector nativo del navegador.
-
2
Introduce un HEX exacto
Escribe tres dígitos como #F60 o seis como #FF6600. El selector amplía correctamente el formato corto.
-
3
Revisa los formatos calculados
Consulta juntos HEX, RGB, HSL, CMYK aproximado y luminancia relativa sRGB.
-
4
Comprueba el contraste y copia
Compara el color con blanco y negro y copia el valor HEX, RGB o HSL que necesites.
Notaciones de color en la práctica
Cada modelo de color responde a una pregunta ligeramente distinta.
Referencia de notaciones
| Notación | Componentes | Dónde se usa |
|---|---|---|
| HEX | #RRGGBB | CSS, herramientas de diseño, guías de marca |
| RGB | rojo 0–255, verde 0–255, azul 0–255 | CSS rgb(), editores de imagen |
| HSL | tono 0–360°, saturación %, luminosidad % | CSS hsl(), sistemas de diseño |
| CMYK | cian %, magenta %, amarillo %, key/negro % | Impresión, preimpresión |
Contraste de accesibilidad
WCAG 2.2 define ratios mínimos de contraste entre texto y fondo:
- AA para texto normal: ≥ 4,5:1
- AA para texto grande (18 pt o 14 pt en negrita): ≥ 3:1
- AAA para texto normal: ≥ 7:1
El selector calcula en tiempo real la ratio frente a blanco y frente a negro. Si necesitas un color de primer plano concreto, usa un comprobador de contraste específico para cada pareja de colores.
Consejos
- HEX es el formato predeterminado en la mayoría de herramientas de diseño, pero el hexadecimal corto de tres dígitos (
#F60) equivale a#FF6600, no a#F06060. - HSL resulta más cómodo para crear paletas: bloquea el tono y varía la luminosidad para generar tintes y sombras.
- CMYK y RGB no se convierten de forma perfecta entre sí, el CMYK impreso depende del perfil de la imprenta. Haz siempre una prueba en papel real.
- Si diseñas para CSS moderno, considera OKLCH para obtener pasos de luminosidad perceptualmente uniformes.
Preguntas frecuentes
Photoshop aplica un perfil de color, normalmente sRGB para pantalla y a menudo otro para impresión. Los navegadores interpretan los valores HEX sin perfil como sRGB. Si tu documento está en Adobe RGB o ProPhoto, los valores de píxel son iguales, pero cambia el color percibido.
Sí, ambos describen rojo puro: rojo a 255 y verde y azul a 0. HEX solo es una notación hexadecimal de dos dígitos para cada valor de canal entre 0 y 255.
Elige el color principal y copia el valor HSL. En CSS o en tu aplicación de diseño, mantén fijos el tono y la saturación y ajusta la luminosidad. Comprueba cada pareja de primer plano y fondo.
El color actual se conserva hasta 30 minutos en esta pestaña para pasar por el recorrido guiado. No se añade a la URL ni se envía mediante Livewire. Empezar de nuevo, cerrar la pestaña, borrar los datos del navegador o dejar que caduque lo elimina.
Herramientas relacionadas
Generador de letras aleatorias
Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.
Formateador de JSON
Pega JSON para verlo con sangría de 2 o 4 espacios, minificarlo en una salida compacta o comprobar rápidamente la sintaxis antes de copiar el resultado.
Simplificador de Álgebra Booleana
Simplifica expresiones booleanas usando mapas de Karnaugh y el algoritmo de Quine-McCluskey. Muestra cada paso de minimización y una forma final SOP/POS.
Generador de Paletas de Color
Genera paletas monocromáticas, análogas, complementarias, triádicas o tetrádicas desde un color base HEX y exporta variables CSS listas para copiar.
Generador de colores aleatorios
Genera de 1 a 50 colores HEX aleatorios con muestras para previsualizar, copiar y usar en CSS, pruebas o exploración de paletas.
Convertidor de BBCode a HTML
Convierte BBCode (marcado de tablones de anuncios) a HTML limpio. Maneja etiquetas de formato, listas, citas, código, imágenes, enlaces y tablas.