EspañolES

Selector de color y conversor de códigos de color

Elige un color o pega cualquier código de color: todos los formatos se actualizan al instante.

Tus textos y archivos no salen de tu navegador: no se envía nada a ningún servidor.

#0F766E
Códigos de color

Más claros (mezcla con blanco)
Más oscuros (mezcla con negro)

Haz clic en una muestra para usar ese color. La cifra es el porcentaje de mezcla.

Variables CSS

Cómo se usa

  1. Haz clic en el cuadro de color para elegir un color, o pega un código en cualquier campo, como HEX o RGB.
  2. Al editar un campo se actualizan todos los demás. Puedes escribir solo los tres números, sin “rgb(”.
  3. Elige un color cercano en las filas de tonos claros y oscuros: al hacer clic en uno, pasa a ser el nuevo color base.
  4. Pon nombre a tu variable en “Variables CSS” y copia el bloque en tu hoja de estilos. El color se guarda en la dirección de la página, así que puedes compartir el enlace tal cual.

Preguntas frecuentes

¿Qué diferencia hay entre HEX y RGB?

Describen el mismo color con notaciones distintas. HEX escribe los valores de rojo, verde y azul (0–255) con dos dígitos hexadecimales cada uno, y RGB escribe esos mismos valores en números decimales.

¿Los valores CMYK se imprimen igual que en pantalla?

El CMYK que ves aquí es una conversión matemática simple, pensada como punto de partida. Los colores impresos reales dependen del papel, la tinta y el perfil de color de la impresora, así que confirma los valores con tu imprenta.

¿Qué es OKLCH?

OKLCH describe un color por su luminosidad percibida (L), su croma (C) y su tono (H). El CSS moderno admite oklch() directamente, y si cambias solo la luminosidad, el tono se mantiene coherente a la vista.

¿Por qué no veo el botón “Tomar de la pantalla”?

Solo aparece en navegadores de escritorio compatibles con la API EyeDropper, como Chrome y Edge. En otros navegadores, prueba el cuentagotas de imagen para sacar colores de una foto.

Herramientas relacionadas

Cuentagotas de imagenToma colores y una paleta de tu fotoContraste de colorRelación de contraste con resultados AA y AAAPaleta para Tailwind CSSDe un color a una escala de 50 a 950Degradado CSSDegradados lineales, radiales y cónicos

Todas las herramientas