Elegir color
El selector de color toma un color — escrito, pegado o muestreado con el cuentagotas de tu sistema — y lo devuelve como HEX, RGB, HSL, HSV, OKLCH y CMYK a la vez. También construye una rampa de tintes y sombras de once pasos en OKLCh, de modo que cada paso conserva el tono con el que empezó, e informa del contraste de cada paso contra blanco y negro para que veas de inmediato cuáles pueden admitir texto.
#00696frgb(0 105 111)hsl(183 100% 21.8%)hsv(183 100.0% 43.5%)oklch(0.474 0.0806 201.7)cmyk(100% 5% 0% 56%)- Tono
- 183°
- Luminosidad
- 47%
- Croma
- 0.081
Tonos claros y oscuros
Once pasos en una curva de luminosidad OKLCh. Se indica el contraste con blanco y negro; para texto normal se necesita 4,5:1.
1.1 / 19.5
1.2 / 17.9
1.4 / 14.9
1.8 / 11.5
2.5 / 8.4
3.5 / 5.9
5.1 / 4.1
7.5 / 2.8
10.6 / 2.0
14.3 / 1.5
18.0 / 1.2
Armonías
El tono gira en OKLCh para que cada color conserve la luminosidad original. Si giras en HSL, el amarillo deslumbra y el azul se oscurece.
Complementarios
El tono opuesto. El máximo contraste, por eso suele reservarse para acentos.
Análogos
Colores vecinos a 30° a cada lado. Una opción discreta y segura para toda la interfaz.
Triada
Tres tonos separados por 120°. Equilibrados, aunque normalmente conviene suavizar dos de ellos.
Tétrada
Dos pares complementarios. Cuatro tonos intensos suelen ser demasiados para una composición.
Complementarios divididos
El tono opuesto dividido 30° a cada lado. Mucho contraste con menos tensión visual.
Monocromáticos
Un solo tono con distinta luminosidad y croma. Habitual en los sistemas de diseño.
Sobre blanco y sobre negro
¿Cómo funciona Elegir color?
Un color en una pantalla son tres números, y cada formato de aquí son los mismos tres números con ropa distinta. Hex y rgb() son el mismo valor escrito en base 16 y en base 10. hsl() y hsv() son el mismo valor en coordenadas polares, y por eso existe un deslizador de tono. Esos cuatro son viajes de ida y vuelta sin pérdida entre sí, y esta herramienta convierte entre ellos con exactitud.
Por qué la rampa se construye en OKLCh
HSL tiene una propiedad útil y una fatal. La útil es que un deslizador de tono tiene sentido. La fatal es que su luminosidad no es luminosidad: hsl(60 100% 50%) es un amarillo cegador y hsl(240 100% 50%) es un azul casi negro, y HSL llama a ambos 50%. Construye una rampa de tintes recorriendo la luminosidad de HSL y obtienes una escala en la que el brillo aparente de los pasos intermedios salta mientras los números avanzan parejos.
OKLCh no tiene ese problema. Su eje de luminosidad sigue lo que el ojo informa, así que descender por él produce una rampa que se lee como uniforme. Cada paso de aquí se comprueba además contra el gamut sRGB y se devuelve hacia dentro si queda fuera — sin eso, los pasos más saturados se recortan al mismo color y la escala se aplana en silencio justo en el extremo que está mirando quien diseña.
El cuentagotas
La muestra de color que está junto al campo abre el selector del propio sistema operativo, que en macOS, Windows y la mayoría de los escritorios Linux incluye un cuentagotas capaz de muestrear cualquier píxel de la pantalla — incluidos los píxeles de otras aplicaciones. Ninguna página puede hacer eso por sí sola, y por eso aquí está el control nativo en lugar de una imitación en canvas. No puede expresar transparencia, así que el alfa lo lleva el campo de texto: escribe #00696f80 y la muestra enseña el turquesa opaco mientras el campo conserva el 50%.
CMYK, y para qué sirve
Las cifras de CMYK son la aproximación independiente del dispositivo, la misma que usa todo conversor en línea. Una conversión real necesita un perfil ICC para la imprenta, el papel y el conjunto de tintas, y el mismo valor sRGB se convierte en números distintos en papel estucado que en papel de periódico. Tómalo como punto de partida para una conversación con la imprenta, no como una especificación que enviarle.
Un color
#00696f
Todas sus representaciones
hex #00696f rgb rgb(0 105 111) hsl hsl(183 100% 21.8%) oklch oklch(0.474 0.0806 201.7) cmyk cmyk(100% 5% 0% 56%)
¿Qué opciones y casos límite admite Elegir color?
| Parámetro | Tipo | Valor predeterminado | Comportamiento y casos límite |
|---|---|---|---|
| HEX | #rrggbb | 6 dígitos | La forma más corta, y la única que sobrevive al pegar en cualquier sitio. Los 4 y 8 dígitos añaden alfa; los 3 dígitos son una abreviatura de pares duplicados. |
| RGB | 0–255 | rgb() | Los mismos tres números en base 10. La sintaxis moderna los separa con espacios y el alfa con una barra; la forma con comas sigue funcionando en todas partes. |
| HSL | grados %, % | hsl() | Matiz, saturación, luminosidad. Útil para una deslizadora de matiz, engañoso para cualquier cosa que dependa del brillo — su luminosidad no es la percibida. |
| HSV | grados %, % | hsb() | Matiz, saturación, valor. En lo que se basan la mayoría de los selectores de color, incluido el de Photoshop. No es CSS válido. |
| OKLCH | 0–1, 0–0.4, grados | oklch() | Perceptualmente uniforme. Los pasos iguales parecen iguales, el matiz se mantiene a través de un cambio de luminosidad, y es lo que usa CSS Color 4. Compatible con todos los navegadores actuales. |
| CMYK | 0–100% | aproximado | La aproximación independiente del dispositivo. Útil para una referencia de impresión aproximada, no para una especificación de impresión — eso necesita un perfil ICC. |
| Escala | 50–950 | 11 pasos | Matices y sombras en una curva de luminosidad fija, con croma que disminuye en ambos extremos para que los pasos claros no sean fluorescentes y los oscuros no brillen. |
| Contraste | ratio | vs #fff / #000 | La ratio WCAG 2.x de cada paso contra blanco y negro, que es lo que decide si el texto puede ir sobre él. |
Preguntas frecuentes
¿Cómo uso un cuentagotas para tomar un color de mi pantalla?
Haz clic en la muestra de color que está junto al campo de texto. Eso abre el selector del propio sistema operativo, que en macOS, Windows y la mayoría de los escritorios Linux tiene un cuentagotas que muestrea cualquier píxel de la pantalla, incluidos los de otras aplicaciones. Una página web no puede leer píxeles fuera de sí misma, así que el control nativo es el único camino para eso — un selector en canvas dentro de la página solo puede muestrear una imagen que ya hayas cargado.
¿Qué es OKLCH y debería usarlo en lugar de HSL?
OKLCH es un espacio de color perceptualmente uniforme: los pasos numéricos iguales se ven como pasos visuales iguales, y cambiar la luminosidad no desplaza el tono. HSL no hace ninguna de las dos cosas, y por eso una rampa de tintes generada en HSL tiene pasos que se ven desiguales aunque los números estén espaciados de forma pareja. Todos los navegadores actuales admiten oklch() en CSS. Usa HSL cuando quieras un deslizador de tono; usa OKLCH cuando el valor alimente una rampa, una mezcla o cualquier decisión sobre el brillo.
¿Por qué los tintes de la rampa se ven distintos que si aclaras el valor hex?
Porque aclarar un valor hex significa mover tres canales sRGB hacia 255, y eso cambia el tono además de la luminosidad — se ve sobre todo en azules y púrpuras, que derivan hacia el gris. La rampa de aquí mueve la luminosidad en OKLCh y mantiene el tono y el croma, y después devuelve cada paso al gamut sRGB si queda fuera. Eso es lo que hace que el paso 100 y el paso 800 sigan siendo reconociblemente el mismo color.
¿Puedo obtener un color con transparencia?
Sí. Escribe un hex de 8 dígitos como #00696f80, o rgba(0 105 111 / 50%), y el alfa se conserva en cada conversión que tenga dónde alojarlo. La muestra de color nativa no puede mostrar transparencia — es una limitación del control, no de esta página —, así que enseña el color opaco mientras el campo de texto guarda el valor real.
¿Es la conversión CMYK lo bastante precisa para enviarla a una imprenta?
No, y la de ningún conversor en línea lo es. CMYK depende del dispositivo: el mismo valor sRGB se convierte en porcentajes de tinta distintos en papel estucado que en papel no estucado, y otros diferentes en otra imprenta. Esta es la aproximación estándar independiente del dispositivo, correcta para elegir una muestra y para hablar con la imprenta de a qué te refieres a grandes rasgos. La imprenta hará la conversión real con el perfil de su máquina.
¿Se envía a algún sitio lo que elijassssssssss?
No. Cada conversión de aquí es aritmética que se ejecuta en esta pestaña. La página no hace ninguna petición de red después de cargar — apaga tu conexión y el selector sigue funcionando, que es la prueba que vale la pena hacer si prefieres comprobarlo antes que fiarte de nuestra palabra.
¿Qué herramientas relacionadas debería usar después?
- Círculo cromáticoGira el círculo y lee esquemas complementarios, análogos y triádicos
- Comprobar contrasteComprueba texto y fondo contra WCAG 2.2 y da el color que pasa
- Códigos de colorTodos los nombres de color CSS con su HEX, RGB y HSL
- Test de daltonismoHaz un test de daltonismo y simula cómo ve las imágenes quien lo tiene