<%= head %> <%= siteHeader %>

Skins

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.

Color Palette

<% function renderColor(color) { %>
  • <% if (color == "#000000") { %> black <% } %> <% if (color == "#111111") { %> near-black <% } %> <% if (color == "#333333") { %> dark-gray <% } %> <% if (color == "#555555") { %> mid-gray <% } %> <% if (color == "#777777") { %> gray <% } %> <% if (color == "#999999") { %> silver <% } %> <% if (color == "#AAAAAA") { %> light-silver <% } %> <% if (color == "#CCCCCC") { %> moon-gray <% } %> <% if (color == "#EEEEEE") { %> light-gray <% } %> <% if (color == "#F4F4F4") { %> near-white <% } %> <% if (color == "#FFFFFF") { %> white <% } %> <% if (color == "#E7040F") { %> dark-red <% } %> <% if (color == "#FF4136") { %> red <% } %> <% if (color == "#FF725C") { %> light-red <% } %> <% if (color == "#FF6300") { %> orange <% } %> <% if (color == "#FFB700") { %> gold <% } %> <% if (color == "#FFD700") { %> yellow <% } %> <% if (color == "#FBF1A9") { %> light-yellow <% } %> <% if (color == "#5E2CA5") { %> purple <% } %> <% if (color == "#A463F2") { %> light-purple <% } %> <% if (color == "#D5008F") { %> dark-pink <% } %> <% if (color == "#FF41B4") { %> hot-pink <% } %> <% if (color == "#FF80CC") { %> pink <% } %> <% if (color == "#FFA3D7") { %> light-pink <% } %> <% if (color == "#137752") { %> dark-green <% } %> <% if (color == "#19A974") { %> green <% } %> <% if (color == "#9EEBCF") { %> light-green <% } %> <% if (color == "#001B44") { %> navy <% } %> <% if (color == "#00449E") { %> dark-blue <% } %> <% if (color == "#357EDD") { %> blue <% } %> <% if (color == "#96CCFF") { %> light-blue <% } %> <% if (color == "#CDECFF") { %> lightest-blue <% } %> <% if (color == "#F6FFFE") { %> washed-blue <% } %> <% if (color == "#E8FDF5") { %> washed-green <% } %> <% if (color == "#FFFCEB") { %> washed-yellow <% } %> <% if (color == "#FFDFDF") { %> washed-red <% } %> <%= color %>
  • <% } %>

    Accessible Combinations

    AA Large (contrast ≥ 3.0) <%= combos.length %>

    AA (contrast ≥ 4.5) <%= combosAA.length %>

    AAA (contrast ≥ 7.0) <%= combosAAA.length %>

    <% function renderCombo(combo) { %>
  • Aa <%= combo.contrast.toFixed(2) %>

    In visual perception a color is almost never seen as it really is – as it physically is. This fact makes color the most relative medium in art. - Josef Albers

    <% if (combo.pairing == "#000000") { %> .black { color: <%= combo.pairing %> } <% } %> <% if (combo.pairing == "#111111") { %> .near-black { color: <%= combo.pairing %> } <% } %> <% if (combo.pairing == "#333333") { %> .dark-gray { color: <%= combo.pairing %> } <% } %> <% if (combo.pairing == "#555555") { %> .mid-gray { color: <%= combo.pairing %> } <% } %> <% if (combo.pairing == "#777777") { %> .gray { color: <%= combo.pairing %> } <% } %> <% if (combo.pairing == "#999999") { %> .silver { color: <%= combo.pairing %> } <% } %> <% if (combo.pairing == "#AAAAAA") { %> .light-silver { color: <%= combo.pairing %> } <% } %> <% if (combo.pairing == "#CCCCCC") { %> .moon-gray { color: <%= combo.pairing %> } <% } %> <% if (combo.pairing == "#EEEEEE") { %> .light-gray { color: <%= combo.pairing %> } <% } %> <% if (combo.pairing == "#F4F4F4") { %> .near-white { color: <%= combo.pairing %> } <% } %> <% if (combo.pairing == "#FFFFFF") { %> .white { color: <%= combo.pairing %> } <% } %> <% if (combo.pairing == "#E7040F") { %> .dark-red { color: <%= combo.pairing %> } <% } %> <% if (combo.pairing == "#FF4136") { %> .red { color: <%= combo.pairing %> } <% } %> <% if (combo.pairing == "#FF725C") { %> .light-red { color: <%= combo.pairing %> } <% } %> <% if (combo.pairing == "#FF6300") { %> .orange { color: <%= combo.pairing %> } <% } %> <% if (combo.pairing == "#FFB700") { %> .gold { color: <%= combo.pairing %> } <% } %> <% if (combo.pairing == "#FFD700") { %> .yellow { color: <%= combo.pairing %> } <% } %> <% if (combo.pairing == "#FBF1A9") { %> .light-yellow { color: <%= combo.pairing %> } <% } %> <% if (combo.pairing == "#5E2CA5") { %> .purple { color: <%= combo.pairing %> } <% } %> <% if (combo.pairing == "#A463F2") { %> .light-purple { color: <%= combo.pairing %> } <% } %> <% if (combo.pairing == "#D5008F") { %> .dark-pink { color: <%= combo.pairing %> } <% } %> <% if (combo.pairing == "#FF41B4") { %> .hot-pink { color: <%= combo.pairing %> } <% } %> <% if (combo.pairing == "#FF80CC") { %> .pink { color: <%= combo.pairing %> } <% } %> <% if (combo.pairing == "#FFA3D7") { %> .light-pink { color: <%= combo.pairing %> } <% } %> <% if (combo.pairing == "#137752") { %> .dark-green { color: <%= combo.pairing %> } <% } %> <% if (combo.pairing == "#19A974") { %> .green { color: <%= combo.pairing %> } <% } %> <% if (combo.pairing == "#9EEBCF") { %> .light-green { color: <%= combo.pairing %> } <% } %> <% if (combo.pairing == "#001B44") { %> .navy { color: <%= combo.pairing %> } <% } %> <% if (combo.pairing == "#00449E") { %> .dark-blue { color: <%= combo.pairing %> } <% } %> <% if (combo.pairing == "#357EDD") { %> .blue { color: <%= combo.pairing %> } <% } %> <% if (combo.pairing == "#96CCFF") { %> .light-blue { color: <%= combo.pairing %> } <% } %> <% if (combo.pairing == "#CDECFF") { %> .lightest-blue { color: <%= combo.pairing %> } <% } %> <% if (combo.pairing == "#F6FFFE") { %> .washed-blue { color: <%= combo.pairing %> } <% } %> <% if (combo.pairing == "#E8FDF5") { %> .washed-green { color: <%= combo.pairing %> } <% } %> <% if (combo.pairing == "#FFFCEB") { %> .washed-yellow { color: <%= combo.pairing %> } <% } %> <% if (combo.pairing == "#FFDFDF") { %> .washed-red { color: <%= combo.pairing %> } <% } %> <% if (combo.hex == "#000000") { %> .bg-black { background-color: <%= combo.hex %> } <% } %> <% if (combo.hex == "#111111") { %> .bg-near-black { background-color: <%= combo.hex %> } <% } %> <% if (combo.hex == "#333333") { %> .bg-dark-gray { background-color: <%= combo.hex %> } <% } %> <% if (combo.hex == "#555555") { %> .bg-mid-gray { background-color: <%= combo.hex %> } <% } %> <% if (combo.hex == "#777777") { %> .bg-gray { background-color: <%= combo.hex %> } <% } %> <% if (combo.hex == "#999999") { %> .bg-silver { background-color: <%= combo.hex %> } <% } %> <% if (combo.hex == "#AAAAAA") { %> .bg-light-silver { background-color: <%= combo.hex %> } <% } %> <% if (combo.hex == "#CCCCCC") { %> .bg-moon-gray { background-color: <%= combo.hex %> } <% } %> <% if (combo.hex == "#EEEEEE") { %> .bg-light-gray { background-color: <%= combo.hex %> } <% } %> <% if (combo.hex == "#F4F4F4") { %> .bg-near-white { background-color: <%= combo.hex %> } <% } %> <% if (combo.hex == "#FFFFFF") { %> .bg-white { background-color: <%= combo.hex %> } <% } %> <% if (combo.hex == "#E7040F") { %> .bg-dark-red { background-color: <%= combo.hex %> } <% } %> <% if (combo.hex == "#FF4136") { %> .bg-red { background-color: <%= combo.hex %> } <% } %> <% if (combo.hex == "#FF725C") { %> .bg-light-red { background-color: <%= combo.hex %> } <% } %> <% if (combo.hex == "#FF6300") { %> .bg-orange { background-color: <%= combo.hex %> } <% } %> <% if (combo.hex == "#FFB700") { %> .bg-gold { background-color: <%= combo.hex %> } <% } %> <% if (combo.hex == "#FFD700") { %> .bg-yellow { background-color: <%= combo.hex %> } <% } %> <% if (combo.hex == "#FBF1A9") { %> .bg-light-yellow { background-color: <%= combo.hex %> } <% } %> <% if (combo.hex == "#5E2CA5") { %> .bg-purple { background-color: <%= combo.hex %> } <% } %> <% if (combo.hex == "#A463F2") { %> .bg-light-purple { background-color: <%= combo.hex %> } <% } %> <% if (combo.hex == "#D5008F") { %> .bg-dark-pink { background-color: <%= combo.hex %> } <% } %> <% if (combo.hex == "#FF41B4") { %> .bg-hot-pink { background-color: <%= combo.hex %> } <% } %> <% if (combo.hex == "#FF80CC") { %> .bg-pink { background-color: <%= combo.hex %> } <% } %> <% if (combo.hex == "#FFA3D7") { %> .bg-light-pink { background-color: <%= combo.hex %> } <% } %> <% if (combo.hex == "#137752") { %> .bg-dark-green { background-color: <%= combo.hex %> } <% } %> <% if (combo.hex == "#19A974") { %> .bg-green { background-color: <%= combo.hex %> } <% } %> <% if (combo.hex == "#9EEBCF") { %> .bg-light-green { background-color: <%= combo.hex %> } <% } %> <% if (combo.hex == "#001B44") { %> .bg-navy { background-color: <%= combo.hex %> } <% } %> <% if (combo.hex == "#00449E") { %> .bg-dark-blue { background-color: <%= combo.hex %> } <% } %> <% if (combo.hex == "#357EDD") { %> .bg-blue { background-color: <%= combo.hex %> } <% } %> <% if (combo.hex == "#96CCFF") { %> .bg-light-blue { background-color: <%= combo.hex %> } <% } %> <% if (combo.hex == "#CDECFF") { %> .bg-lightest-blue { background-color: <%= combo.hex %> } <% } %> <% if (combo.hex == "#F6FFFE") { %> .bg-washed-blue { background-color: <%= combo.hex %> } <% } %> <% if (combo.hex == "#E8FDF5") { %> .bg-washed-green { background-color: <%= combo.hex %> } <% } %> <% if (combo.hex == "#FFFCEB") { %> .bg-washed-yellow { background-color: <%= combo.hex %> } <% } %> <% if (combo.hex == "#FFDFDF") { %> .bg-washed-red { background-color: <%= combo.hex %> } <% } %>
  • <% } %>

    Previous

    Position

    Next

    Next

    tachyons-skins

    v<%= moduleVersion %> <%= moduleSize %>
    Declarations
    <%= moduleObj.declarations.total %>
    Selectors
    <%= moduleObj.selectors.total %>
    Max. Specificity Score
    <%= moduleObj.selectors.specificity.max %>
    Size of Avg. Rule
    <%= moduleObj.rules.size.average %>
    src/_skins.css
    
    <%= srccss  %>
    
    
    <%= navDocs %>
    <%= siteFooter %> <%= googleAnalytics %>