Selector de códigos de color
Todos los formatos, un solo color
Este selector de códigos de color convierte hex a rgb, rgb a hex, y ambos a hsl, hsv y cmyk mientras escribes. Además añade opacidad, una escala de tintes y sombras, y una lectura de contraste que dice si el texto se puede leer sobre el color.
- PrecioGratis
- Formatos6
- RegistroNinguno
- SubidoNada
Selector de códigos de color
HEX, RGB y HSL, con contraste y una escala de tonos
- Sobre blanco
- —
- Sobre negro
- —
El contraste decide si se pueden poner palabras sobre este color. AA pide 4,5:1 para el texto normal.
Un color no aprueba ni suspende por sí solo. Pon el color del texto sobre el color de fondo y esto lee la proporción igual que WCAG.
Los tres botones de arriba mueven un color hasta que la pareja supera AA con 4,5:1. El tono y la saturación no cambian, así que el color sigue perteneciendo a tu paleta.
El texto grande se ve así
El texto pequeño se ve así. Es el tamaño de casi toda tu página, así que es el que decide si la pareja sirve. Lee esta línea y fíate de tus ojos además de la cifra.
Y esta es la letra pequeña para la que nadie diseña.
Listo. Escribe un color en cualquiera de los tres campos.
Un color, escrito de seis formas
Un color no tiene una única forma de escribirse. El mismo azul es #1B5FD1 en una hoja de estilos, rgb(27, 95, 209) en una llamada de canvas y hsl(217, 77%, 46%) en un token de diseño.
Todos nombran los mismos píxeles. Así que convertir hex a rgb no cambia nada del color, solo quién puede leerlo.
Lo incómodo es que cada formato sirve para un trabajo distinto. Por lo tanto, una página que muestra uno y oculta el resto te manda a buscar otra página.
Este selector de códigos de color los muestra todos a la vez, y reescribe cada campo en cuanto editas cualquiera de ellos.
El uso de cada notación de color
Primero, el hex es corto y se pega sin problemas. Es el formato que te pasa un diseñador y el que llevan la mayoría de las hojas de estilos.
RGB nombra los tres canales de forma clara. Por eso sirve para todo lo que hace cálculos con un color: un canvas, un degradado, un shader.
HSL separa el tono de la luminosidad. Es el que conviene cuando quieres el mismo color un poco más oscuro, porque cambias un solo número.
La opacidad pertenece a rgba y hsla más que al hex, aunque un hex de ocho dígitos también la lleva. Esta página escribe la forma que necesites.
Pasar de hex a RGB con papel y lápiz
Un color hex son tres pares, y cada par es un canal escrito en base dieciséis. Así, #1B es el canal rojo.
Cada par se convierte en un número de 0 a 255. Las letras de la a a la f simplemente siguen contando después del 9, así que 1B significa un dieciséis más once, es decir, 27.
Un hex de tres caracteres duplica cada dígito. Por lo tanto, #abc significa #aabbcc, una abreviatura que conviene conocer cuando lees la hoja de estilos de otra persona.
En sentido contrario, de rgb a hex, cada canal vuelve a convertirse en dos dígitos hex. La referencia de MDN sobre valores de color lista todas las sintaxis que acepta un navegador.
Por qué el número de contraste está aquí
La pregunta que sigue a "¿qué color es este?" casi siempre es "¿puedo poner texto encima?". Por eso la respuesta está junto al color y no en otra página.
Las dos lecturas comparan tu color con el blanco y con el negro. Una ratio de 4.5:1 aprueba AA para texto normal, mientras que 3:1 solo aprueba para texto grande.
Esos umbrales vienen de WCAG, y todos los comprobadores los calculan igual. Este sigue la fórmula exactamente en lugar de redondearla.
Un color que falla como texto puede seguir sirviendo como fondo, borde o relleno de un gráfico. La nota bajo las lecturas dice en qué caso estás.
Leer HSL sin matemáticas
Primero, el tono es un ángulo alrededor de una rueda de color. Cero es rojo, 120 es verde, 240 es azul, y los números intermedios los mezclan.
Luego, la saturación es cuánto color hay. Al 0% cualquier tono se vuelve gris, y al 100% es tan vivo como permite la pantalla.
La luminosidad va del negro al 0% al blanco al 100%. Tu color está en el 50%, y por eso un color de marca suele quedar cerca de ahí.
Así que un botón más oscuro tiene el mismo tono y saturación con una luminosidad menor. Es un solo número, y la familia sigue pareciendo emparentada.
Cuándo dos colores no deberían juntarse
Algunas parejas se leen mal aunque el número de contraste apruebe. Rojo sobre verde es el ejemplo habitual, porque la ratio ignora el daltonismo.
Aproximadamente uno de cada doce hombres ve el rojo y el verde de otra forma. Por lo tanto, un gráfico que separa sus líneas solo por el tono las pierde.
En su lugar, añade una segunda señal. Una etiqueta, un patrón de trazos o una forma llevan el significado cuando el color no lo hace.
Y además prueba en escala de grises. Si la imagen se sigue leyendo sin color, se lee para todo el mundo.
Hay otra pareja que engaña a la gente: un gris medio sobre un color medio. Ambos quedan cerca del centro de la escala, así que la ratio baja de tres y las palabras se difuminan en el panel de detrás.
Dónde acaba cada código
CSS acepta las tres formas, así que usa la que mejor se lea en el archivo. La mayoría de los equipos escriben hex para colores fijos y hsl dentro de un cálculo.
Las herramientas de diseño tienden al hex. Es lo que lleva un archivo de entrega, y lo que un desarrollador pegará primero.
El móvil es distinto. Swift quiere cada canal de 0 a 1, y Android quiere un hex de ocho dígitos con la opacidad delante.
Esta página escribe todas esas formas, así que un color pasa de un archivo de diseño a una app sin que nadie haga cálculos.
La escala mezcla, no adivina
Cada paso mezcla tu color hacia el blanco o hacia el negro en una cantidad fija. Así, el tono se mantiene mientras cambia la luminosidad, que es justo lo que debe hacer un conjunto de tonos.
En esta página
- La herramienta
- Un color, escrito de seis formas
- Cómo usar el selector de códigos de color
- Lo que distingue a este selector de códigos de color
- Trabajar con códigos de color con sensatez
- Cinco formas en que un color sale mal
- Preguntas frecuentes sobre el selector de códigos de color
- Herramientas para la misma tarde
Sigue leyendo
Cómo usar el selector de códigos de color
Escribe en el campo que ya tengas. Los dos restantes van detrás.
- 1
Pega cualquier formato
Hex con o sin almohadilla, rgb con cualquier puntuación, o hsl. El selector lee los tres.
- 2
O elige en la muestra
El cuadrado de color de la barra abre el selector de tu sistema. Al arrastrarlo, todos los campos se actualizan en directo.
- 3
Ajusta la opacidad
Bájala de 100 y la salida pasa a rgba y hsla, con un hex de ocho dígitos al lado.
- 4
Copia lo que necesites
Toma una línea, o todo el bloque con las formas de CSS, Swift y Android ya escritas.
Lo que distingue a este selector de códigos de color
Convertir hex a rgb lleva cuatro líneas de código. Lo útil es todo lo que lo rodea.
Tres campos, un color
Edita cualquier campo y los otros dos se reescriben solos. Nada espera a un botón, así que puedes pegar y leer de un solo gesto.
Contraste incluido
La ratio frente al blanco y al negro está bajo la muestra, con el veredicto AA escrito en palabras en lugar de dejarlo como un número que interpretar.
Una gama de tonos preparada
Nueve pasos, desde cuatro quintos más claro hasta cuatro quintos más oscuro, cada uno con su hex. Normalmente es toda la paleta que necesita un componente.
Opacidad en todas las formas
Un solo número cambia la salida a rgba, hsla y hex de ocho dígitos a la vez, porque cada archivo quiere uno distinto.
Entiende entradas descuidadas
Espacios, almohadillas que faltan, signos de porcentaje y la nueva sintaxis con barra se interpretan bien. Así, un valor copiado de cualquier sitio funciona.
Todo se queda en esta pestaña del navegador
Tu navegador hace cada cambio de formato. Un color de marca sin lanzar nunca llega a este sitio, porque no se hace ninguna petición.
Trabajar con códigos de color con sensatez
Seis hábitos que mantienen una paleta útil y no solo bonita.
- Ten un único sitio donde viven tus colores. Guarda el color en una variable CSS y convierte desde ahí. Dos copias escritas a mano se separan en un mes.
- Cambia la luminosidad, no el tono. Para una versión más oscura, mueve la L de hsl. En cambio, retocar el hex a ojo también desplaza el tono, y el conjunto deja de parecer emparentado.
- Comprueba el texto antes de decidir. Un color de marca que falla a 4.5:1 fallará en cada auditoría que hagas. Descúbrelo ahora y no después de la maquetación.
- Escribe el hex en minúsculas. Ambas formas funcionan, así que esto solo afecta a los diffs. Una sola convención mantiene legible tu historial de versiones.
- Deja la opacidad fuera de los colores de marca. Un color al 60% sobre un fondo desconocido es impredecible. Elige mejor el color ya mezclado, y así podrás probarlo.
- Prueba sobre el fondo real. Tu página rara vez es blanco puro. Comprueba el color contra la sección donde irá de verdad, porque esa es la pareja que ve un visitante.
- Guarda un paso intermedio. Una paleta con solo un claro y un oscuro se queda corta enseguida. Un valor intermedio cubre estados hover, bordes y elementos desactivados, y lo necesitarás mucho antes de lo que crees.
- Nombra el paso, no el matiz. Llámalo blue-600 en lugar de dark-blue. Entonces cambiar la paleta más adelante modifica un valor en vez de todos los nombres.
Cinco formas en que un color sale mal
Cada una convierte una decisión de color en un fallo que otra persona tiene que encontrar.
Fiarse de una captura
Los colores tomados de una captura comprimida se desvían unos puntos. En su lugar, tómalos del archivo original.
Ignorar el fondo
El contraste es una pareja, nunca un solo color. Un azul que aprueba sobre blanco puede fallar mucho sobre la sección de tu página.
Usar opacidad para un tono claro
Atenuar un color al 20% depende de lo que haya debajo. Mezclarlo hacia el blanco da el mismo aspecto y sigue siendo predecible.
Usar hex de ocho dígitos en todas partes
Los navegadores antiguos y varias herramientas de diseño ignoran el par alfa. Por eso, escribe rgba donde lo lea algo que no sea un navegador moderno.
Redondear HSL y volver a convertir
Aquí HSL se redondea a números enteros, así que ida y vuelta puede mover un canal en uno. Guarda el hex como valor de referencia.
Preguntas frecuentes sobre el selector de códigos de color
¿Qué cuentas hago para pasar de hex a rgb a mano?
Divide los seis caracteres en tres pares y lee cada par en base dieciséis. Así, #1B5FD1 se convierte en 27, 95, 209. Un hex de tres caracteres duplica primero cada dígito.
¿Por qué mi resultado de rgb a hex difiere en uno?
Casi siempre por un redondeo en algún punto de la cadena. El hex guarda números enteros de 0 a 255, así que un valor que llegó como porcentaje o a través de HSL puede quedar un punto arriba o abajo.
¿Para qué sirven los hex de ocho cifras?
El último par es la opacidad, de 00 para invisible a ff para sólido. Todos los navegadores actuales lo leen, aunque algunos programas de diseño antiguos lo descartan en silencio.
¿Qué formato debo guardar?
Hex para los colores de marca, porque es exacto y corto. Convierte a HSL cuando necesites un paso más claro o más oscuro, y luego guarda el hex resultante en lugar del cálculo.
¿Cuánto contraste pide la norma?
WCAG AA pide 4.5:1 para el texto normal y 3:1 para texto de 24px, o de 19px en negrita. AAA pide 7:1, que merece la pena buscar en textos largos.
¿Por qué el mismo hex se ve distinto en dos pantallas?
Las pantallas muestran el color de forma distinta, y algunas aplican un perfil encima. El código es exacto, así que la diferencia está en la pantalla y no en el valor.
¿Puedo sacar una paleta entera de un color?
La escala de aquí te da nueve pasos del mismo tono, lo que cubre la mayoría de los componentes. Sin embargo, una paleta completa también necesita un gris neutro y un color de acento, y eso son decisiones, no cálculos.
¿Se envía mi color a algún sitio?
No. Cada conversión se ejecuta dentro de la pestaña de tu navegador, así que una paleta que aún no has lanzado nunca llega a este sitio y ningún registro la guarda.
Herramientas para la misma tarde
Tres utilidades para rematar tu paleta.
Compresor de SVG
Reduce el icono que acabas de recolorear y elimina lo que esconda dentro.
Abrir herramienta →Minificador de CSS
Comprime la hoja de estilos donde acabaron tus nuevas variables, sin romper calc().
Abrir herramienta →Generador de códigos QR
Crea un código con el color de tu marca y comprueba después que se sigue escaneando.
Abrir herramienta →
Lee el color y úsalo
Pega un hex, un trío rgb o un valor hsl, y toma el formato que pida tu archivo. El selector de códigos de color es gratis, no necesita cuenta y mantiene cada valor en tu dispositivo.