Skip to content

Instantly share code, notes, and snippets.

@kaishin
Last active October 14, 2022 01:09
Show Gist options
  • Save kaishin/9412838 to your computer and use it in GitHub Desktop.
Save kaishin/9412838 to your computer and use it in GitHub Desktop.
Programmatically determine the perceived lightness of a color. More details on: http://robots.thoughtbot.com/closer-look-color-lightness + Online tool: http://thoughtbot.github.io/color-lightness-test/
@function color-is-light($hex-color) {
$red: red(rgba($hex-color, 1.0));
$green: green(rgba($hex-color, 1.0));
$blue: blue(rgba($hex-color, 1.0));
$lightness: ($red * 0.2126 + $green * 0.7152 + $blue * 0.0722) / 255;
@return $lightness > .6;
}
#import <Cocoa/Cocoa.h>
@interface NSColor (isLight)
- (BOOL)isLight;
@end
#import "NSColor+isLight.h"
@implementation NSColor (isLight)
- (CGFloat)luma
{
CGFloat luma = 0.2126 * self.redComponent + 0.7152 * self.greenComponent + 0.0722 * self.blueComponent;
return luma;
}
- (BOOL)isLight
{
return self.luma >= .6;
}
@end
import Cocoa
extension NSColor {
var luma: Float {
return 0.2126 * Float(redComponent) + 0.7152 * Float(greenComponent) + 0.0722 * Float(blueComponent)
}
var isLight: Bool {
return luma >= 0.6
}
}
#import <UIKit/UIKit.h>
@interface UIColor (isLight)
- (BOOL)isLight;
@end
#import "UIColor+isLight.h"
@implementation UIColor (isLight)
- (CGFloat)luma
{
CGFloat luma;
CGFloat red;
CGFloat blue;
CGFloat green;
CGFloat alpha;
[self getRed:&red green:&green blue:&blue alpha:&alpha];
luma = 0.2126 * red + 0.7152 * green + 0.0722 * blue;
return luma;
}
- (BOOL)isLight
{
return self.luma >= .6;
}
@end
import UIKit
extension UIColor {
var redComponent: CGFloat {
var red: CGFloat = 0
self.getRed(&red, green:nil, blue:nil, alpha:nil)
return red
}
var greenComponent: CGFloat {
var green: CGFloat = 0
self.getRed(nil, green:&green, blue:nil, alpha:nil)
return green
}
var blueComponent: CGFloat {
var blue: CGFloat = 0
self.getRed(nil, green: nil, blue: &blue, alpha: nil)
return blue
}
var luma: Float {
return 0.2126 * Float(redComponent) + 0.7152 * Float(greenComponent) + 0.0722 * Float(blueComponent)
}
var isLight: Bool {
return luma >= 0.6
}
}
@timonkbd
Copy link

Thank you for the insights, I really enjoyed reading your article!

But can you explain why you used > 0.6 instead of > 0.5 for calling a color light?

@kaishin
Copy link
Author

kaishin commented Sep 25, 2019

@timonweber That’s up to your specific implementation, but 0.6 is on the safer side, since it’s closer to how human sight perceives color.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment