Elige un color, copia el código y sigue trabajando

Selector de color, creador de degradados y cuentagotas de imágenes en una sola página. Sin cuenta, sin instalación y sin esperas: elige un tono y cópialo como HEX, RGB, HSL o HSV.

%
Abrir página del color

Códigos de color

HEX#0F37FF
RGBrgb(15, 55, 255)
HSLhsl(230°, 100%, 52.94%)
HSVhsv(230°, 94.12%, 100%)
CMYKcmyk(94.12%, 78.43%, 0%, 0%)
XYZxyz(19.61, 10.05, 95.5)
LABlab(37.93, 62.96, -98.45)
LCHlch(37.93, 116.86, 302.6°)

Colores en tendencia

Ver todos los colores en tendencia
#A5E3FE
#8E1025
#65E76F
#046B8B
#C37B3C
#C02148
#B5A9D0
#F29C8C
#2C3F44
#F04777
#3B89B0
#7CD0B2

Qué incluye

Cuentagotas

Toma colores de una imagen subida, o de cualquier cosa en pantalla si tu navegador lo permite. Suelta un archivo en la página y haz clic en un píxel para leer sus valores.

Conversión de formatos

Cambia al instante entre HEX, RGB, HSL, HSV, CMYK, XYZ, LAB y LCH, y copia cualquiera de ellos directamente a CSS o a tu herramienta de diseño.

Creador de degradados

Añade y arrastra paradas por la barra, alterna entre lineal y radial, ajusta el ángulo y la opacidad, y copia el CSS terminado.

Historial de colores

Cada color y degradado que creas se guarda en tu navegador, para que puedas volver a él más tarde o reutilizarlo en otro proyecto.

Armonías y variaciones

Cada página de color muestra tintes, sombras y seis esquemas de armonía, y convierte cualquiera de ellos en un degradado con un clic.

Gratis y privado

No hay muro de pago ni seguimiento de lo que eliges. Las imágenes que subes se leen en el navegador y no se envían a ningún sitio.

Para quién es

Diseñadores y equipos de producto
Para esbozar una interfaz o una paleta de marca, explorar combinaciones y copiar el CSS exacto de un degradado.
Ilustradores y artistas
Para tomar muestras de fotografías y pinturas con el cuentagotas, y planificar sombreados suaves con la herramienta de degradado.
Desarrolladores front-end
Para producir valores de color consistentes en un proyecto y extraerlos de un diseño existente.
Quien revise accesibilidad
Para comparar un color entre modelos y ajustarlo hasta que el ratio de contraste supere la pauta que necesitas.

Cómo se usa

  1. 1

    Elige un color

    Haz clic en cualquier punto del campo de saturación y luego afina con los deslizadores de tono y alfa. Los valores HEX, RGB y HSV se actualizan sobre la marcha.

  2. 2

    Toma una muestra de una imagen

    Arrastra una imagen a la página o selecciona un archivo, y haz clic en el píxel que quieras. Los códigos aparecen al instante.

  3. 3

    Crea un degradado

    Haz clic en la barra para añadir una parada y arrástrala a su sitio. Cambia entre lineal y radial y ajusta el ángulo.

  4. 4

    Copia y reutiliza

    Copia el valor o la declaración CSS completa. Todo lo que eliges se guarda automáticamente en tu historial.

Preguntas frecuentes

Una herramienta pequeña que no estorba

Empezó como una utilidad interna: queríamos tomar un color, ajustarlo y seguir, sin abrir antes una aplicación de diseño pesada. Es deliberadamente una sola página, deliberadamente rápida, y seguirá siendo gratuita.

Extensiones de navegador

¿Prefieres tomar colores directamente de las páginas que visitas? Las extensiones de Chrome y Edge añaden un botón de cuentagotas a tu barra, guardan su propio historial y abren esta herramienta con un clic.

Abrir Chrome Web StoreAbrir Microsoft Edge Add-ons