colorizeSELECTOR DE COLOR
Elige un color.
Conoce todo sobre él.
Selecciona un tono o ingresa un código HEX para inspeccionar al instante códigos CSS, tonos, paletas armónicas y más.
palette
Inspector InteligenteSuite UniversalPrecisión 0.01% ΔE
Tu caja de herramientas de color
#3B82F6• Drag to pick
Haz clic y arrastra en la cajasRGB • 0.01% ΔE
Espectro de Tono217°
Alfa / Opacidad100%
HEX
#3B82F6
RGB
59 130 246
HSL
217° 91% 60%
HSV
217° 76% 96%
CMYK
76% 47% 0% 4%
boltAcciones Rápidas
info
Tip: Press C to copy active HEX.
Shades
7 StepsDarker variations of your color.
#3B82F6→#102343
Tints
7 StepsLighter variations of your color.
#3B82F6→#FFFFFF
Color Palette
HarmoniousHarmonious color combinations.
Click any swatch to inspect
Gradient
CSS 90degCreate beautiful gradients.
#3B82F6 → #EC4899
stars
Ver todas las herramientasarrow_forwardHERRAMIENTAS POPULARES
Base de Conocimiento & FAQ
Preguntas Frecuentes
Respuestas y soluciones directas a dudas comunes, desafíos técnicos y estándares del sector.
¿Por qué los colores se ven diferentes en CSS comparado con Figma, Photoshop o Canva?expand_more
Esta discrepancia se debe a las diferencias de espacio de color. Los navegadores web interpretan el código HEX estándar en el espacio de color sRGB. Sin embargo, monitores modernos (Mac, pantallas P3) y programas de diseño suelen trabajar por defecto en Display P3 o Adobe RGB, que poseen una gama cromática más amplia. Al exportar a sRGB sin conversión de perfil, los tonos vivos pueden perder saturación. Para solucionarlo, configura tu herramienta de diseño en perfil sRGB antes de copiar códigos, o usa la sintaxis moderna de CSS Color Nivel 4 como
color(display-p3 0.9 0.2 0.5).¿Cómo verifico si los colores de mi web cumplen con los estándares de accesibilidad WCAG?expand_more
Bajo las pautas WCAG 2.1 y normativas de accesibilidad, el texto debe alcanzar un ratio de contraste mínimo: 4.5:1 para texto normal (inferior a 18pt o 14pt negrita) y 3.0:1 para texto grande y elementos de interfaz de usuario. Puedes probar cualquier combinación al instante con nuestro Verificador de Contraste WCAG gratuito.
¿Qué es el modelo de color OKLCH y por qué sustituye a HSL y RGB en CSS moderno?expand_more
OKLCH es un espacio de color perceptualmente uniforme introducido en CSS Color 4. Modelos tradicionales como HSL engañan a la percepción humana: el amarillo puro parece mucho más brillante que el azul puro pese a tener ambos 50% de luminosidad. OKLCH alinea matemáticamente la luminosidad (L) con el ojo humano, permitiendo degradados sin tonos turbios en el centro y paletas accesibles con contraste predecible.
¿ColorKit es gratuito para proyectos comerciales y de clientes?expand_more
Sí, 100% gratuito. Todas las paletas generadas, conversiones de código, degradados CSS, escalas para Tailwind y colores extraídos de imágenes se liberan bajo dominio público (CC0). Puedes utilizarlos libremente en páginas web comerciales, aplicaciones SaaS, juegos y repositorios de código sin pagar licencias ni incluir atribución obligatoria.
¿Mis imágenes o datos de color se transmiten a algún servidor externo?expand_more
No. ColorKit funciona con una arquitectura estricta de Privacidad 100% del lado del cliente. Todo el procesamiento matemático, la selección con lupa y la extracción de imágenes ocurre localmente en la memoria de tu navegador mediante HTML5 Canvas y APIs nativas de JavaScript. Tus fotos y diseños nunca se suben ni almacenan en ningún servidor.