Selector de color
Elige y convierte colores
Otros formatos
Contraste con un texto (WCAG 2)
Contraste 3,67:1 · AA solo para texto grande
Contraste 5,70:1 · AA
Tonos claros (mezclados con blanco)
Tonos oscuros (mezclados con negro)
Armonías
Haz clic en un color para usarlo.
Colores recientes
Los colores que copias, o tomas de una imagen o de la pantalla, se guardan aquí, solo en este navegador.
Todavía no hay colores recientes.
Acerca de Selector de color
El Selector de color muestra una vista previa grande de un color con sus valores HEX y RGB, y el mismo color en HSL, HSV, HWB, CMYK y OKLCH con su nombre CSS. Eliges el color con el selector de color integrado en tu navegador (la pequeña muestra bajo la vista previa), haciendo clic en un punto de una imagen que abres, con «Tomar de la pantalla» en Chrome o Edge, o escribiéndolo en el cuadro Entrada: un código HEX con o sin su signo #, de 3, 4, 6 u 8 dígitos, rgb(), hsl(), hwb(), oklch(), hsv(), cmyk() o un nombre CSS como tomato. Las formas de 4 y 8 dígitos y rgba() llevan un canal alfa, que se muestra sobre un fondo de cuadros. La página también da los tonos claros y oscuros, cinco armonías de colores y el contraste WCAG de un texto blanco y de un texto negro sobre el color.
Ejemplo
Un código escrito sin su signo # y los valores que muestra la página, calculados por su propio lector de códigos HEX.
Escrito en Entrada
ff8800
Tarjetas y portapapeles
HEX: #ff8800 RGB: 255,136,0 Copiar bajo RGB pone en el portapapeles: rgb(255,136,0)
Cómo elegir un color y obtener su valor RGB
- 1Haz clic en la pequeña muestra de color bajo la vista previa grande para abrir el selector de color de tu navegador y elige un color.
- 2O escribe un color en «Entrada», por ejemplo ff8800, #f80, rgb(255, 136, 0), hsl(32, 100%, 50%) u orange: la vista previa, la muestra y todas las tarjetas lo siguen en cuanto el color está completo.
- 3O haz clic en «Abrir una imagen» y luego en un punto de la imagen (elige un «Tamaño de la muestra» para tomar la media de un cuadrado pequeño), o haz clic en «Tomar de la pantalla» en Chrome o Edge para tomar un color de cualquier lugar de tu pantalla.
- 4Lee la tarjeta «RGB», que muestra los valores de rojo, verde y azul separados por comas y, después, el valor alfa cuando el código lo tiene.
- 5Haz clic en «Copiar» bajo «HEX» o «RGB»: la tarjeta HEX copia el código tal como se muestra, en minúsculas y con #, y la tarjeta RGB lo copia como rgb(r,g,b), o rgba(r,g,b,a) para un código con alfa.
- 6En «Otros formatos», haz clic en «Copiar» en la tarjeta HSL, HSV, HWB, CMYK, OKLCH o Nombre CSS, y haz clic en un tono claro, un tono oscuro o una armonía para convertirlo en el color actual.
Formatos y límites
- Entrada
- El selector de color del navegador, un punto de una imagen abierta, la pantalla (Chrome y Edge) o un color escrito en el cuadro Entrada
- Códigos HEX que lee
- 3, 4, 6 u 8 dígitos (#rgb, #rgba, #rrggbb, #rrggbbaa), # opcional, en mayúsculas o minúsculas
- Otros colores que lee
- rgb(), rgba(), hsl(), hsla(), hwb(), oklch() con comas o espacios y un / alfa opcional; hsv(), hsb(), cmyk(); tres números como 255, 136, 0; los 148 nombres de colores CSS y transparent
- Resultado
- HEX en minúsculas con #; RGB mostrado como r,g,b (r,g,b,a con alfa) y copiado como rgb(r,g,b) o rgba(r,g,b,a)
- Otros formatos
- hsl(217, 91%, 60%), hsv(217, 76%, 96%), hwb(217 23% 4%), cmyk(76%, 47%, 0%, 4%), oklch(62.3% 0.188 259.8) y el nombre CSS exacto o más cercano
- Imágenes
- PNG, JPEG, WebP, GIF, BMP, ICO y AVIF que abra tu navegador (HEIC en Safari); 1 píxel, o la media de 3 × 3, 5 × 5 o 9 × 9 píxeles; 8 colores principales
- No incluido
- Paletas guardadas y su exportación, simulación del daltonismo, degradados, imágenes TIFF (TIFF a PNG las convierte antes)
Usos habituales
- Un color semitransparente para una sombra CSS
- Un desarrollador front-end escribe 1e40af80, un azul oscuro con alfa 80, y copia rgba(30,64,175,0.502) de la tarjeta RGB para un box-shadow.
- Desarrollar un código abreviado de una guía de estilo
- Una guía de estilo indica #f80. Escrito en «Entrada», aparece como #ff8800 en la tarjeta HEX, la forma de 6 dígitos que piden muchos campos de color fuera de CSS.
- Los números RGB para una plantilla de Office
- La ventana de colores personalizados de Word o PowerPoint pide el rojo, el verde y el azul como tres números; la tarjeta RGB los da en ese orden, por ejemplo 255,136,0.
- El color exacto de un logotipo
- Una diseñadora abre el logotipo PNG de un cliente, hace clic en su rojo, copia el código HEX y comprueba bajo el contraste que un texto blanco sobre él cumple AA antes de usarlo en un botón.
Qué herramienta elegir
- Conversor de colores: para editar un color campo a campo, con los números RGB, HSL, HSV y CMYK y un ajuste de opacidad; copia rgb(255, 136, 0) con espacios, mientras que esta página copia rgb(255,136,0).
- Conversor de bases numéricas: para leer un solo número hexadecimal en decimal, binario u octal fuera de cualquier color, por ejemplo FF como 255.
Dónde se procesa tu color
El color que eliges o escribes, y la imagen que abres, se quedan en esta página: las conversiones y la lectura de los píxeles de la imagen las hace el propio código de la página, y ni el color ni la imagen se envían nunca a nuestros servidores. Los botones Copiar usan el portapapeles de tu navegador, y los colores recientes se guardan solo en el almacenamiento de este navegador. La ventana del selector de color y el cuentagotas de pantalla pertenecen a tu navegador, así que lo que ofrecen depende del navegador y no de este sitio.
Preguntas frecuentes
¿La tarjeta RGB lee códigos cortos como #f80?
Sí. #f80 se lee como #ff8800 y da 255,136,0. Un código de 4 dígitos como #f808 o de 8 dígitos como #ff880080 añade un canal alfa: la tarjeta RGB lo muestra como cuarto valor, entre 0 y 1 (255,136,0,0.502 para #ff880080), y la muestra del navegador, que no tiene alfa, enseña el color opaco.
¿Tengo que escribir el signo #?
No. ff8800 y #ff8800 dan el mismo color, y la tarjeta HEX muestra entonces #ff8800. Un texto que no es ni un código HEX de 3, 4, 6 u 8 dígitos, ni una función de color como rgb(), ni un nombre de color CSS, por ejemplo ff880 u orangee, se rechaza con un mensaje, y la vista previa conserva el color anterior.
¿Puedo obtener aquí los valores HSL o CMYK?
Sí. Las tarjetas de «Otros formatos» dan el color en HSL, HSV, HWB, CMYK y OKLCH, cada una con su botón Copiar. El CMYK es la fórmula simple (K = 1 - max(R, G, B)), no un perfil de impresora, y los valores se redondean a números enteros, así que hsl(217, 91%, 60%) escrito de nuevo da #3c83f6, a un paso de #3b82f6.
¿Copiar añade rgb() alrededor del valor RGB?
Sí. La tarjeta RGB muestra 255,136,0 pero copia rgb(255,136,0), listo para pegar en una hoja de estilos; con un canal alfa copia rgba(255,136,0,0.502). La tarjeta HEX copia el código tal como se muestra, en minúsculas y con su signo #.
¿Cómo se convierte un código HEX en RGB?
Cada par de dígitos hexadecimales es un canal de 0 a 255: en #ff8800, ff es 255 de rojo, 88 es 136 de verde y 00 es 0 de azul. Un código de 3 dígitos duplica primero cada dígito, lo que convierte f80 en ff8800.
¿Puedo escribir un valor RGB como rgb(255,136,0)?
Sí. «Entrada» lee rgb(255,136,0), rgb(255 136 0 / 50%), los tres números 255, 136, 0 solos, hsl(), hwb(), oklch(), hsv(), cmyk() y nombres como orange, y la tarjeta HEX muestra entonces el código: #ff8800.
¿Por qué la tarjeta HEX muestra minúsculas si escribí FF8800?
La página escribe cada código en minúsculas con su signo #, así que FF8800 pasa a ser #ff8800. CSS lee las dos formas como el mismo color.
¿La página recuerda mis colores?
Sí, solo en este navegador. Los colores que copias, o tomas de una imagen o de la pantalla, aparecen en «Colores recientes» (16 como máximo, el último primero), y siguen ahí después de recargar; «Borrar» los quita. Al recargar se vuelve a empezar desde #3b82f6, el azul que se muestra al llegar.
¿Cómo obtengo el color de un píxel de una foto o de un logotipo?
Haz clic en «Abrir una imagen» y luego en el punto que quieras: la vista ampliada muestra los píxeles alrededor del puntero, y las tarjetas toman el color de ese píxel. En una foto, un «Tamaño de la muestra» de 3 × 3 o 5 × 5 píxeles toma la media de un cuadrado pequeño, lo que evita tomar un píxel suelto de ruido. «Colores principales de la imagen» da sus 8 colores dominantes.
¿Puedo tomar un color fuera de la página?
Sí, en Chrome, Edge y Opera en una computadora: «Tomar de la pantalla» convierte el puntero en un cuentagotas que lee cualquier píxel de tu pantalla, también en otra ventana; Esc cancela. Firefox y Safari no lo ofrecen a las páginas web, así que ahí el botón no aparece: abre en su lugar una captura de pantalla con «Abrir una imagen».
¿Qué significan AA y AAA bajo el contraste?
Son los niveles de WCAG 2 para un texto sobre este color: AA pide un contraste de 4,5:1 para el texto normal y de 3:1 para el texto grande, y AAA pide 7:1. La página calcula el contraste de un texto blanco y de un texto negro, poniendo antes sobre blanco un color transparente, y lo trunca a 2 decimales como hace WebAIM.
¿Qué es el nombre CSS más cercano?
Cuando el color no es uno de los 148 colores con nombre de CSS, la tarjeta da el más cercano en el espacio de color OKLab: #3b82f6 da así dodgerblue, otro azul. Cuando el color es exactamente uno con nombre, la tarjeta dice «Nombre CSS», y para los colores que tienen dos nombres (aqua y cyan, gray y grey) se da el primero en orden alfabético.