Color Picker

Color Picker Web es el mejor selector de color en línea gratuito en 2026. admite más de 20 formatos de color, incluidos HEX, RGB, HSL, CMYK, HSB, LAB, XYZ, HWB y más. Incluye una rueda de colores vivos, contraste WCAG corrector, simulador de daltonismo, generador de paleta, color de imagen selector y 6 tipos de armonía, todo completamente gratis sin necesidad de registrarse requerido.

Para encontrar un código de color HEX de una imagen, utilice el Selector de color de imagen en la web del selector de color. Sube cualquier foto, coloca el cursor sobre el área que desees para probar y haga clic para extraer los códigos HEX, RGB y HSL exactos desde cualquier píxel. También puedes generar automáticamente una paleta de colores completa desde la imagen en un solo clic.

Una herramienta de selección de color le permite seleccionar, convertir y analizar colores. eso muestra valores de color en múltiples formatos (HEX, RGB, HSL, CMYK), genera paletas de colores complementarias, comprueba la accesibilidad WCAG relaciones de contraste, simula el daltonismo y extrae colores de imágenes subidas. Es esencial para diseñadores web, desarrolladores y diseñadores de marcas.

Para convertir HEX a RGB, utilice la herramienta de conversión anterior. Ingrese cualquier HEX código (por ejemplo, #9333ea) y obtenga salida RGB instantánea (147, 51, 234). Manualmente: divida el HEX en 3 pares (93, 33, cada uno), convierta cada uno de hexadecimal a decimal. R=147, G=51, B=234. Color Picker Web lo hace esto al instante para los más de 20 formatos.

Según WCAG 2.2, la relación de contraste de color mínima para condiciones normales El texto es 4,5:1 (Nivel AA) y 7:1 (Nivel AAA). Para texto grande (18pt+ o 14 puntos+ negrita), el mínimo es 3:1 para AA y 4,5:1 para AAA. interfaz de usuario Los componentes e íconos requieren al menos un contraste de 3:1 con respecto a los adyacentes. colores. Utilice el Comprobador de contraste WCAG de arriba para probar sus colores.

Para elegir un color de un sitio web: (1) Utilice DevTools del navegador: Haga clic con el botón derecho en cualquier elemento, inspecciónelo y haga clic en la muestra de color en Panel CSS. (2) Utilice una extensión de navegador como ColorZilla. (3) Tome un captura de pantalla y cárguela en el Selector de color de imagen de Color Picker Web para muestrear cualquier píxel. Chrome DevTools también tiene un cuentagotas integrado en el panel selector de color.

HSL significa Tono, Saturación y Luminosidad. El tono (0°–360°) es el tipo de color en la rueda de colores. La saturación (0%-100%) es qué tan vívido o gris el color es. Luminosidad (0%–100%) es qué tan oscuro o claro aparece el color. Ejemplo: hsl(270, 81%, 56%) es un violeta medio. HSL es el mejor formato para animaciones CSS y temas de color dinámicos porque cada propiedad se puede ajustar de forma independiente.

Complementary colors are pairs of colors that sit directly opposite each other on the color wheel, 180° apart. Examples: red & green, blue & orange, purple & yellow. When placed side by side, complementary colors create strong contrast and make each color appear more vivid. They are commonly used for CTAs, logos, and high-impact UI elements.

Una herramienta de selección de color es una utilidad digital que permite a los usuarios seleccionar cualquier color y recuperar su código exacto en múltiples formatos: HEX, RGB, HSL, CMYK y más. Los diseñadores de UI/UX lo utilizan a diario para elegir colores de interfaz, desarrolladores web codificar valores de color CSS, diseñadores de marcas para mantener la consistencia del color, fotógrafos para extraer colores de imágenes y artistas digitales para paleta creación. Color Picker Web es el color gratuito más completo selector disponible en 2026, compatible con más de 20 formatos de color, WCAG comprobación de accesibilidad, simulación de daltonismo y 18 idiomas.

Un código de color HEX es una representación hexadecimal de 6 caracteres de un Color utilizado en diseño web y CSS. Comienza con un símbolo # seguido por tres pares de caracteres (00–FF), cada uno de los cuales representa el intensidad de los canales rojo, verde y azul. Por ejemplo: #FF0000 es rojo puro (R=255, G=0, B=0), #FFFFFF es blanco (todos los canales en máximo) y #000000 es negro (todos los canales en cero). taquigrafía Los códigos HEX de 3 dígitos como #F00 se expanden a #FF0000. HEX es el más Formato de color universalmente compatible en HTML, CSS, SVG y diseño. herramientas como Figma.

Para elegir colores para un sitio web: (1) Comience con el color principal de su marca. colorea y construye una escala de color completa de 9 pasos (50–900) usando HSL ajustes. (2) Aplique la regla 60-30-10: 60% de fondo neutro, 30% color secundario, 10% acento para CTA. (3) Verificar todo Las combinaciones de texto/fondo pasan el contraste WCAG AA (mínimo 4,5:1). para texto normal). (4) Genere colores de acento armoniosos utilizando el Herramienta Armonía de color: funcionan los esquemas triádicos o complementarios divididos Lo mejor para sitios web. (5) Pruebe cada combinación de colores con un color Simulador de ceguera para garantizar la accesibilidad a todos los usuarios.

Para elegir colores de marca: (1) Investiga la psicología del color: construcciones azules confianza, el verde indica crecimiento, el rojo crea urgencia, el morado sugiere lujo y creatividad. (2) Analice su industria: marcas de tecnología prefieren los azules y grises, las marcas de salud usan verdes, las marcas de lujo usan dorado, negro o morado intenso. (3) Elija un color de marca principal que refleja la emoción central de su marca. (4) Construya una escala a todo color desde su principal usando el método HSL. (5) Elija una secundaria y color de acento usando la teoría de la armonía. (6) Verificar que todas las combinaciones pasen Estándares de accesibilidad WCAG. Documento como tokens de diseño para coherencia en todas las plataformas.

HEX, RGB y HSL son tres formas de representar el mismo color: HEXAGONAL (#9333ea) es un formato hexadecimal compacto de 6 dígitos ideal para CSS y HTML: el más compatible. RGB (rgb(147, 51, 234)) define el color según los valores de los canales rojo, verde y azul de 0 a 255: el mejor para lienzo JavaScript, SVG y renderizado de pantalla. HSL (hsl(270, 81%, 56%)) define el color por ángulo de tono (0–360°), saturación (0–100%) y Luminosidad (0–100%), más intuitivo para los diseñadores porque cada propiedad se puede ajustar de forma independiente, lo que la hace ideal para animaciones CSS y tematización dinámica. Los tres describen colores idénticos pero sirven para diferentes flujos de trabajo.

RGB y CMYK son modelos de color fundamentalmente diferentes para diferentes tipos de salida. RGB (rojo, verde, azul) es un color aditivo modelo utilizado para pantallas digitales: combinar colores agrega luz y mezclar Todos los canales al máximo producen blanco. CMYK (cian, magenta, Amarillo, Clave/Negro) es un modelo de color sustractivo utilizado en la impresión física — Mezclar tintas absorbe la luz y combinarlas todas produce negro. siempre Diseño en RGB para salida digital/pantalla. Convierta a CMYK antes de enviar archivos a imprentas comerciales. La conversión nunca es perfecta: algo de RGB Los colores (especialmente los colores saturados brillantes) no se pueden reproducir en Impresión CMYK.

HSB (Tono, Saturación, Brillo) y HSV (Tono, Saturación, Valor) Son el mismo modelo de color con diferentes nombres. Tono (0°–360°) Identifica la familia de colores. La saturación (0–100%) controla la vitalidad desde gris hasta completamente vívido. Brillo/Valor (0–100%) controla cómo cuánta luz parece emitir el color, desde negro (0%) hasta completamente brillante (100%). HSB es el modelo predeterminado en Adobe Photoshop, Illustrator y el selector de color de Figma, lo que lo hace esencial para diseñadores que utilizan estas herramientas. Se diferencia del HSL en la ligereza. y el brillo se calculan: en HSL, el 50% de luminosidad es puro color, mientras que en HSB, el 100% de brillo es el color puro.

LAB (CIELAB) y XYZ (CIEXYZ) son independientes del dispositivo, perceptivamente Espacios de color uniformes basados en la ciencia de la visión humana. XYZ es la base de toda la ciencia del color moderna: asigna colores a cómo el ojo humano los percibe mediante tres conos (X, Y, Z correspondientes a sensibilidad aproximadamente roja, verde y azul). LABORATORIO se deriva desde XYZ y diseñado de manera que distancias numéricas iguales representen diferencias de color percibidas, lo que lo hace ideal para comparar colores, imágenes procesamiento, aprendizaje automático y control de calidad de impresión. Ambos son usados en gestión de color profesional, perfiles de color ICC e imagen avanzada edición de flujos de trabajo. CSS ahora admite la sintaxis mediante color(xyz...) y lab(...) en los navegadores modernos.

El Selector de color de imagen en Color Picker Web le permite extraer imágenes exactas. colores de cualquier fotografía, captura de pantalla, logotipo o obra de arte. Sube cualquier archivo de imagen, luego haga clic en cualquier píxel para extraer instantáneamente su HEX, Valores RGB y HSL. La herramienta también genera automáticamente un paleta de colores completa a partir de los colores dominantes en su imagen. esto es útil para combinar colores de marca con materiales existentes, crear paletas a partir de paneles de estado de ánimo, extraer colores del producto fotografías y esquemas de color de ingeniería inversa de la competencia sitios web. No se requiere cuenta ni instalación de software: funciona íntegramente en el navegador.

Color Picker Web admite los seis tipos principales de armonía de color según teoría de la rueda de color: Complementario - dos colores directamente opuestos (180° de separación), máximo contraste. Complementario Dividido — un color base más dos colores adyacentes a su complemento (150° y 210°). Triádico — tres colores equidistantes (a 120° de distancia), equilibrado y vibrante. Análogo - tres colores adyacentes (30° de separación), armoniosos y naturales. Monocromático — variaciones de un solo tono en diferentes niveles de saturación y luminosidad. Tetrádico — cuatro colores igualmente espaciados (90° de distancia), complejo y rico. Todas las armonías se calculan matemáticamente en tiempo real. mientras eliges colores.

Sí, Color Picker Web es de uso completamente gratuito: todas las funciones incluido el selector de color, el generador de paleta, el selector de color de imagen, Comprobador de contraste WCAG, simulador de daltonismo, armonías de color, generador de tintes y sombras, y las más de 20 conversiones de formato de color son disponible sin costo alguno. Ninguna cuenta, dirección de correo electrónico o registro es requerido. No hay anuncios, ni límites de uso ni nivel premium. Todas las funciones son permanentemente gratuitas. La herramienta también está disponible en 18 Idiomas: inglés, hindi, español, ruso, francés, alemán, italiano, portugués, bengalí, japonés, coreano, malayo, polaco, Indonesio, árabe, búlgaro, turco y sueco.

Contraste de color WCAG (Pautas de accesibilidad al contenido web) Los requisitos garantizan que el texto sea legible para usuarios con baja visión. daltonismo u ojos envejecidos. La relación de contraste mide la diferencia de luminancia entre el color del texto y su fondo: rango de 1:1 (sin contraste) a 21:1 (máximo, negro sobre blanco). WCAG 2.2 El nivel AA requiere una proporción mínima de 4,5:1 para texto normal y 3:1 para texto grande. El nivel AAA requiere 7:1 para texto normal. Incumplimiento puede resultar en responsabilidad legal según ADA (EE. UU.), EAA (Europa) y Sección 508. Se presentaron más de 4.600 demandas de accesibilidad en EE. UU. solo en 2023, con fallas de contraste entre las más comúnmente citadas problemas.

Color Picker Web simula 8 tipos de deficiencia en la visión del color: Protanopía — ceguera al rojo (1,3% de los hombres). Protanomalía - reducido Sensibilidad al rojo (1,3% de los hombres). Deuteranopía - ceguera verde (1,2% de los hombres). Deuteranomalía — sensibilidad verde reducida (5% de los hombres, el tipo más común). Tritanopía - azul ceguera (0,001% de la población). Tritanomalía - reducido sensibilidad al azul (raro). Acromatopsia - color completo ceguera, sólo ve escala de grises (0,003% de la población). Acromatomalía : percepción de color reducida en todos los canales (muy raro). Cada simulación utiliza una matriz de transformación de color clínica aplicada al color seleccionado en tiempo real.

La psicología del color en el diseño de la interfaz de usuario estudia cómo los colores influyen en el usuario emociones, percepciones y comportamiento. Asociaciones clave: azul — confianza, confiabilidad, calma (usado por Facebook, Twitter, PayPal, LinkedIn). Verde — crecimiento, salud, naturaleza, éxito (usado por Spotify, WhatsApp, marcas de alimentos integrales). rojo - urgencia, pasión, energía, apetito (usado para pancartas de venta, marcas de alimentos, CTA). Púrpura : lujo, creatividad, sabiduría (utilizado por Cadbury, Hallmark, marcas de belleza). Amarillo — optimismo, calidez, atención (usado para advertencias, destacados de venta). Naranja — entusiasmo, amistad (usado por Amazon, Fanta, Harley-Davidson). La psicología del color influye en la conversión tarifas, percepción de marca y retención de usuarios.

La creación de una paleta de colores para un sistema de diseño implica 5 pasos: (1) Definir el color principal de su marca y conviértalo a HSL. (2) Generar un Escala de color de 9 pasos (50–900) ajustando sistemáticamente la luminosidad. paradas más claras (50–300) para fondos y tintes, paradas más oscuras (600–900) para texto y modo oscuro. (3) Repita para secundaria, acento, éxito, advertencia, error y colores neutros. (4) Crear semántica tokens (--color-primario, --color-primario-hover, --color-superficie) que hacen referencia a las paradas de su báscula. (5) Verifique cada texto/fondo pases combinados WCAG AA. Utilice Color Picker Web para generar su escala, verifica el contraste y exporta valores HEX/HSL como tokens de diseño para Figma o CSS.

La regla 60-30-10 es un principio de diseño clásico para crear esquemas de color equilibrados y visualmente atractivos. 60% - dominante/neutral color (fondos, paredes, superficies grandes): generalmente un neutro claro que establece el tono general. 30% — color secundario (muebles, encabezados, barras laterales): complementa el dominante y agrega profundidad. 10% — color de acento (CTA, botones, resaltados, enlaces importantes) — crea interés visual y llama la atención sobre acciones clave. En diseño web esto se traduce en: 60% superficies de fondo y base, 30% áreas de contenido y elementos secundarios de la interfaz de usuario, 10% de botones principales, estados activos e importantes aspectos más destacados. Esta relación evita la sobrecarga visual y al mismo tiempo mantiene la jerarquía.

La luminancia relativa mide el brillo percibido de un color en un escala de 0 (negro) a 1 (blanco). El cálculo: (1) Convertir cada Canal RGB (0–255) a un decimal (0–1) dividiendo por 255. (2) Eliminar la corrección gamma: si el valor ≤ 0,04045, dividir por 12,92; en caso contrario se aplica (valor + 0,055) / 1,055 elevado a la potencia de 2,4. (3) Aplique la fórmula ponderada: L = 0,2126 × R + 0,7152 × G + 0,0722 × B. Los pesos reflejan la sensibilidad del ojo humano, la mayoría sensible al verde, menos al rojo, menos al azul. (4) Relación de contraste = (L_más claro + 0,05) / (L_más oscuro + 0,05). El desplazamiento de 0,05 representa luz ambiental en una pantalla típica. Color Picker Web realiza esto cálculo al instante.

HSL (Tono, Saturación, Luminosidad) y HSB/HSV (Tono, Saturación, Brillo/Valor) utilizan Tono y Saturación pero difieren en el tercer canal. en HSL, la ligereza del 50% es la color puro y completamente saturado; 0% es negro y 100% es blanco. es simétrico. en HSB/HSV, Brillo/Valor del 100% es el color puro; 0% siempre es negro independientemente de otros valores. HSB Es más intuitivo para seleccionar colores porque primero puedes elegir el color vivo con un brillo del 100% y luego oscurecerlo, haciéndolo el valor predeterminado en Photoshop, Figma e Illustrator. HSL es más intuitivo para CSS porque puedes interpolar suavemente entre oscuros y versiones claras del mismo tono.

La mezcla de colores aditiva (RGB) y la mezcla de colores sustractiva (CMYK) son los dos modelos de color fundamentales. Aditivo (RGB) - usado mediante dispositivos emisores de luz (pantallas, proyectores, LED). Se crean colores añadiendo luz. Combinando los tres canales al máximo (R=255, G=255, B=255) produce blanco. Ninguna luz (R=0, G=0, B=0) produce negro. Sustractiva (CMYK) - utilizado en impresión. Las tintas absorben (restan) longitudes de onda de la luz. combinando todas las tintas absorben al máximo toda la luz, produciendo negro (en teoría, en En la práctica, se agrega tinta Key/negra porque la mezcla de tinta es imperfecta). el Implicaciones prácticas: diseñar trabajos digitales en RGB y luego convertirlos a CMYK para imprimir, teniendo en cuenta que algunos colores RGB vívidos no se pueden reproducir en CMYK.

La temperatura de color describe la calidez o frialdad de un color, medido en Kelvin (K) para fuentes de luz y percibido perceptualmente para colores de diseño. Colores cálidos (rojos, naranjas, amarillos (tonos 0°–60° y 300°–360°) se sienten enérgicos, urgentes y atractivos. ellos avance visualmente: los elementos en colores cálidos parecen más cercanos. colores fríos (azules, verdes, morados - tonos 120°–240°) se siente tranquilo, digno de confianza y profesional. Se alejan visualmente: los elementos de colores fríos aparecen más lejos lejos. Neutro (blancos, grises, beiges, verde azulado cerca de 90°–120°) Son equilibrados y versátiles. En el diseño de la interfaz de usuario, los colores cálidos impulsan la acción (CTA). Los colores fríos generan confianza (encabezados, fondos) y los neutros proporcionan estructura. La sección Acerca del color de Color Picker Web muestra la temperatura percibida de cualquier color seleccionado.