4 ms·

Show HN: A curated set of colour combinations

102 points by alexpate 7y ago

gen_greyface 7y ago
I can never figure out a nice color combination by myself, no matter how hard i try. I have to resort to online resources such as this in the end.
DanBC 7y ago
This is nice and I like lots of these combinations. I'm curious about accessibility. Are any of these combinations harder to use for people with colour-blindness? How would i test for that?
- Tomte 7y ago
  I would assume that's part of "AA accessible" combinations which you can toggle on top. There are accessibility checkers (ARIA) on the web, they can give you a score at least.
- Nekobai 7y ago
  You can test individual colours using tools like https://webaim.org/resources/contrastchecker/ https://webaim.org/resources/contrastchecker/ To check the colours on a page (and many other accessibility violations) you can use a bookmarklet like HTML Codesniffer ( https://squizlabs.github.io/HTML_CodeSniffer/ https://squizlabs.github.io/HTML_CodeSniffer/ ), the tools that are integrated with Firefox and Chrome's devtools, or CLI tools like Axe or Pa11y.
- bobwaycott 7y ago
  Firefox has the Accessibility Inspector tools built in for that: https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector https://developer.mozilla.org/en-US/docs/Tools/Accessibility... You can inspect items for contrast ratio, and I believe there’s even a color blindness simulator.
mhb 7y ago
Very nice. I don't know if it would be useful but it would be interesting to have a link to where a combination was seen on the web (for the ones that were found there).
phkahler 7y ago
19, 63, 73, and 89 are nearly unreadable to me. Not as bad as the red on black error text in my linux terminal though.
- Tagbert 7y ago
  most of those are complementary color combinations. those are colors that are opposite each other on a color wheel. They can seem to “vibrate” due to the high contrast in different color channels (RGB). They are sometimes used for attention getting but are not suitable for longer text blocks.
- kamy22 7y ago
  I agree with you, 63 is terrible to read :D
- deleted 7y ago
  [deleted]
deleted 7y ago
[deleted]
eddyg 7y ago
I wasn't sure what "only AA accessible" referred to, but apparently it's a rating[0] to mean at least a contrast ratio of 4.5:1 (a "AAA" rating requires a 7:1 contrast ratio). This site[1] lets you check the rating for any color combination, if you're curious. [0] https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-cont... [1] https://accessible-colors.com https://accessible-colors.com
- petepete 7y ago
  Recent version of Firefox have the ability to check ratios built right in. I use the tool daily. https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector https://developer.mozilla.org/en-US/docs/Tools/Accessibility...
spennant 7y ago
I pasted a couple of these into ShapeFactory's Duotone and got really nice results ( #3 https://duotone.shapefactory.co/?f=3a97d4&t=1a2037 https://duotone.shapefactory.co/?f=3a97d4&t=1a2037 ) For the curious, what their tool seems to be doing is: 1) grabbing a photo from Unsplash, 2) cranking down the color saturation to "-100" (essentially making it B&W) , 3) embedding it into an SVG and applyig a filter that leverages 'feColorMatrix'. Very clever.
gnulinux 7y ago
I wish there was a curated set of color palettes. I'm really bad at colors, but occasionally enjoy drawing/designing things. But colors always confuse since I have no idea which ones to pick, there are infinitely many of them!
- shredprez 7y ago
  I think you’ll appreciate ColorHunt, a wonderful 4-tone palette library (no relationship to the site, just a happy user). https://colorhunt.co/ https://colorhunt.co/

102 points by alexpate 7y ago

I can never figure out a nice color combination by myself, no matter how hard i try. I have to resort to online resources such as this in the end.

DanBC 7y ago

This is nice and I like lots of these combinations. I'm curious about accessibility. Are any of these combinations harder to use for people with colour-blindness? How would i test for that?

Tomte 7y ago
I would assume that's part of "AA accessible" combinations which you can toggle on top. There are accessibility checkers (ARIA) on the web, they can give you a score at least.
Nekobai 7y ago
You can test individual colours using tools like https://webaim.org/resources/contrastchecker/ https://webaim.org/resources/contrastchecker/ To check the colours on a page (and many other accessibility violations) you can use a bookmarklet like HTML Codesniffer ( https://squizlabs.github.io/HTML_CodeSniffer/ https://squizlabs.github.io/HTML_CodeSniffer/ ), the tools that are integrated with Firefox and Chrome's devtools, or CLI tools like Axe or Pa11y.
bobwaycott 7y ago
Firefox has the Accessibility Inspector tools built in for that: https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector https://developer.mozilla.org/en-US/docs/Tools/Accessibility... You can inspect items for contrast ratio, and I believe there’s even a color blindness simulator.

mhb 7y ago

Very nice. I don't know if it would be useful but it would be interesting to have a link to where a combination was seen on the web (for the ones that were found there).

phkahler 7y ago

19, 63, 73, and 89 are nearly unreadable to me. Not as bad as the red on black error text in my linux terminal though.

Tagbert 7y ago
most of those are complementary color combinations. those are colors that are opposite each other on a color wheel. They can seem to “vibrate” due to the high contrast in different color channels (RGB). They are sometimes used for attention getting but are not suitable for longer text blocks.
kamy22 7y ago
I agree with you, 63 is terrible to read :D
deleted 7y ago
[deleted]

deleted 7y ago

[deleted]

eddyg 7y ago

I wasn't sure what "only AA accessible" referred to, but apparently it's a rating[0] to mean at least a contrast ratio of 4.5:1 (a "AAA" rating requires a 7:1 contrast ratio). This site[1] lets you check the rating for any color combination, if you're curious. [0] https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-cont... [1] https://accessible-colors.com https://accessible-colors.com

petepete 7y ago
Recent version of Firefox have the ability to check ratios built right in. I use the tool daily. https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector https://developer.mozilla.org/en-US/docs/Tools/Accessibility...

spennant 7y ago

I pasted a couple of these into ShapeFactory's Duotone and got really nice results ( #3 https://duotone.shapefactory.co/?f=3a97d4&t=1a2037 https://duotone.shapefactory.co/?f=3a97d4&t=1a2037 ) For the curious, what their tool seems to be doing is: 1) grabbing a photo from Unsplash, 2) cranking down the color saturation to "-100" (essentially making it B&W) , 3) embedding it into an SVG and applyig a filter that leverages 'feColorMatrix'. Very clever.

gnulinux 7y ago

I wish there was a curated set of color palettes. I'm really bad at colors, but occasionally enjoy drawing/designing things. But colors always confuse since I have no idea which ones to pick, there are infinitely many of them!

shredprez 7y ago
I think you’ll appreciate ColorHunt, a wonderful 4-tone palette library (no relationship to the site, just a happy user). https://colorhunt.co/ https://colorhunt.co/