#3B82F6
Color HTML / CSS
rgb(59, 130, 246)
hsl(217, 91%, 60%)
hsv(217, 76%, 96%)
cmyk(76%, 47%, 0%, 4%)
Qué hace
El Selector y conversor de colores te deja elegir cualquier color y verlo al instante en cinco formatos - HEX, RGB, HSL, HSV y CMYK - junto a una vista previa en vivo. Edita un valor en cualquiera de esos formatos y todos los demás se actualizan desde la misma fuente de verdad, así que los valores nunca pueden divergir. También indica el color CSS con nombre más cercano, te dice si el texto negro o blanco se mantiene legible sobre él (WCAG AA/AAA), y recuerda tus colores recientes. Elige con el cuadro de color nativo, escribe un código hex, mueve los deslizadores HSL, aleatoriza o - en navegadores Chromium - toma un color directamente de tu pantalla con el cuentagotas. Todo se ejecuta 100% en el cliente: el color que eliges nunca sale de tu navegador.
Cómo usarlo
- Elige un color de partida: el cuadro de color nativo, el campo HEX, el cuentagotas de Pantalla (solo Chromium), los deslizadores HSL o Aleatorio.
- Observa cómo la muestra de vista previa en vivo (con su color con nombre más cercano) y las cinco tarjetas de formato se actualizan juntas.
- Para convertir desde otro espacio, edita directamente los campos R/G/B, H/S/L, H/S/V o C/M/Y/K - escribe un número y sal con Tab (o pulsa Enter) para confirmarlo.
- Consulta la Legibilidad del texto para ver si el texto negro o blanco supera WCAG AA/AAA sobre este color, con las razones de contraste exactas.
- Haz clic en cualquier muestra Reciente para volver a un color que acabas de usar.
- Pulsa Copiar en cualquier tarjeta para copiar la cadena de ese formato (
#3B82F6,rgb(59, 130, 246), …), o Copiar enlace para compartir para enviar el color exacto a otra persona.
Ejemplos
Azul primario → todos los formatos
Elige #3b82f6:
HEX: #3B82F6
RGB: rgb(59, 130, 246)
HSL: hsl(217, 91%, 60%)
HSV: hsv(217, 76%, 96%)
CMYK: cmyk(76%, 47%, 0%, 4%)
Name: royal blue
Text: #000000 (5.71:1 - AA pass)Convertir HSL a hex
Introduce H 0, S 0%, L 50% → un gris neutro:
HEX: #808080
RGB: rgb(128, 128, 128)Compartir un color
Elige un color y la URL pasa a ser …/tools/color-picker?c=3b82f6 - ábrela donde sea para aterrizar en exactamente el mismo color.
Buen saber
- Una sola fuente de verdad: cada edición pasa por un único RGB normalizado, así que HEX/RGB/HSL/HSV/CMYK siempre coinciden. HSL, HSV y CMYK son representaciones con pérdida, así que un valor que escribas puede mostrarse redondeado al número entero más cercano - es lo esperado, no un fallo.
- Los colores con nombre son aproximados: el “color con nombre más cercano” se compara contra un subconjunto curado de nombres CSS conocidos, así que los tonos inusuales pueden ajustarse a un vecino próximo.
- Cuentagotas: el botón Pantalla usa la EyeDropper API del navegador, disponible en navegadores Chromium (Chrome, Edge, Arc). Se oculta donde no está soportado.
- Compartible: tu color se codifica en la URL (
?c=…), y los colores recientes se guardan localmente en tu navegador - nunca se envían a un servidor. - Privado: toda la conversión ocurre localmente.
- Herramientas relacionadas: Generador de paletas, Comprobador de contraste de color, Playground de animaciones CSS.