cómo uso la teoría del color en este sitio web (con los tokens exactos)
dev · Oct 6, 2026 · 4 min read
la mayoría de las publicaciones sobre "teoría del color" son una rueda de colores y una promesa. Este es diferente: este sitio viene con un verificador de contraste en su propia versión, y la publicación trata sobre las decisiones reales, con los tokens abiertos.
un tono, haciendo todo el trabajo
Todo el sistema de acentos de este sitio es de un solo tono oklch (verde, tono 150). de ese tono deduzco:
- el primario (botones, enlaces, estados activos): un verde de brillo medio que mantiene una relación 4,5:1 contra el texto blanco
- el contenedor principal (resaltados suaves, insignias): mismo tono, mucho más claro, con texto oscuro
- cada estado de desplazamiento, enfoque y selección: el mismo tono nuevamente, diferente luminosidad o croma
la disciplina es el punto: un tono no puede chocar consigo mismo. los sitios que se sienten "diseñados" generalmente usan menos colores de los que crees; simplemente usan cada uno con más intención. En el momento en que aparece un segundo tono acentuado, cada combinación debe volverse a comprobar a mano, y nunca es así.
los neutros también son colores
El fondo, las superficies y el texto de este sitio no son grises: tienen el mismo tono verde casi sin croma. Este es el truco más antiguo en el diseño de impresiones editoriales: tinte los neutros con tu acento y cada superficie concordará silenciosamente con todas las demás. El gris puro junto a un acento de color parece sin vida, aunque casi nadie puede decir por qué.
la regla 60/30/10, aplicada honestamente
ya conoces la regla: 60% dominante, 30% secundario, 10% con acento. Lo que nadie dice es que la proporción se trata de atención visual, no del área de píxeles. Mi división real: las superficies poseen los píxeles, el tipo posee el peso y el verde está racionado según las cosas en las que quiero hacer clic. cuando todo está acentuado, nada lo está; el verde que aparece es en sí mismo información ("esto es interactivo").
la construcción falla si los colores son incorrectos
Aquí está la parte que nunca he visto hacer en otro sitio: la compilación ejecuta un verificador de contraste en 50 casos simbólicos (cada etiqueta, insignia y texto atenuado en ambos temas, con la opacidad compuesta exactamente como lo hace el navegador) y falla si algún par cae bajo WCAG AA (cuerpo 4.5:1, 3:1 grande).
esto es importante porque la opacidad es donde la teoría del color muere en la práctica: `opacity-60` en texto oscuro sobre una superficie clara no lo "hace sutil", lo hace ilegible para millones de lectores, y ninguna revisión de diseño lo capta en su totalidad. una puerta lo hace. El mío ejecutó 50 casos esta mañana antes de que se enviara esta publicación.
qué robar
- elige un tono de acento y deriva todo de él (el Material 3 llama a esto paletas tonales)
- tiñe tus neutros con ese tono en lugar de usar gris
- gastar acento sólo en lo interactivo
- poner contraste en CI, no en un pdf: una construcción defectuosa es la única teoría del color que sobrevive a los plazos