Cómo usar el selector de colores
- Elige un color con el cuadro de color, que abre el selector propio de tu dispositivo, o pega un código en el campo de texto: HEX con o sin
#(3, 4, 6 u 8 dígitos),rgb()yrgba(),hsl()yhsla()con comas o espacios, una lista simple como31, 78, 121, o cualquiera de los 148 nombres de color de CSS. - Toma un color de una imagen: carga, suelta o pega una foto, un logo o una captura de pantalla y haz clic o toca el punto que quieras; una lupa muestra los píxeles alrededor. En Chrome, Edge y Opera de computadora, Tomar de la pantalla funciona como un cuentagotas para cualquier píxel de tu pantalla.
- Copia el formato que necesites. Cada muestra de la paleta copia su código HEX al tocarla.
La imagen se lee en tu dispositivo y nunca se sube a internet.
Los formatos de color, explicados
| Formato | Ejemplo | Dónde se usa |
|---|---|---|
| HEX (hexadecimal) | #1f4e79 | CSS, HTML, programas de diseño, manuales de marca |
| RGB | rgb(31, 78, 121) | CSS, pantallas, editores de imagen |
| HSL | hsl(209, 59%, 30%) | CSS; fácil de aclarar u oscurecer a mano |
| HSV / HSB | hsv(209, 74%, 47%) | Los selectores de color de Photoshop, Figma y apps similares |
| CMYK | cmyk(74%, 36%, 0%, 53%) | Imprenta (solo como punto de partida) |
HEX es RGB escrito en base 16: cada par de dígitos es un canal de 00 a ff (0–255), así que 1f = 1 × 16 + 15 = 31. Un séptimo y octavo dígito añaden transparencia (alfa), y #abc es la forma corta de #aabbcc.
HSL y HSV parten del mismo tono (o matiz), el ángulo en el círculo cromático (0° rojo, 120° verde, 240° azul), con R, G y B escalados de 0 a 1. La luminosidad es L = (máx + mín) / 2 y la saturación HSL es (máx − mín) / (1 − |2L − 1|). En HSV el valor (o brillo) es simplemente V = máx y la saturación es (máx − mín) / máx. Por eso un rojo totalmente saturado es hsl(0, 100%, 50%) pero hsv(0, 100%, 100%).
CMYK (cian, magenta, amarillo y negro) se calcula aquí con la fórmula de libro: K = 1 − máx, luego C = (1 − R − K) / (1 − K), y lo mismo para M y Y. Las imprentas convierten con perfiles ICC según su papel y sus tintas, así que sus números serán distintos; toma este como punto de partida.
Nombres de color: por qué están en inglés
CSS solo entiende los nombres de color en inglés, así que el campo de texto y el nombre CSS más cercano usan esos nombres. Estos son los más comunes con su equivalencia:
| Color | Nombre CSS | HEX |
|---|---|---|
| Rojo | red | #ff0000 |
| Azul | blue | #0000ff |
| Verde | green | #008000 |
| Amarillo | yellow | #ffff00 |
| Naranja | orange | #ffa500 |
| Morado | purple | #800080 |
| Rosa | pink | #ffc0cb |
| Gris | gray | #808080 |
| Café o marrón | brown | #a52a2a |
| Azul marino | navy | #000080 |
| Turquesa | turquoise | #40e0d0 |
| Dorado | gold | #ffd700 |
| Plateado | silver | #c0c0c0 |
| Guinda o granate | maroon | #800000 |
El nombre más cercano se encuentra convirtiendo ambos colores a CIELAB y tomando la menor distancia en línea recta (ΔE, CIE76); un ΔE de alrededor de 2.3 se cita a menudo como la diferencia más pequeña que se nota a simple vista.
Ejemplo resuelto: #1f4e79
El azul marino que viene por defecto se divide en 1f, 4e y 79, es decir, RGB 31, 78, 121. El azul es el canal mayor (121 / 255 = 0.475) y el rojo el menor (0.122), así que V = 47%, la saturación HSV = (121 − 31) / 121 = 74%, la luminosidad = (0.475 + 0.122) / 2 = 30% y la saturación HSL = 59%. Su tono da 208.7°, que se muestra como 209. Su luminancia relativa es 0.0712, así que alcanza un contraste de 8.66:1 con texto blanco (AAA) pero solo 2.42:1 con negro. El nombre más cercano es steelblue, a un ΔE de 21, así que es solo una descripción aproximada.
Contraste y accesibilidad (WCAG 2.2)
La comprobación sigue las definiciones de las Pautas de Accesibilidad para el Contenido Web (WCAG) 2.2 del W3C. Cada canal se linealiza (c / 12.92 hasta 0.04045; si no, ((c + 0.055) / 1.055)2.4), la luminancia relativa es L = 0.2126 R + 0.7152 G + 0.0722 B y la relación de contraste es (Lclara + 0.05) / (Loscura + 0.05), de 1:1 a 21:1.
| Nivel | Texto normal | Texto grande |
|---|---|---|
| AA (criterio 1.4.3) | 4.5:1 | 3:1 |
| AAA (criterio 1.4.6) | 7:1 | 4.5:1 |
Texto grande significa al menos 18 puntos (24 píxeles CSS) o 14 puntos en negrita (unos 18.7 píxeles). Las relaciones se truncan, no se redondean, a dos decimales, así que 4.499:1 nunca aparece como aprobado, y un color translúcido se mezcla primero con el blanco o el negro con el que se compara.
Tintes, sombras y armonías
Los tintes mezclan el color con blanco en pasos de 20% y las sombras lo mezclan con negro, lo que da una escala lista para estados hover, bordes y fondos. Las armonías mantienen la saturación y la luminosidad y giran el tono: el complementario está a 180°, los análogos a 30° a cada lado, la tríada usa colores separados 120° y el complementario dividido usa 150° y 210°.
Consejos
- El mismo código HEX puede verse distinto en dos pantallas (brillo, modo nocturno, pantallas de gama amplia), pero los números son los mismos.
- Las fotos casi nunca tienen un color plano: activa Promedio de 5 × 5 píxeles o compara varios puntos.
- ¿Necesitas la imagen en otro formato o tamaño? Usa el convertidor de imágenes o redimensionar imagen; para letras con estilo, el generador de letras.
Preguntas frecuentes
¿Cómo convierto HEX a RGB?
Divide los seis dígitos en tres pares y lee cada par como un número en base 16: #1f4e79 → 1f = 31, 4e = 78, 79 = 121, o sea rgb(31, 78, 121). Pega cualquier código HEX arriba para obtener RGB, HSL, HSV y CMYK de una vez.
¿Qué diferencia hay entre HSL y HSV (HSB)?
Los dos usan el mismo ángulo de tono. HSL pone los colores puros en 50% de luminosidad, y 100% siempre es blanco; HSV los pone en 100% de valor, y el blanco se alcanza bajando la saturación. CSS usa HSL; los selectores de Photoshop y Figma usan HSV, al que llaman HSB.
¿El valor CMYK sirve para imprimir?
No directamente. Usa la fórmula de conversión simple, que no sabe nada de tu papel, tus tintas ni tu prensa. En imprenta profesional se convierte con un perfil de color ICC; dale a tu imprenta el valor RGB o HEX y pide una prueba de color, o usa el valor Pantone o CMYK de tu manual de marca.
¿Cómo tomo un color de una imagen o de mi pantalla?
Pulsa Tomar de una imagen, elige un archivo (o suéltalo, o pega una captura) y haz clic o toca el punto; con la imagen seleccionada, las flechas mueven el marcador y Enter toma el color. Tomar de la pantalla funciona en Chrome, Edge y Opera de computadora; Firefox, Safari y los navegadores de celular todavía no lo admiten, así que ahí el botón no aparece.
¿Se sube mi imagen a algún lado?
No. Tu navegador la abre y la lee; no se envía nada a ningún servidor.
Última actualización: 15 de octubre de 2026