Quiero que los usuarios de mi sitio web puedan elegir un color hexadecimal, y solo quiero mostrar texto blanco para colores oscuros y texto negro para colores claros. ¿Puedes calcular el brillo de un código hexadecimal (preferiblemente PHP)?Brillo de código hexadecimal PHP?
Respuesta
$hex = "78ff2f"; //Bg color in hex, without any prefixing #!
//break up the color in its RGB components
$r = hexdec(substr($hex,0,2));
$g = hexdec(substr($hex,2,2));
$b = hexdec(substr($hex,4,2));
//do simple weighted avarage
//
//(This might be overly simplistic as different colors are perceived
// differently. That is a green of 128 might be brighter than a red of 128.
// But as long as it's just about picking a white or black text color...)
if($r + $g + $b > 382){
//bright color, use dark font
}else{
//dark color, use bright font
}
Necesita convertir los valores RGB a HLS/HSL (Matiz de luminosidad y saturación) puede utilizar la luminosidad para determinar si necesita texto claro o oscuro.
This page tiene algunos detalles sobre cómo la conversión en PHP, así como la selección de colores complementarios a partir de esto.
Acabo de descubrir que el sitio es un sitio de astrología, así que me disculpo si alguien se ofendió.
Sobre sitio de la astrología: sí, eso es horrible ** ** (No, es broma, interesante que tienen un tema relacionado con este tipo de programación en su sitio, yo! no esperaría eso.) –
@Marcel - Creo que es para mostrar el código detrás de sus gráficos. – ChrisF
Si ha activado la extensión ImageMagick, sólo tiene que crear un objeto ImagickPixel, llame setColor con su valor hexadecimal, y luego llamar a getHSL() (y obtener el último elemento de la matriz obtenida supongo) ...
me hizo una similar - pero en base a las ponderaciones de cada color (based on the C# version of this thread)
function readableColour($bg){
$r = hexdec(substr($bg,0,2));
$g = hexdec(substr($bg,2,2));
$b = hexdec(substr($bg,4,2));
$contrast = sqrt(
$r * $r * .241 +
$g * $g * .691 +
$b * $b * .068
);
if($contrast > 130){
return '000000';
}else{
return 'FFFFFF';
}
}
echo readableColour('000000'); // Output - FFFFFF
EDIT: Pequeño optimización: Sqrt se conoce como una costosa operación matemática, que probablemente es poco útil en la mayoría de los escenarios, pero de todos modos, se podría evitar haciendo algo como esto.
function readableColour($bg){
$r = hexdec(substr($bg,0,2));
$g = hexdec(substr($bg,2,2));
$b = hexdec(substr($bg,4,2));
$squared_contrast = (
$r * $r * .299 +
$g * $g * .587 +
$b * $b * .114
);
if($squared_contrast > pow(130, 2)){
return '000000';
}else{
return 'FFFFFF';
}
}
echo readableColour('000000'); // Output - FFFFFF
Simplemente no se aplica la raíz cuadrada, en vez que se enciende el punto de corte de contraste deseado por dos, que es un cálculo mucho más barato
¡Esto es simplemente genial! ¡Gracias! –
para obtener valores RGB en dec solo use esta línea: 'list ($ r, $ g, $ b) = sscanf ($ color,"% 02x% 02x% 02x ");' o si $ color comienza con # 'list ($ r, $ g, $ b) = sscanf ($ color," #% 02x% 02x% 02x ");' – JoTaRo
Sé que esto es un tema muy antiguo, pero para los usuarios que vino de "Búsqueda de Google", este enlace puede ser lo que están buscando. He buscado para algo como esto y yo creo que es una buena idea para publicar aquí:
https://github.com/mexitek/phpColors
use Mexitek\PHPColors\Color;
// Initialize my color
$myBlue = new Color("#336699");
echo $myBlue->isLight(); // false
echo $myBlue->isDark(); // true
Eso es todo.
Probé un enfoque diferente para esto, utilicé HSL (tono, saturación & luminosidad) porcentaje de luminosidad para comprobar si el color es oscuro o claro. (Como @chrisf dicho en su respuesta)
función:
function colorislight($hex) {
$hex = str_replace('#', '', $hex);
$r = (hexdec(substr($hex, 0, 2))/255);
$g = (hexdec(substr($hex, 2, 2))/255);
$b = (hexdec(substr($hex, 4, 2))/255);
$lightness = round((((max($r, $g, $b) + min($r, $g, $b))/2) * 100));
return ($lightness >= 50 ? true : false);
}
En la línea de retorno se comprueba si el porcentaje ligereza es mayor que 50% y devuelve verdadero lo contrario se devuelve false. Puede cambiarlo fácilmente para que sea verdadero si el color tiene un 30% de luminosidad y así sucesivamente. La variable $lightness
puede regresar de 0 a 100 0 siendo la más oscura y 100 la más clara.
cómo utilizar la función:
$color = '#111111';
if (colorislight($color)) {
echo 'this color is light';
}
else {
echo 'this color is dark';
}
- 1. Instrucción JMP - Código hexadecimal
- 2. Use vim para buscar por código hexadecimal
- 3. Convirtiendo system.windows.media.brush al código de color hexadecimal
- 4. Apache POI XSSFColor del código hexadecimal
- 5. Ajuste el brillo de la pantalla a través del código
- 6. Eliminación del efecto brillo de los botones en un UINavigationBar
- 7. UIScreen Brillo Propiedad
- 8. Convertir valores RGBA a código de color hexadecimal
- 9. Cambiar el color de fondo del formulario con código hexadecimal
- 10. Vim: ingrese caracteres Unicode con código hexadecimal de 8 dígitos
- 11. Cómo convertir color hexadecimal hexadecimal de 3 dígitos a color hexadecimal de 6 dígitos
- 12. color hexadecimal de UIColor
- 13. Brillo de pantalla de Android ¿Valor máximo?
- 14. ¿Cómo obtener el código c para ejecutar el bytecode hexadecimal?
- 15. ¿Cómo convierto C# caracteres a su representación código hexadecimal
- 16. PHP: simple, validar si la cadena es hexadecimal
- 17. Java hexadecimal
- 18. 0x00000000 hexadecimal?
- 19. C# configuración brillo de pantalla Windows 7
- 20. ¿Cómo convertir un color de cadena a su código hexadecimal o RGB?
- 21. ¿Cómo obtener el brillo de la pantalla actual en el código de Android de forma dinámica?
- 22. Console.WriteLine como hexadecimal
- 23. C constante hexadecimal tipo
- 24. Valor de brillo de pantalla en Android
- 25. Teclado numérico hexadecimal
- 26. C++ formato de número hexadecimal
- 27. Crear un brillo alrededor de un UIView
- 28. Efecto de brillo interior en WPF
- 29. Cambiar brillo de la pantalla (C#)
- 30. Efecto de brillo interior del botón
¡Funciona perfecto, ni siquiera necesita entrar en Hue y Saturation! :) – Juddling
En mi caso, funcionó mejor usar 250 en lugar de 382. No creo que el color verde completo (# 00ff00) use una fuente de color claro, y el rojo completo esté bien con un color oscuro. Solo digo. –