tachyons
tachyons copied to clipboard
tachyons-css
What's the reason behind the color palette?
First of all, thank you for Tachyons. It's a pleasure to use, and really removes a mental burden that comes with switching between HTML and CSS when building pages for the web.
But anyway... what's the reason for the colors used in Tachyons?
I'm assuming care was taken in choosing colors that are both good for design and work well together. However, sometimes I'd like to use a slightly different colors in addition to the ones that come with Tachyons, but I'm not sure how to go about extending the palette with colors that might work with the existing ones.
I'm probably over-thinking this, but if there's some sort of system or logic behind the colors selected in Tachyons, I would be very interested to hear about it. I've tried converting all the colors to HSL to look for patterns, but I can't see anything obvious:
black #000000 rgb(0, 0, 0) hsl(0, 0, 0)
near-black #111111 rgb(17, 17, 17) hsl(0, 0, 7)
dark-gray #333333 rgb(51, 51, 51) hsl(0, 0, 20)
mid-gray #555555 rgb(85, 85, 85) hsl(0, 0, 33)
gray #777777 rgb(119, 119, 119) hsl(0, 0, 47)
silver #999999 rgb(153, 153, 153) hsl(0, 0, 60)
light-silver #aaaaaa rgb(170, 170, 170) hsl(0, 0, 67)
moon-gray #cccccc rgb(204, 204, 204) hsl(0, 0, 80)
light-gray #eeeeee rgb(238, 238, 238) hsl(0, 0, 93)
near-white #f4f4f4 rgb(244, 244, 244) hsl(0, 0, 96)
white #ffffff rgb(255, 255, 255) hsl(0, 0, 100)
dark-red #e7040f rgb(231, 4, 15) hsl(357, 97, 46)
red #ff4136 rgb(255, 65, 54) hsl(3, 100, 61)
light-red #ff725c rgb(255, 114, 92) hsl(8, 100, 68)
orange #ff6300 rgb(255, 99, 0) hsl(23, 100, 50)
gold #ffb700 rgb(255, 183, 0) hsl(43, 100, 50)
yellow #ffd700 rgb(255, 215, 0) hsl(51, 100, 50)
light-yellow #fbf1a9 rgb(251, 241, 169) hsl(53, 91, 82)
purple #5e2ca5 rgb(94, 44, 165) hsl(265, 58, 41)
light-purple #a463f2 rgb(164, 99, 242) hsl(267, 85, 67)
dark-pink #d5008f rgb(213, 0, 143) hsl(320, 100, 42)
hot-pink #ff41b4 rgb(255, 65, 180) hsl(324, 100, 63)
pink #ff80cc rgb(255, 128, 204) hsl(324, 100, 75)
light-pink #ffa3d7 rgb(255, 163, 215) hsl(326, 100, 82)
dark-green #137752 rgb(19, 119, 82) hsl(158, 72, 27)
green #19a974 rgb(25, 169, 116) hsl(158, 74, 38)
light-green #9eebcf rgb(158, 235, 207) hsl(158, 66, 77)
navy #001b44 rgb(0, 27, 68) hsl(216, 100, 13)
dark-blue #00449e rgb(0, 68, 158) hsl(214, 100, 31)
blue #357edd rgb(53, 126, 221) hsl(214, 71, 54)
light-blue #96ccff rgb(150, 204, 255) hsl(209, 100, 79)
lightest-blue #cdecff rgb(205, 236, 255) hsl(203, 100, 90)
washed-blue #f6fffe rgb(246, 255, 254) hsl(173, 100, 98)
washed-green #e8fdf5 rgb(232, 253, 245) hsl(157, 84, 95)
washed-yellow #fffceb rgb(255, 252, 235) hsl(51, 100, 96)
washed-red #ffdfdf rgb(255, 223, 223) hsl(0, 100, 94)
Is there a reason behind these color choices? Is there a nice extended palette available?
Thanks in advance.
http://tachyons.io/docs/themes/skins/ These are combinations that are regarded as accessible. There is nothing preventing you from modifying the color palet or adding your own. https://github.com/tachyons-css/tachyons-colors/blob/master/src/tachyons-colors.css
https://tachyons.io/docs/themes/skins/
There's a note
Tachyons comes with a collection of classes for setting the color of text and the color of the background. Listed below are the a11y friendly combinations that are available.
I must admit, that the colors listed as 'Accessible Combinations' are not all represented by Tachyons, such as the yellow #FFFF00, which is misleading.
related: #466 #139 #632 #193 tachyons-css/tachyons-css.github.io#193
not necessary related to tachyons,
@in3rsha have a look over material design theme.
as a golden rule: the less colors you have, the better :D
@in3rsha I have made my version of tachyons for some reason, here is some colors built, what do think about these? The class format are: (.x.sk) tx/bg/bd/txc[h/f]-colorname[i] (.x.sk) tx/bg/bd/txc[h/f]b/w[i]
.x.sk#{$namespace} {
&.tx-#{$class}#{$index},
&.txh-#{$class}#{$index}:hover,
&.txf-#{$class}#{$index}:focus {
color: $pick;
}
&.bg-#{$class}#{$index},
&.bgh-#{$class}#{$index}:hover,
&.bgf-#{$class}#{$index}:focus {
background-color: $pick;
}
&.bd-#{$class}#{$index},
&.bdh-#{$class}#{$index}:hover,
&.bdf-#{$class}#{$index}:focus {
border-color: $pick;
}
@if(config.$skinEnableContrast) {
&.txc-#{$class}#{$index},
&.txch-#{$class}#{$index}:hover,
&.txcf-#{$class}#{$index}:focus {
color: text-color($pick);
}
}
}
Successfully built(main): https://coolors.co/2f0292-4404cf-7233fa-a485e7-c3b4e4 Successfully built(minor): https://coolors.co/926102-cf8a04-fab633-e7c585-e4d3b4 Successfully built(slate): https://coolors.co/6e798e-9199aa-b0b6c2-c8ccd4-d5d7dd-d9dbe0-e0e2e7-e9ebee-f2f3f5-f8f9fa Successfully built(gunmetal): https://coolors.co/263238-37474f-455a64-546e7a-607d8b-78909c-90a4ae-b0bec5-cfd8dc-eceff1 Successfully built(raisin): https://coolors.co/181c24-1f232c-252932-2a2e37-2e3138-41454e-5b606b-797f8c-989eab-b5bbc6 Successfully built(antiqueRuby): https://coolors.co/70103e-8b182c-b42e13 Successfully built(nature): https://coolors.co/137752-19A974-9eebcf Successfully built(earth): https://coolors.co/16479c-2d69d2-3f72af Successfully built(frenchLime): https://coolors.co/366700-4e9300-6fd300-9cff2e-b9e983-cde5b3-dce7cf Successfully built(cloud): https://coolors.co/8f8f8f-ababab-c2c2c2-d4d4d4-dedede-e0e0e0-e8e8e8-ededed-f5f2f2-faf7f7
