Skip to content

Instantly share code, notes, and snippets.

@ciarand
Created April 15, 2013 21:37
Show Gist options
  • Save ciarand/5391466 to your computer and use it in GitHub Desktop.
Save ciarand/5391466 to your computer and use it in GitHub Desktop.
A listing of commonly used SCSS colors
/*========================================
= Solarized Colors =
========================================*/
$solarized-base03: #002B36;
$solarized-base02: #073642;
$solarized-base01: #586E75;
$solarized-base00: #657B83;
$solarized-base0: #839496;
$solarized-base1: #93A1A1;
$solarized-base2: #EEE8D5;
$solarized-base3: #FDF6E3;
$solarized-yellow: #B58900;
$solarized-orange: #CB4B16;
$solarized-red: #DC322F;
$solarized-magenta: #D33682;
$solarized-violet: #6C71C4;
$solarized-blue: #268BD2;
$solarized-cyan: #2AA198;
$solarized-green: #859900;
/*----- End of Solarized Colors ------*/
/*=========================================
= [Google Colors][] =
=========================================*/
// [Google Colors]: http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-2/9084309
// Orange-reds
$google-orange-red1: #F8B39B;
$google-orange-red2: #F48159;
$google-orange-red3: #F05722;
$google-orange-red4: #E94D20;
$google-orange-red5: #E2431E;
// Reds
$google-red1: #ED9D97;
$google-red2: #E57368;
$google-red3: #DB4437;
$google-red4: #D73D32;
$google-red5: #D3362D;
// Oranges
$google-orange1: #FBD199;
$google-orange2: #F9B256;
$google-orange3: #F7981D;
$google-orange4: #EF851C;
$google-orange5: #E7711B;
// Orange-yellows
$google-orange-yellow1: #FFE168;
$google-orange-yellow2: #FBCB43;
$google-orange-yellow3: #F4B400;
$google-orange-yellow4: #ECA403;
$google-orange-yellow5: #E49307;
// Yellows
$google-yellow1: #FBF6A7;
$google-yellow2: #F8F06C;
$google-yellow3: #F6EB3B;
$google-yellow4: #F4DF3B;
$google-yellow5: #F1CA3A;
// Yellow-greens
$google-yellow-green1: #E8EFA6;
$google-yellow-green2: #DAE56B;
$google-yellow-green3: #CDDC39;
$google-yellow-green4: #C3D03F;
$google-yellow-green5: #B9C246;
// Greens
$google-green1: #BADBAB;
$google-green2: #8CC474;
$google-green3: #65B045;
$google-green4: #63A74A;
$google-green5: #SF9654;
// Blue-greens
$google-blue-green1: #7BCFA9;
$google-blue-green2: #EEB679;
$google-blue-green3: #0F9D58;
$google-blue-green4: #13955C;
$google-blue-green5: #1A8763;
// Teals
$google-teal1: #94D8E8;
$google-teal2: #4DBFD9;
$google-teal3: #11A9CC;
$google-teal4: #15A0C8;
$google-teal5: #1C91C0;
// Light-blues
$google-light-blue1: #A0C3FF;
$google-light-blue2: #76A7FA;
$google-light-blue3: #4285F4;
$google-light-blue4: #427FED;
$google-light-blue5: #4374E0;
// Dark-blues
$google-dark-blue1: #A8B5D8;
$google-dark-blue2: #6F85BF;
$google-dark-blue3: #3F5CA9;
$google-dark-blue4: #4151A3;
$google-dark-blue5: #43459D;
// Purples
$google-purple1: #C5A5CF;
$google-purple2: #9E69AF;
$google-purple3: #7E3794;
$google-purple4: #703593;
$google-purple5: #5C3292;
// Pinks
$google-pink1: #D799AE;
$google-pink2: #BC5679;
$google-pink3: #A61D4C;
$google-pink4: #981B48;
$google-pink5: #871B47;
// Browns
$google-brown1: #AB948C;
$google-brown2: #89695E;
$google-brown3: #795548;
$google-brown4: #673F30;
$google-brown5: #572A1A;
// Whites
$google-white1: #F2F2F2;
$google-white2: #E6E6E6;
$google-white3: #CCCCCC;
$google-white4: #B3B3B3;
$google-white5: #999999;
// Blacks
$google-black1: #808080;
$google-black2: #666666;
$google-black3: #4D4D4D;
$google-black4: #333333;
$google-black5: #1A1A1A;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment