Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.
Elige un color en un campo OKLCH: la luminosidad sube por él, el croma lo cruza, y el tono es la tira de debajo. Esa disposición es toda la gracia: en el cuadrado HSV de siempre, «el mismo color, un poco menos saturado» es un movimiento diagonal que nadie encuentra, y aquí es uno horizontal. También toma un color de la pantalla donde el navegador lo permite, y de una imagen que sueltes, que funciona en todas partes.
Elegir
La luminosidad sube por el campo, el croma lo cruza de lado a lado y el matiz es la franja de abajo. El rayado quiere decir que el color existe, pero sRGB no puede mostrarlo.
Este color
L
62,3
C
0,1880
H
259,8°
Notaciones
- hex
#3b82f6 - rgb
rgb(59 130 246) - hsl
hsl(217.22 91.22% 59.8%) - hwb
hwb(217.22 23.14% 3.53%) - lab
lab(54.619% 8.763 -65.791) - lch
lch(54.619% 66.372 277.59) - oklab
oklab(62.308% -0.0332 -0.1851) - oklch
oklch(62.308% 0.188 259.81) - named
#3b82f6
Elegir de una imagen
Suelta una captura o una foto
Haz clic en cualquier punto para tomar ese píxel.
Todo se queda en esta pestaña. Sirve cuando no está la API EyeDropper, que es en casi todos los navegadores.
¿Convertir entre notaciones en bloque? El conversor de color hace eso. ¿Montar una paleta entera a partir de este color? El generador de paletas lo gira en OKLCH.
Cómo se usa
Fija primero el tono y luego muévete por el campo
La tira elige el tono; el campo muestra entonces toda luminosidad y croma disponibles en ese tono. Hacerlo al revés significa perseguir el color, porque cambiar el tono redibuja el campo entero.
O toma uno de la pantalla
«Tomar de la pantalla» abre el cuentagotas del navegador y lee cualquier píxel del escritorio, incluidas otras aplicaciones. Solo existe en navegadores basados en Chromium; en los demás el botón lo dice en lugar de fallar en silencio.
O suelta una captura de pantalla y púlsala
El panel de imagen de abajo acepta cualquier imagen y devuelve el píxel exacto que pulses. Este es el camino que funciona en todos los navegadores, y el que hay que usar cuando falta el cuentagotas.
Copia en la notación que quiera el código
Todas las notaciones están listadas a la vez con su propio botón de copiar. Toma el hexadecimal para una hoja de estilos que tenga que funcionar en todas partes, y el valor `oklch()` cuando el color importe más que la compatibilidad: el hexadecimal es una aproximación mapeada siempre que la muestra está fuera de sRGB.
Guarda los que estés comparando
«Guardar este» conserva hasta doce muestras en una fila a la que puedes volver. Viven solo en la página: una recarga las borra.
Preguntas frecuentes
El botón del cuentagotas de pantalla no hace nada útil. ¿Por qué?
Necesita la API EyeDropper, que solo han incorporado los navegadores basados en Chromium: Chrome, Edge, Arc, Brave. Firefox y Safari no, y no hay ningún polyfill porque leer píxeles arbitrarios de la pantalla es un privilegio que la página no puede concederse a sí misma. Carga una captura de pantalla en el panel de imagen en su lugar; da la misma respuesta.
¿Por qué una gran parte del campo está rayada?
Esas combinaciones de luminosidad y croma existen en OKLCH, pero sRGB no puede mostrarlas en ese tono. Es una propiedad real del espacio, no un fallo, así que la región se raya en lugar de pintarse con el color más cercano que puede mostrar: una pared lisa de color ahí sería una mentira sobre lo que tu pantalla puede hacer. «Traer a sRGB» reduce el croma hasta que el color cabe, manteniendo luminosidad y tono.
¿El cuentagotas conserva la precisión de gama amplia?
No. La API devuelve una cadena hexadecimal sRGB, así que un color Display P3 en pantalla ya se ha convertido cuando esta página lo ve. Para un color P3 cuyo valor conoces, escribe la forma `oklch()` o `color(display-p3 ...)` en el conversor de color en su lugar.
¿La imagen que suelto se sube a algún sitio?
No. Se descodifica en un canvas de esta pestaña y se lee píxel a píxel ahí. Nada sale del navegador, y cerrar la pestaña la descarta.
Puede recibir de
Conversor de códigos de color
Colour Format Converter
Convierte un color entre HEX, RGB, HSL, HWB, LAB, LCH y OKLCH, y nombra el color conocido más próximo.
Comprobador de contraste
Contrast Checker
Puntúa una pareja de color de texto y fondo contra WCAG 2 y APCA, y propone el color válido más cercano.
Generador de paletas
Palette Generator
Construye una paleta armónica a partir de un color base con reglas de complementarios, tríadas y análogos.
Generador de degradados CSS
CSS Gradient Builder
Compone degradados lineales, radiales y cónicos con paradas que se arrastran, y emite el CSS en sRGB o en OKLCH.
Después
Estas aceptan lo que produce esta herramienta, así que el resultado puede pasar directamente.
Conversor de códigos de color
Colour Format Converter
Convierte un color entre HEX, RGB, HSL, HWB, LAB, LCH y OKLCH, y nombra el color conocido más próximo.
Escala de tonos y sombras
Tint & Shade Scale
Genera una escala de luminosidad de 50 a 950 desde un solo color con pasos perceptualmente iguales, lista para usar como tokens de diseño.
Comprobador de contraste
Contrast Checker
Puntúa una pareja de color de texto y fondo contra WCAG 2 y APCA, y propone el color válido más cercano.
Extractor de paleta de una imagen
Palette Extractor
Saca una paleta de N colores de una imagen y la exporta en hexadecimal, como variables CSS o como muestrario ASE.
Generador de paletas
Palette Generator
Construye una paleta armónica a partir de un color base con reglas de complementarios, tríadas y análogos.
Calculadora de proporción
Aspect Ratio Calculator
Calcula la medida que falta para una proporción dada y enumera los tamaños estándar que coinciden.