A cor inversa pode ser calculada via OU exclusivo (XOR) versus o valor máximo (#FFFFFF).
O formato de cores em hexadecimal já é uma dica de como realizar esta operação: cada um dos duplos octetos em #RRGGBB
representa uma cor primária, cuja intensidade pode variar de #00 a #FF (255 em decimal).
Em outras palavras, cada cor primária é representada por 8 bits.
Para inverter uma cor, inverta os bits:
Cor Valor HEX valor BIN BIN invertido HEX invertido
Preto #000000 B00000000 00000000 00000000 B11111111 11111111 11111111 #FFFFFF
Branco #FFFFFF B11111111 11111111 11111111 B00000000 00000000 00000000 #000000
Azul #0000FF B00000000 00000000 11111111 B11111111 11111111 00000000 #FFFF00
Um exemplo de código em Angular/javaScript que realiza esta operação segue abaixo:
function SampleController($scope) {
$scope.sourceValue = 0;
$scope.inverseColor = function(){
var srcVal = $scope.sourceValue;
var valNumerico = parseInt(srcVal, 16);
var mascara = parseInt('FFFFFF', 16);
var dest = valNumerico ^ mascara; //Operação XOR
return dest.toString(16);
};
}
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div ng-controller="SampleController">
Cor: #<input type='text' ng-model='sourceValue'>
<br />
Inversa: {{ inverseColor() }}
</div>
</body>
</html>