in3rsha commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

orionrush commented 3 years ago

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.

139

632

193

tachyons-css/tachyons-css.github.io#193

orionrush commented 3 years ago

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

cmnstmntmn commented 3 years ago

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 commented 3 years ago

@orionrush @cmnstmntmn Thank you.

ghost commented 1 year ago

@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);
        }
    }
}

tachyons-css / tachyons

What's the reason behind the color palette? #682

466

139

632

193