¿El selector de color admite dispositivos táctiles?

Sí. Las interacciones de Canvas funcionan con el tacto en dispositivos móviles y tabletas.

¿Puedo pegar valores RGB o HSL directamente?

Sí. Los formatos admitidos se analizan y el estado del selector salta a ese color.

¿Cuántos colores recientes se guardan?

Los últimos 10 colores seleccionados se almacenan en localStorage.

¿El verificador de contraste sigue los estándares WCAG?

Sí. Informa la relación de contraste con estado de aprobación/rechazo AA y AAA.

¿Puedo copiar colores HEX con un solo clic?

Sí. La acción de copia está disponible para salida HEX.

¿Puedo copiar valores RGB y HSL también?

Sí. Los formatos RGB, RGBA, HSL y HSLA tienen soporte de copia.

¿Esto incluye control del canal alfa?

Sí. El control deslizante Alpha actualiza las salidas RGBA y HSLA.

¿Puedo usar esto para colores de texto accesibles?

Sí. Utilice el verificador de contraste para probar la legibilidad con los colores de fondo.

¿Puedo usar el selector para tokens de diseño CSS?

Sí. Es útil para crear y copiar valores de color listos para CSS.

¿Esta herramienta requiere una biblioteca de colores externa?

No. La lógica del selector se implementa directamente con canvas y JS.

¿Puedo reutilizar rápidamente los colores de la paleta antigua?

Sí. Los chips de color recientes permiten recuperar rápidamente la paleta.

¿Es esto adecuado para diseñadores de UI?

Sí. Ayuda con la selección visual y la conversión de formato en un solo lugar.

¿Pueden los desarrolladores frontend utilizar esto para la implementación?

Sí. Proporciona cadenas HEX/RGB/HSL listas para producción.

¿Funciona esto sin conexión después de la primera carga?

Sí. La lógica de conversión de color y contraste se ejecuta en el lado del cliente.

¿Puedo comprobar el cumplimiento del contraste AAA?

Sí. La insignia AAA de aprobado/reprobado se muestra cuando la proporción es lo suficientemente alta.

¿Puedo compartir el color seleccionado a través de URL?

Sí. El color actual se expone a través de parámetros compartibles.

Color Picker With HEX RGB HSL Converter and Contrast Checker

TonoAlfa 1.00

Pegar HEX/RGB/HSL para saltar

HEX#2EA8E6

RGBrgb(46, 168, 230)

RGBArgba(46, 168, 230, 1.00)

HSLhsl(200, 79%, 54%)

HSLAhsla(200, 79%, 54%, 1.00)

Colores recientes

Verificador de contraste

Primer planoFondo

El veloz murciélago hindú comía feliz cardillo y kiwi.

Relación de contraste: 21.00:1

AA ApruebaAAA Aprueba

Herramientas relacionadas

CSS Gradient Generator

developer

Build linear, radial, and conic gradients with presets and copy-ready CSS output.

Try it free

HTML CSS JS Minifier

developer

Minify HTML, CSS, and JavaScript instantly with size savings stats.

Try it free

Base64 Encoder Decoder

developer

Encode and decode text/files to Base64 with drag-and-drop support.

Try it free

Insertar esta herramienta

Agrega esta herramienta a tu sitio web con un fragmento iframe.

<iframe src="https://dukotools.com/tools/color-picker?embed=1" width="100%" height="600" frameborder="0" allow="clipboard-write" loading="lazy" title="color-picker tool"></iframe>

About Color Picker & Converter

Color Picker & Converter ofrece un flujo de trabajo de selección de color basado en lienzo con conversión en vivo entre formatos HEX, RGB, RGBA, HSL y HSLA. Admite interacciones táctiles y del mouse a través de un lienzo de saturación-brillo y un control deslizante de tono, lo que lo hace práctico en computadoras de escritorio y dispositivos móviles. Los colores recientes se almacenan en localStorage para que los diseñadores y desarrolladores puedan volver a visitar las paletas en todas las sesiones. Un verificador de contraste calcula la relación WCAG y el estado de aprobación/rechazo para objetivos AA y AAA. Esto hace que la herramienta sea valiosa para el diseño de la interfaz de usuario, las auditorías de accesibilidad y la transferencia de la implementación del frontend.

Características clave

Interacción del selector de lienzo
Seleccione la saturación y el brillo en un lienzo visual para una exploración intuitiva del color.
Controles de tono y alfa
Ajuste el tono y la transparencia por separado para lograr un ajuste de estilo preciso.
Conversión multiformato
Lea y copie instantáneamente representaciones HEX, RGB, RGBA, HSL y HSLA.
Análisis de entrada
Pegue valores de texto HEX, RGB o HSL y salte el estado del selector al color correspondiente.
Memoria de color reciente
Mantiene los 10 colores más recientes en el almacenamiento del navegador para una rápida reutilización de la paleta.
Comprobador de contraste WCAG
Calcule la proporción y el estado AA/AAA para combinaciones de colores de primer plano y fondo.

Cómo utilizar

1
Elige el color base en el lienzo.
Utilice el tacto o el mouse para configurar visualmente la saturación y el brillo.
2
Ajustar tono y alfa
Ajuste la familia de colores y la transparencia con controles de rango.
3
Copiar el formato deseado
Elija salida HEX, RGB, RGBA, HSL o HSLA y copie con un solo clic.
4
Comprobar contraste de accesibilidad
Ingrese valores de primer plano y de fondo para evaluar el cumplimiento de las WCAG.
5
Guardar favoritos
Utilice la memoria de color reciente para volver a aplicar los colores de la paleta en todas las sesiones.

Casos de uso del mundo real

Traspaso de diseño

Un diseñador comparte tokens HSLA y HEX exactos con ingeniería frontend para su implementación.

Control de calidad de accesibilidad

Un especialista en control de calidad valida las combinaciones de texto y fondo según los criterios AA y AAA.

Iteración de la paleta de marcas

Un especialista en marketing explora tonos y reutiliza rápidamente colores recientes para los activos de la campaña.

Preguntas frecuentes

Related Free Tools

Explore these tools that work great alongside Color Picker & Converter:

CSS Gradient Generator

Build linear, radial, and conic gradients with presets and copy-ready CSS output.

HTML CSS JS Minifier

Minify HTML, CSS, and JavaScript instantly with size savings stats.

Base64 Encoder Decoder

Encode and decode text/files to Base64 with drag-and-drop support.