Cómo se usa
- 01Convertir un color.Ajusta el selector o escribe un valor HEX, o arrastra los controles R/G/B y H/S/L; ocho tarjetas se actualizan juntas, cada una copiable, y el color CSS con nombre más cercano informa su distancia ΔE₇₆.
- 02Comprobar el contraste.Elige primer plano y fondo: una relación, cuatro insignias (AA/AAA, texto normal y grande) y una muestra en vivo. Si AA normal falla, haz clic en la muestra sugerida para aplicar un arreglo solo de luminosidad que alcanza 4.5 : 1.
- 03Crear una paleta.Seis filas — complementaria, complementaria dividida, triádica, tetrádica, análoga, monocromática — siguen al color base, y después una tira de 13 pasos de tonos y matices; cada muestra se copia como HEX. La vista previa de daltonismo muestra un esquema elegido en protanopía, deuteranopía y tritanopía.
- 04Leer una imagen.El archivo elegido se decodifica localmente y se escala a 480 px de ancho como máximo. Haz clic en un píxel para HEX, RGB y HSL; el panel añade el color medio, hasta seis colores dominantes de un median cut y un histograma RGB de 64 clases.
- 05Planificar una toma.Las pestañas de Fotografía cubren profundidad de campo, exposición (EV, escalera de obturación, filtros ND y temporizador de cuenta atrás, sunny-16, flash), astro (reglas 500 y NPF, trazos de estrellas, fase lunar) y salida (tamaño de impresión, estimación de archivo, timelapse).
Ejemplos resueltos
Salidas de los valores predeterminados de esta página.
| Tú introduces |
La página muestra |
#4a90e2 |
hsl(212, 72%, 59%), hsv(212, 67%, 89%), cmyk(67%, 36%, 0%, 11%), lab(58.87 3.995 -48.11), lch(58.87 48.27 274.7), luminancia 0.2689, más cercano cornflowerblue · #6495ed · ΔE₇₆ = 6.26 |
#999999 sobre blanco |
2.85 : 1 — las cuatro insignias fallan; el primer plano sugerido #757575 da 4.61 : 1 |
#767676, luego #777777, sobre blanco |
4.54 : 1 pasa AA normal y ambas insignias de texto grande; 4.48 : 1 falla AA normal por 0.02 |
Base de paleta #4a90e2 |
triádica #4a90e2 / #e24a90 / #90e24a; tonos y matices #e5effb → #0b1520; par complementario en deuteranopía #6b66ce / #cbd06b |
| Foto: 50 mm, f/8, 3 m, fotograma completo; f/8, 1/250 s, ISO 100 |
cerca 2.36 m, lejos 4.12 m, total 1.76 m, hiperfocal 10.88 m; EV 13.97; ND1000 sobre 1/125 s da 8.2″ |
| Foto: 24 mm, f/2.8, 24 MP, declinación 0°; 6000 × 4000 px a 300 dpi |
regla 500 20.8 s, NPF 11.6 s, trazo 6.1 px; impresión 50.8 × 33.9 cm, Excelente, RAW 14 bits 24.8 MB |
Los números WCAG detrás de las insignias
Cada canal sRGB se linealiza (÷12.92 por debajo del punto de corte 0.04045, si no ((v + 0.055) / 1.055)²·⁴), la luminancia relativa es L = 0.2126 R + 0.7152 G + 0.0722 B, y la relación de contraste es (L_light + 0.05) / (L_dark + 0.05) — negro sobre blanco 21.00 : 1, colores iguales 1.00 : 1. Umbrales: AA normal 4.5, AA grande 3.0, AAA normal 7.0, AAA grande 4.5. Las tarjetas de conversión siguen sRGB → RGB lineal → XYZ (D65) → CIELAB → LCH; la tarjeta del nombre más cercano usa ΔE₇₆ frente a las 148 palabras clave CSS.
Supuestos y límites
- Solo sRGB.
- Sin perfil de monitor ni comprobación de gamut; la tarjeta CMYK es una simple resta c/m/y/k — un valor de diálogo, no una prueba de imprenta.
- Redondeo de pantalla.
- LAB y LCH muestran cuatro cifras significativas y las relaciones dos decimales; los veredictos comparan el valor sin redondear.
- Análisis, no edición.
- El panel Imagen nunca escribe píxeles: nada de recorte, cambio de tamaño, filtro, conversión de formato ni exportación. La planificación de tomas corresponde al panel Fotografía, las horas del cielo al panel Astronomía Sol y el empaquetado de bits de color a la calculadora de programador.
La trampa del umbral de texto grande
La insignia que la gente malinterpreta es AAA grande: exige 4.5 : 1, igual que AA normal, no el 3 : 1 que permite AA grande — aprobar «texto grande» en AA no garantiza nada en AAA. Sobre blanco, #767676 da 4.54 : 1 y pasa AA normal más ambas insignias de texto grande (AAA normal exige 7.0), mientras que #777777 da 4.48 : 1 y falla AA normal por dos centésimas. «Grande» significa 18 pt normal o 14 pt negrita, y la relación es simétrica: intercambiar texto y fondo no cambia nada.
Dónde ayuda
Trabajo de interfaz y marca
Comprueba el texto de cuerpo y los botones contra ambos fondos, mantén honesto un par de modo oscuro, saca una armonía de seis colores de un logotipo y observa si una paleta de estado rojo/verde sobrevive a la deuteranopía.
Fotografía y trabajo de imagen
Muestrea el color medio y los dominantes de una foto antes de elegir un tinte de superposición, y luego comprueba si 50 mm a f/8 mantiene un sujeto a 3 m en 1.76 m, cuánto estira ND1000 un 1/125 s o cuántos fotogramas de 24 MP llenan un timelapse de 100 s.
Color en código e impresión
Entrega a un desarrollador la cadena exacta hsl(212, 72%, 59%) o LAB, verifica un hex de marketing contra una página blanca o revisa una lectura CMYK antes de enviar el arte a una imprenta.
Privacidad
Cada conversión, comprobación de contraste, paleta, muestreo de imagen y cálculo fotográfico se ejecuta en tu navegador; los archivos elegidos para el panel Imagen nunca se suben.
Referencias
- W3C, WCAG 2.2 — Contrast (Minimum) and Contrast (Enhanced), w3.org （访问日期：2026-10-01）— los umbrales 4.5 : 1, 3 : 1 y 7 : 1 y la definición de texto grande.
- W3C, WCAG 2.2 — relative luminance, w3.org （访问日期：2026-10-01）— los coeficientes y el desplazamiento de 0.05 detrás de cada relación.
- Wikipedia, CIELAB color space, en.wikipedia.org （访问日期：2026-10-01）— la transformación de XYZ a Lab y la forma polar LCH de las tarjetas de resultado.
- Wikipedia, Median cut, en.wikipedia.org （访问日期：2026-10-01）— el algoritmo de color dominante detrás de las seis muestras de imagen.
- Wikipedia, Depth of field, en.wikipedia.org （访问日期：2026-10-01）— la distancia hiperfocal y los límites cercano y lejano que informa la pestaña Foto.
本页计算器
精选工具,点开即用;小工具可直接试算,数值会带入完整计算器。