Softonic

Selector de color HEX

Paso 1 / 4 Hex color

Los diseñadores y desarrolladores manejan el mismo color a través de cuatro notaciones cientos de veces al día. Haz clic en cualquier lugar del campo de saturación/valor 2D, arrastra el control deslizante de matiz o pega un valor, y este selector muestra HEX, RGB, HSL, HSV y CMYK uno al lado del otro — con verificaciones de contraste WCAG contra negro y blanco para que sepas de inmediato si el color es legible.

Cómo seleccionar un color

  1. 1

    Elige un matiz

    Arrastra el control deslizante de matiz vertical a través del espectro completo de 0-360°.

  2. 2

    Selecciona saturación y valor

    Haz clic o arrastra dentro del cuadrado 2D para establecer cuán vívido y cuán brillante es el color.

  3. 3

    Ajusta con las entradas

    Escribe valores exactos en HEX, RGB, HSL, HSV o CMYK — los cinco campos permanecen sincronizados.

  4. 4

    Verifica la accesibilidad y copia

    Las proporciones de contraste contra negro y blanco aparecen en línea; un clic copia la notación que necesitas.

Notaciones de color en la práctica

Cada modelo de color responde a una pregunta ligeramente diferente.

Referencia de notación

Notación Componentes Dónde se usa
HEX #RRGGBB CSS, herramientas de diseño, guías de marca
RGB rojo 0-255, verde 0-255, azul 0-255 CSS rgb(), editores de imágenes
HSL matiz 0-360°, saturación %, luminosidad % CSS hsl(), sistemas de diseño
HSV/HSB matiz 0-360°, saturación %, valor/brillo % Photoshop, selectores de color de Figma
CMYK cian %, magenta %, amarillo %, clave/negro % Impresión, preimpresión
OKLCH luminosidad %, croma, matiz Paletas del Módulo de Color CSS Moderno 4

Contraste de accesibilidad

WCAG 2.2 define las proporciones de contraste mínimas entre texto y fondo:

El selector calcula la proporción contra blanco y negro en tiempo real. Si un color de primer plano personalizado es crítico, utiliza un verificador de contraste dedicado para cada par.

Consejos

Preguntas frecuentes

Photoshop aplica un perfil de color (generalmente sRGB para pantalla, a menudo diferente para impresión). Los navegadores renderizan HEX sin etiquetar como sRGB. Si tu documento está configurado en Adobe RGB o ProPhoto, los valores de píxel son los mismos pero el color percibido cambia.

Sí — ambos describen rojo completo, con rojo en 255 y verde y azul en 0. HEX es solo una notación hexadecimal de dos dígitos para cada valor de canal de 0-255.

Selecciona tu color primario, cambia a HSL, luego varía la luminosidad en pasos del 10% mientras mantienes el matiz y la saturación bloqueados. Obtienes una escalera coherente de matices y sombras que se sitúan en el mismo matiz.

Los colores utilizados recientemente se guardan en el almacenamiento local de tu navegador para que sobrevivan a una actualización. Nada se envía a un servidor, y puedes borrar el historial de la paleta en cualquier momento.

Herramientas relacionadas

Generador de Paletas de Color

Genera una paleta armoniosa de 4-8 colores a partir de un color base utilizando esquemas complementarios, análogos, triádicos y de complemento dividido.

Generador de Color Aleatorio

Genera un color RGB aleatorio, ve los valores hex, HSL y RGB, y copia cualquier formato con un clic.

Generador de Paletas de Colores Aleatorias

Genera paletas de cinco colores basadas en un tono base aleatorio, con variantes complementarias, análogas y triádicas.

Formateador JSON

Formatea y presenta JSON con indentación ajustable, claves ordenadas y validación en línea que resalta errores en la posición exacta.

Generador de Letras Aleatorias

Genera letras aleatorias del alfabeto inglés. Elige mayúsculas, incluye duplicados o sorteos únicos, y establece cuántas.

Calculadora de Edad

Calcula la edad exacta en años, meses y días a partir de una fecha de nacimiento, además del total de días, horas y la cuenta regresiva para el próximo cumpleaños.