Selector de color online

Selector de color y generador de paletas

Este selector de color (o color picker) sirve para dar con un tono y llevarte su código en las notaciones habituales: HEX, RGB, HSL y CMYK. Muestra además el nombre CSS más cercano, nueve tonos del mismo color, sus armonías, el contraste con el blanco y el negro, y compone una paleta de colores de cinco tonos que combinan.

Cómo elegir un color

1. Haz clic o arrastra dentro del cuadrado «Saturación y brillo» y ajusta el control «Tono». Las flechas del teclado también sirven. Tienes además el «Selector del navegador» y, en Chrome o Edge de ordenador, el botón «Cuentagotas».
2. O escribe un código en el campo HEX, RGB o HSL: si tecleas rgb(0,128,0) obtienes #008000, que en CSS se llama green. Cada línea tiene su botón «Copiar».
3. En «Tonos» y «Armonías de color», un clic en una muestra la selecciona y copia su código.
4. «Generar una paleta» (o la barra espaciadora) saca cinco colores. Marca «Bloquear» en los que quieras conservar y vuelve a generar. Con «Copiar los códigos HEX», «Copiar como variables CSS» y «Guardar la paleta» te la llevas; se guardan hasta diez paletas en el dispositivo.

El color actual queda escrito en la dirección de la página, detrás del signo #: comparte esa dirección y la otra persona verá el mismo color. También se recuerda para tu próxima visita.

HEX, RGB o HSL: cuál usar

Las tres describen los mismos colores de pantalla. HEX es la más corta: #008000 ocupa siete caracteres y es la que se pega en una hoja de estilos o en un programa de diseño. RGB indica la cantidad de rojo, verde y azul de 0 a 255: rgb(0, 128, 0). HSL separa el tono (un ángulo de 0 a 360°), la saturación y la luminosidad: hsl(120, 100%, 25%). Es la más cómoda para retocar un color a mano: subes el último número para aclarar y giras el primero para cambiar de color. El sitio tiene también convertidores dedicados a cada par de formatos, por ejemplo de HEX a RGB.

Cómo combinar colores

Imagina todos los tonos colocados en un círculo: rojo a 0°, verde a 120°, azul a 240°. Las armonías son simples distancias sobre ese círculo cromático. Partimos del verde #008000, tono 120°:

• Complementario (120 + 180 = 300°): el morado #800080.
• Análogos (90° y 150°): #408000 y #008040.
• Tríada (240° y 0°): el azul marino #000080 y el granate #800000.

La herramienta añade la tétrada (cada 90°) y los complementarios adyacentes (±150°). Para repartirlos, decoradores y diseñadores gráficos suelen tirar de la referencia 60-30-10: un 60 % de color dominante (paredes, fondo de página), un 30 % de color secundario (muebles, bloques) y un 10 % de color de acento (cojines, botones).

Legibilidad y contraste

Un texto se lee bien cuando su luminosidad se separa con claridad de la del fondo. Las pautas de accesibilidad WCAG miden esa separación con una relación que va de 1:1 a 21:1 (negro sobre blanco). Piden al menos 4,5:1 para un texto normal, nivel AA, porque por debajo las personas con menos agudeza visual, o cualquiera que mire el móvil a pleno sol, tienen dificultades para leer. A un texto grande (24 px, o 18,66 px en negrita) le basta con 3:1. El nivel AAA exige 7:1 y 4,5:1.

Con cifras: el verde #008000 sobre blanco da 5,13:1 y cumple el nivel AA. El amarillo #ffff00 sobre blanco se queda en 1,07:1, ilegible, mientras que sobre negro alcanza 19,55:1.

Ten presente el daltonismo, que afecta a cerca del 8 % de los hombres y al 0,5 % de las mujeres: el rojo y el verde se confunden con facilidad. No transmitas nunca una información solo con el color. Un campo con error necesita un mensaje o un icono, no únicamente un borde rojo.

Pantalla e imprenta

Una pantalla emite luz y mezcla rojo, verde y azul (RGB). Una impresora deposita tintas cian, magenta, amarilla y negra (CMYK) sobre el papel. Muchos colores muy vivos de pantalla no existen en tinta: un azul eléctrico saldrá más apagado. El código CMYK que ves aquí es una conversión teórica, sin perfil de color.

Códigos de colores más usados

Preguntas frecuentes

¿Cómo saco el código de un color que veo en pantalla?

Con el botón «Cuentagotas», si tu navegador lo muestra: púlsalo y haz clic en el punto que te interesa. El código aparece al momento en las cuatro notaciones.

¿Qué es el «Nombre CSS más cercano»?

CSS reconoce 140 colores por su nombre en inglés, de aliceblue a yellowgreen. La herramienta busca el que tiene los valores RGB más próximos a tu color e indica «coincidencia exacta» cuando los códigos son idénticos.

¿Cómo se calculan los tonos?

Conservan el tono y la saturación de tu color y recorren la luminosidad HSL del 90 % al 10 %, de diez en diez.

¿Cómo mantengo un color al regenerar la paleta?

Marca «Bloquear» debajo de ese color. En la siguiente generación se queda en su sitio y los nuevos se eligen alrededor de su tono. Las paletas guardadas se quedan en tu navegador, solo en este dispositivo.