简体中文 Tiếng Việt 日本語 한국어 हिन्दी Español Français العربية বাংলা Português Русский اردو Bahasa Indonesia Deutsch Naijá मराठी తెలుగు Türkçe தமிழ்

🎨 ColorLab - Herramienta inteligente de paleta y conversión de color

Conversión de formato de color profesional · Generación de paleta inteligente · Análisis de contraste de accesibilidad
#4A90E2
Haga clic en el bloque de color o use el selector de color para seleccionar un color
Admite valores de color hexadecimales de 3 dígitos (#RGB) o 6 dígitos (#RRGGBB)
Valores rojo, verde y azul, rango 0-255
Tono (0-360°), Saturación (0-100%), Luminosidad (0-100%)
🎨 Paletas inteligentes
Combinaciones de colores armoniosas generadas automáticamente según la teoría del color
⚡ Análisis de color
Análisis de estándares de accesibilidad y propiedad de color profesional

Verificación de contraste

Contraste con blanco:4.5:1
Contraste con negro:12:1
✅ Pasa los estándares de accesibilidad
WCAG 2.1 Estándar: El contraste del texto necesita ≥4.5:1

Análisis de brillo

Luminancia relativa:0.28
Luminosidad percibida:Medio
Uso sugerido:Color primario, botones
Rango de luminancia relativa: 0 (negro puro) a 1 (blanco puro)

Información de color

Tono:212°
Saturación:72%
Luminosidad:59%
Tono: Rojo=0°/360°, Verde=120°, Azul=240°
¡Copiado al portapapeles!

Características de ColorLab

📖 Introducción: herramienta profesional de color en línea que proporciona funciones integrales de procesamiento de color y generación de paletas. Perfecta integración deconvertidor de color, generador de paletas, cuadrador de contraste de color, herramienta de análisis de colory más.

Conversión de color en tiempo real

Admite conversión bidireccional en tiempo real entre formatos de color HEX, RGB y HSL. Ingrese cualquier formato para sincronizar automáticamente las actualizaciones entre otros, garantizando la coherencia del color.

Intercambio de formato: HEX ↔ RGB ↔ HSL, modificando cualquier formato se sincronizan automáticamente otros

Generación de paleta inteligente

Genera automáticamente paletas monocromáticas, complementarias, análogas y triádicas basadas en la teoría del color, lo que ayuda a crear combinaciones de colores armoniosas.

Teoría del color: combinaciones de colores armoniosas generadas matemáticamente basadas en la rueda de colores

Análisis de accesibilidad

Comprueba si el contraste de color cumple con los estándares de accesibilidad WCAG 2.1, garantizando que los colores del sitio web sean adecuados para todos los usuarios, incluidos los usuarios con discapacidad visual.

Estándares WCAG: Contraste de texto ≥4.5:1, contraste de texto grande ≥3:1

Análisis de color en profundidad

Proporciona un análisis detallado de las propiedades del color, incluida la luminancia relativa, la luminosidad percibida, el tono, la saturación y la luminosidad para ayudar a comprender las características del color.

Luminancia relativa: Cálculo del brillo basado en la percepción visual humana (0-1)

Función de copia con un clic

Admite la copia con un clic de valores de color (HEX, RGB, HSL). Los colores de la paleta también se pueden copiar individualmente para facilitar su uso en herramientas de diseño.

Formatos de copia: HEX con #, RGB con rgb(), HSL con hsl()

Diseño Responsivo

Se adapta perfectamente a diferentes pantallas de dispositivos, incluidos computadoras de escritorio, tabletas y dispositivos móviles. Analice los colores en cualquier momento y en cualquier lugar sin instalar ningún software.

Optimizado para dispositivos móviles: buena experiencia de usuario en teléfonos y tabletas

Color Especificaciones Técnicas

Estándares de color y métodos de cálculo utilizados por esta herramienta:

  • Conversión de color: basada en algoritmos de color estándar W3C
  • Cálculo de contraste: algoritmo de contraste WCAG 2.1 (fórmula de luminancia relativa)
  • Generación de paleta: Basado en la teoría del color (modelo matemático de la rueda de color)
  • Rango de tono: 0° a 360° (Rojo=0°/360°, Verde=120°, Azul=240°)
  • Rango de saturación/luminosidad: 0% a 100%
  • HEX: Admite los formatos #RGB y #RRGGBB

Nota técnica:Esta herramienta utiliza algoritmos de color de JavaScript para la conversión en tiempo real. El cálculo del contraste se basa en la fórmula de luminancia relativa WCAG 2.1: L = 0,2126×R + 0,7152×G + 0,0722×B. La generación de paletas se basa en cálculos matemáticos de la rueda de colores: complementaria (diferencia de tono de 180°), análoga (diferencia de tono de 30°), triádica (diferencia de tono de 120°).

Preguntas frecuentes (FAQ)

¿Qué son los estándares de contraste de color WCAG? ¿Por qué son importantes?

WCAG (Pautas de accesibilidad al contenido web) son pautas de accesibilidad al contenido web. Los estándares de contraste de color garantizan un contraste suficiente entre el texto y el fondo para que los usuarios con discapacidad visual puedan leer con claridad. Según WCAG 2.1, el texto normal requiere al menos un contraste de 4,5:1, el texto grande (al menos 18 puntos o 14 puntos en negrita) requiere al menos 3:1. No cumplir con estos estándares puede hacer que los sitios web sean inutilizables para algunos usuarios y podría violar las leyes de accesibilidad en algunas regiones.

¿Cuál es la diferencia entre los formatos de color HEX, RGB y HSL?

Cada formato tiene sus características:
1) HEX (Hexadecimal): p.e. #4A90E2, más comúnmente utilizado en desarrollo web, conciso pero menos intuitivo para comprender las propiedades del color.
2) RGB (Rojo Verde Azul): p.e. rgb(74, 144, 226), basado en los colores primarios de la luz, intuitivo pero menos conveniente para ajustar las características del color
3) HSL (Luminosidad de saturación de tono): p. hsl(212, 72%, 59%), basado en la percepción humana del color, características de color fáciles de ajustar (como brillo, oscurecimiento, ajuste de saturación)
ColorLab admite la conversión en tiempo real entre estos tres formatos. Puede utilizar el formato que mejor se adapte a sus necesidades.

¿Cómo funcionan las paletas inteligentes?

ColorLab genera cuatro tipos de paletas basadas en la teoría del color:
1) Paleta monocromática: mantiene el tono constante, ajusta la saturación y la luminosidad para crear variaciones más claras/más oscuras.
2) Paleta complementaria: utiliza colores opuestos en la rueda de colores (diferencia de tono de 180°), crea combinaciones de alto contraste
3) Paleta análoga: utiliza colores adyacentes en la rueda de colores (diferencia de tono de 30°), crea combinaciones armoniosas y sutiles
4) Paleta triádica: utiliza tres colores igualmente espaciados en la rueda de colores (diferencia de tono de 120°), crea combinaciones vibrantes y coloridas.
Estas paletas están calculadas matemáticamente para garantizar combinaciones de colores armoniosas.

¿Qué son la luminancia relativa y la luminosidad percibida?

La luminancia relativa es un valor de brillo basado en la percepción visual humana, que va de 0 (negro puro) a 1 (blanco puro). La fórmula de cálculo considera la sensibilidad del ojo humano a diferentes colores (más sensible al verde, menos al azul). La luminosidad percibida es una descripción intuitiva basada en la clasificación de luminancia relativa, como "muy oscura", "oscura", "media", "clara", "muy clara". La luminancia relativa se utiliza para calcular el contraste de color, mientras que la luminosidad percibida ayuda a comprender el peso visual del color y las aplicaciones adecuadas.

¿Cómo elegir colores accesibles para sitios web?

Recomendaciones para elegir colores accesibles:
1) Utilice ColorLab para comprobar el contraste y garantizar que el contraste del texto y del fondo sea ≥4,5:1
2) Evite confiar únicamente en el color para transmitir información (por ejemplo, rojo para errores), use también texto o íconos
3) Pruebe desde la perspectiva del usuario daltónico, asegúrese de que la diferenciación del color no dependa únicamente de las diferencias de tono
4) Proporciona suficiente contraste de color para garantizar una identificación clara incluso en entornos brillantes
5) Considere el rendimiento del color en modo oscuro y garantice un buen contraste entre diferentes temas.

¿Esta herramienta es gratuita?

Sí, la herramienta de color ColorLab es una herramienta en línea completamente gratuita. No es necesario registrarse ni iniciar sesión. Nos comprometemos a proporcionar herramientas de color de alta calidad para diseñadores y desarrolladores, ayudándoles a crear combinaciones de colores hermosas y accesibles. Todo el procesamiento se realiza localmente en su navegador: sus datos de color no se cargan en ningún servidor.