What's the reason behind the color palette?

[in3rsha]

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.

[orionrush]

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

[in3rsha]

Do you know where they originated from or how they were chosen?

[orionrush]

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

[orionrush]

See also http://clrs.cc/ by murmurs

[cmnstmntmn]

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]

@orionrush @cmnstmntmn Thank you.

[ghost]

@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